| card | Inside the div, each card is wrapped inside the card class. |
<div class="card"> |
|---|
| card-body | card-body holds the content of the card. |
<div class="card-body">InterviewBit</div> |
|---|
| card-title | Card-title holds the title of the card. |
<h2 class="card-title">InterviewBit</h2> |
|---|
| card-subtitle | Card-subtitle is used for adding subtitles. |
<h6 class="card-subtitle"> InterviewBit</h6> |
|---|
| card-text | card text class wraps the container around card text. |
<p class="card-text">InterviewBit</p> |
|---|
| card-link | card-link is used for adding a link to a card. |
<a href="#!" class="card-link">InterviewBit</a> |
|---|
| card-img-top | The main card image is shown on the top. |
<a href="#!" class="card-link">InterviewBit</a>
|
|---|
| middle image | No need to specify the card image class as top or bottom when displaying an image in the middle, just add the image tag. |
<img src="myimpimage.png"> |
|---|
| card-img-bottom | Image is displayed after card content. |
<img class="card-img-bottom" src="bootstrap-container-class.png"> |
|---|
| card-img-overlay | For displaying image in the background. |
<div class="card-img-overlay"><p class="card-text">Welcome to InterviewBit</p> </div> |
|---|
| card-header | card-header is used to add header bootstrap for a card. |
<div class="card"> <div class="card-header"> Head </div> <div class="card-block"><h4 class="card-title">Title</h4><p class="card-text">Welcome to InterviewBit</p></div></div> |
|---|
| card-footer | Footer bootstrap for the card. |
<div class="card"><div class="card-body">
<h5 class="card-title">Welcome to InterviewBit</h5> <p class="card-text">Welcome to InterviewBit</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> text </div></div> |
|---|
| card-columns | To the wrapping div of the masonry-like collection of cards, the .card-columns class is added. |
<div class="card-columns"> card i card ii </div> |
|---|
| card bg-... text-... | It is used to style the cards by formatting with different colors. |
<div class = "card text-<color> bg-<color>"></div> |
|---|
