Skip to content

Commit 7ae07ad

Browse files
elangosundarelangosundar
committed
added bootstrap
1 parent 7bf7dcf commit 7ae07ad

File tree

4 files changed

+62
-8
lines changed

4 files changed

+62
-8
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,14 @@
3636
"html-loader": "^0.5.5",
3737
"html-webpack-plugin": "^3.2.0",
3838
"mini-css-extract-plugin": "^0.4.2",
39-
"react": "^16.5.0",
40-
"react-dom": "^16.5.0",
39+
"react": "^16.6.0",
40+
"react-dom": "^16.6.0",
4141
"webpack": "^4.17.2",
4242
"webpack-cli": "^3.1.0",
4343
"webpack-dev-server": "^3.1.8"
4444
},
4545
"dependencies": {
46-
"bootstrap": "^4.1.3"
46+
"bootstrap": "^4.1.3",
47+
"reactstrap": "^6.5.0"
4748
}
4849
}

‎src/App.js‎

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

46
class App extends React.Component {
57
constructor(props){
@@ -26,10 +28,13 @@ class App extends React.Component {
2628
render() {
2729
return (
2830
<div>
29-
<Counter/>
30-
<Header/>
31-
<Content/>
32-
<Footer/>
31+
<Navigation />
32+
<div className="container">
33+
</div>
34+
<Counter />
35+
<Header />
36+
<Content />
37+
<Footer />
3338
</div>
3439
);
3540
}
@@ -39,7 +44,8 @@ class Counter extends React.Component{
3944
render(){
4045
return (
4146
<div>
42-
<h1>Simple Counter</h1>
47+
<h1>Simple Counter</h1>
48+
<Button color="danger">Danger!</Button>
4349
</div>
4450
);
4551
}

‎src/Components/Navigation.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
2+
import React from 'react';
3+
4+
class Navigation extends React.Component {
5+
render() {
6+
return (
7+
<nav className="navbar navbar-expand-lg navbar-light bg-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>
12+
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>
42+
)
43+
}
44+
}
45+
46+
export default Navigation;

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
import React from "react";
33
import ReactDOM from "react-dom";
44
import App from "./App";
5+
import 'bootstrap/dist/css/bootstrap.min.css';
56

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

0 commit comments

Comments
 (0)