Skip to content

Commit 492addf

Browse files
elangosundarelangosundar
committed
bootstrap added
1 parent 599934f commit 492addf

File tree

8 files changed

+58
-7579
lines changed

8 files changed

+58
-7579
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
},
4545
"dependencies": {
4646
"bootstrap": "^4.1.3",
47+
"jquery": "^3.3.1",
4748
"reactstrap": "^6.5.0"
4849
}
4950
}

‎src/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { Button } from 'reactstrap';
3-
import main from './main.css';
3+
44
import Navigation from './Components/Navigation';
55
import Main from './Components/Main';
66

@@ -28,10 +28,10 @@ class App extends React.Component {
2828

2929
render() {
3030
return (
31-
<div className="main">
31+
<div className="container thememain">
32+
<Navigation />
3233
<div className="container main">
33-
<Navigation />
34-
<Main />
34+
<Main />
3535
</div>
3636
</div>
3737
);

‎src/Components/Main.js‎

Lines changed: 15 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,24 @@ import React from 'react';
44
class Main extends React.Component {
55
render() {
66
return (
7-
<div className="row col-sm-12 col-md-12 col-lg-12 container-fluid">
8-
<div className="row container container-fluid">
9-
<div className="jumbotron container jumbotron-bg">
10-
<div className="container">
11-
<div className="row">
12-
<div className="col-12 main-text">
13-
<h1>Debug APIs like a <span className="jumbotron__undie">human</span>, not a robot</h1>
14-
<p className="font-light text-xl no-margin-bottom">Finally, a REST client you'll</p>
15-
</div>
16-
</div>
17-
</div>
7+
<div>
8+
<div className="row jumbotron thememain" >
9+
<div className="col-sm-12">
10+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
1811
</div>
1912
</div>
20-
<div className="row col-sm-12 col-md-12 col-lg-12 container-fluid">
21-
<section className="no-margin padding-top-lg padding-bottom-lg">
22-
<div className="container-fluid">
23-
<div className="row">
24-
<div className="col-sm bg-success">
25-
<div className="col-4 col-sm-4 col-md-4 col-lg-4 padding-top">
26-
<div className="img--promo">
27-
<div className="gatsby-image-outer-wrapper" >
28-
<div className="gatsby-image-wrapper" >
29-
<div></div>
30-
</div>
31-
</div>
32-
</div>
33-
<h3>Organize everything</h3>
34-
<p>Create workspaces or folders, drag-and-drop requests, and easily import and export your data.</p>
35-
</div>
36-
</div>
37-
<div className="col-sm bg-warning">
38-
<div className="col-4 col-sm-4 col-md-4 col-lg-4 padding-top">
39-
<div className="img--promo">
40-
<div className="gatsby-image-outer-wrapper" >
41-
<div className="gatsby-image-wrapper" >
42-
<div></div>
43-
</div>
44-
</div>
45-
</div>
46-
<h3>Organize everything</h3>
47-
<p>Create workspaces or folders, drag-and-drop requests, and easily import and export your data.</p>
48-
</div>
49-
</div>
50-
<div className="col-sm bg-success">
51-
<div className="col-4 col-sm-4 col-md-4 col-lg-4 padding-top">
52-
<div className="img--promo">
53-
<div className="gatsby-image-outer-wrapper" >
54-
<div className="gatsby-image-wrapper" >
55-
<div></div>
56-
</div>
57-
</div>
58-
</div>
59-
<h3>Organize everything</h3>
60-
<p>Create workspaces or folders, drag-and-drop requests, and easily import and export your data.</p>
61-
</div>
62-
</div>
63-
</div>
64-
</div>
65-
</section>
13+
<div className="row"></div>
14+
<div className="row">
15+
<div className="col-sm">
16+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
17+
</div>
18+
<div className="col-sm">
19+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
20+
</div>
21+
<div className="col-sm">
22+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
23+
</div>
6624
</div>
67-
6825
</div>
6926
)
7027
}

‎src/Components/Navigation.js‎

Lines changed: 24 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,32 @@ import React from 'react';
44
class Navigation extends React.Component {
55
render() {
66
return (
7-
<nav className="navbar navbar-expand-lg navbar-light">
8-
<a className="navbar-brand" href="/">Navbar</a>
9-
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
10-
<span className="navbar-toggler-icon"></span>
11-
</button>
7+
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain">
8+
<a className="navbar-brand" href="#">Navbar</a>
9+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
10+
<span className="navbar-toggler-icon"></span>
11+
</button>
1212

13-
<div className="collapse navbar-collapse" id="navbarSupportedContent">
14-
<ul className="navbar-nav mr-auto">
15-
<li className="nav-item active">
16-
<a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
17-
</li>
18-
<li className="nav-item">
19-
<a className="nav-link" href="/">Link</a>
20-
</li>
21-
<li className="nav-item dropdown">
22-
<a className="nav-link dropdown-toggle" href="/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
23-
Dropdown
24-
</a>
25-
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
26-
<a className="dropdown-item" href="/">Action</a>
27-
<a className="dropdown-item" href="/">Another action</a>
28-
<div className="dropdown-divider"></div>
29-
<a className="dropdown-item" href="/">Something else here</a>
30-
</div>
31-
</li>
32-
<li className="nav-item">
33-
<a className="nav-link disabled" href="/">Disabled</a>
34-
</li>
35-
</ul>
36-
<form className="form-inline my-2 my-lg-0">
37-
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
38-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
39-
</form>
40-
</div>
41-
</nav>
13+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
14+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
15+
<li className="nav-item active">
16+
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
17+
</li>
18+
<li className="nav-item">
19+
<a className="nav-link" href="#">Link</a>
20+
</li>
21+
<li className="nav-item">
22+
<a className="nav-link disabled" href="#">Disabled</a>
23+
</li>
24+
</ul>
25+
<form className="form-inline my-2 my-lg-0">
26+
<input className="form-control mr-sm-2" type="search" placeholder="Search"></input>
27+
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
28+
</form>
29+
</div>
30+
</nav>
4231
)
4332
}
4433
}
4534

46-
export default Navigation;
35+
export default Navigation;

‎src/bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import React from "react";
33
import ReactDOM from "react-dom";
44
import App from "./App";
5-
import 'bootstrap/dist/css/bootstrap.min.css';
5+
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
6+
import './style.css';
7+
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
8+
import 'jquery';
69

710
ReactDOM.render(<App />, document.getElementById("app"));

‎src/main.css‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)