Skip to content

Commit d71f43f

Browse files
elangosundarelangosundar
committed
Bootstarp added
1 parent 9760974 commit d71f43f

File tree

2 files changed

+111
-17
lines changed

2 files changed

+111
-17
lines changed

‎src/App.js‎

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

66
class App extends React.Component {
77
constructor(props){
@@ -28,29 +28,18 @@ class App extends React.Component {
2828
render() {
2929
return (
3030
<div>
31-
<Navigation />
3231
<div className="container">
32+
<Navigation />
33+
<div class="row">
34+
<Main />
35+
</div>
3336
</div>
34-
<Counter />
35-
<Header />
36-
<Content />
37-
<Footer />
37+
3838
</div>
3939
);
4040
}
4141
}
4242

43-
class Counter extends React.Component{
44-
render(){
45-
return (
46-
<div>
47-
<h1>Simple Counter</h1>
48-
<Button color="danger">Danger!</Button>
49-
</div>
50-
);
51-
}
52-
}
53-
5443
class Header extends React.Component{
5544
render(){
5645
return (

‎src/Components/Main.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
2+
import React from 'react';
3+
4+
class Main extends React.Component {
5+
render() {
6+
return (
7+
8+
9+
<div className="row">
10+
<div className="col-md-4">
11+
<div className="card mb-4 box-shadow">
12+
<div className="card-body">
13+
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
14+
<div className="d-flex justify-content-between align-items-center">
15+
<div className="btn-group">
16+
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
17+
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
18+
</div>
19+
<small className="text-muted">9 mins</small>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
25+
<div className="col-md-4">
26+
<div className="card mb-4 box-shadow">
27+
<div className="card-body">
28+
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
29+
<div className="d-flex justify-content-between align-items-center">
30+
<div className="btn-group">
31+
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
32+
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
33+
</div>
34+
<small className="text-muted">9 mins</small>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div className="col-md-4">
41+
<div className="card mb-4 box-shadow">
42+
<div className="card-body">
43+
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
44+
<div className="d-flex justify-content-between align-items-center">
45+
<div className="btn-group">
46+
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
47+
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
48+
</div>
49+
<small className="text-muted">9 mins</small>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<div className="col-md-4">
56+
<div className="card mb-4 box-shadow">
57+
<div className="card-body">
58+
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
59+
<div className="d-flex justify-content-between align-items-center">
60+
<div className="btn-group">
61+
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
62+
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
63+
</div>
64+
<small className="text-muted">9 mins</small>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<div className="col-md-4">
71+
<div className="card mb-4 box-shadow">
72+
<div className="card-body">
73+
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
74+
<div className="d-flex justify-content-between align-items-center">
75+
<div className="btn-group">
76+
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
77+
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
78+
</div>
79+
<small className="text-muted">9 mins</small>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
85+
<div className="col-md-4">
86+
<div className="card mb-4 box-shadow">
87+
<div className="card-body">
88+
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
89+
<div className="d-flex justify-content-between align-items-center">
90+
<div className="btn-group">
91+
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
92+
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
93+
</div>
94+
<small className="text-muted">9 mins</small>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
101+
)
102+
}
103+
}
104+
105+
export default Main;

0 commit comments

Comments
 (0)