bootstrap cards

1  <div class="card" style="width:400px">
2    <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
3    <div class="card-body">
4      <h4 class="card-title">John Doe</h4>
5      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
6      <a href="#" class="btn btn-primary">See Profile</a>
7    </div>
8  </div>

1<div class="card" style="width: 18rem;">
2  <img class="card-img-top" src="..." alt="Card image cap">
3  <div class="card-body">
4    <h5 class="card-title">Card title</h5>
5    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
6    <a href="#" class="btn btn-primary">Go somewhere</a>
7  </div>
8</div>

1<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
2  <div class="card-header">Header</div>
3  <div class="card-body">
4    <h5 class="card-title">Primary card title</h5>
5    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
6  </div>
7</div>
8<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
9  <div class="card-header">Header</div>
10  <div class="card-body">
11    <h5 class="card-title">Secondary card title</h5>
12    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
13  </div>
14</div>
15<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
16  <div class="card-header">Header</div>
17  <div class="card-body">
18    <h5 class="card-title">Success card title</h5>
19    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
20  </div>
21</div>
22<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
23  <div class="card-header">Header</div>
24  <div class="card-body">
25    <h5 class="card-title">Danger card title</h5>
26    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
27  </div>
28</div>
29<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
30  <div class="card-header">Header</div>
31  <div class="card-body">
32    <h5 class="card-title">Warning card title</h5>
33    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
34  </div>
35</div>
36<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
37  <div class="card-header">Header</div>
38  <div class="card-body">
39    <h5 class="card-title">Info card title</h5>
40    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
41  </div>
42</div>
43<div class="card bg-light mb-3" style="max-width: 18rem;">
44  <div class="card-header">Header</div>
45  <div class="card-body">
46    <h5 class="card-title">Light card title</h5>
47    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
48  </div>
49</div>
50<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
51  <div class="card-header">Header</div>
52  <div class="card-body">
53    <h5 class="card-title">Dark card title</h5>
54    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
55  </div>
56</div>

1<div class="card-group">
2  <div class="card">
3    <img src="..." class="card-img-top" alt="...">
4    <div class="card-body">
5      <h5 class="card-title">Card title</h5>
6      <p class="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>
7      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
8    </div>
9  </div>
10  <div class="card">
11    <img src="..." class="card-img-top" alt="...">
12    <div class="card-body">
13      <h5 class="card-title">Card title</h5>
14      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
15      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
16    </div>
17  </div>
18  <div class="card">
19    <img src="..." class="card-img-top" alt="...">
20    <div class="card-body">
21      <h5 class="card-title">Card title</h5>
22      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
23      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
24    </div>
25  </div>
26</div>

1Header
2Dark card title main container
3Some quick example text to build on the card title and make up the bulk of the card's content.

1Bootstrap’s cards provide a flexible and extensible content container with multiple variants and sjjdfdsfsdfsdfsdfsdf options.