bootstrap cards

Solutions on MaxInterview for bootstrap cards by the best coders in the world

showing results for - "bootstrap cards"
Azariah
20 Jul 2018
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>
Pia
02 May 2016
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>
Inès
30 Jun 2018
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>
Erik
18 Apr 2020
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>
Sohan
19 Jan 2018
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.
Macy
09 Mar 2017
1Bootstrap’s cards provide a flexible and extensible content container with multiple variants and sjjdfdsfsdfsdfsdfsdf options.
similar questions
queries leading to this page
bootstrap cards