In bootstrap a card is like container but it is extensible and flexible. It can be used for various purpose like header and footer. It also has contextual background properties.
Basic cards
In this example card is used to make a
basic card while it's width is specified with CSS width
property.
<divclass="card"style="width:15rem;"><imgclass="card-img-top"src="img/blog-img/lb-3.jpg"alt="image for card"><divclass="card-body"><h5class="card-title">Bootstrap 4</h5><pclass="card-text">This is the course of bootstrap 4. Explore more about this course.</p><ahref="#"class="btn btn-primary">Read more</a></div></div>
Output of above code
Bootstrap 4
This is the course of bootstrap 4. Explore more about this course.
List groups in card
In this example a list group is make made inside a card.
<divclass="card"style="width:15rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">Item A</li><liclass="list-group-item">Item B</li><liclass="list-group-item">Item C</li><liclass="list-group-item">Item D</li></ul></div>
Output of above code
- Item A
- Item B
- Item C
- Item D
Header and Footer
In this example two classes are card-header and
card-footer. Here card-header class is used for
header area and card-footer is used to make footer area.
<divclass="card text-center"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Webtags.com.pk</h5><pclass="card-text">Webtags.com.pk is the best academy for web development courses.</p><buttonclass="btn btn-primary">Read more</button></div><divclass="card-footer text-muted">Copyright ©2020-2023
</div></div>
Output of above code
Header
Webtags.com.pk
Webtags.com.pk is the best academy for web development courses.
Contextual cards
In this example many contextual classes are used to apply some background colors to the cards.
<divclass="card"><divclass="card-body">Basic card</div></div><divclass="card bg-primary text-white"><divclass="card-body">bg-primary</div></div><divclass="card bg-success text-white"><divclass="card-body">bg-success</div></div><divclass="card bg-info text-white"><divclass="card-body">bg-info</div></div><divclass="card bg-warning text-white"><divclass="card-body">bg-warning</div></div><divclass="card bg-danger text-white"><divclass="card-body">bg-danger</div></div><divclass="card bg-secondary text-white"><divclass="card-body">bg-secondary</div></div><divclass="card bg-dark text-white"><divclass="card-body">bg-dark</div></div><divclass="card bg-light text-white"><divclass="card-body">bg-light</div></div>
Output of above code
Basic card
bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-secondary
bg-dark
bg-light
Navigation cards
In this example nav class is used make
navigation with some links.
<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item"><aclass="nav-link active"href="#">Home</a></li><liclass="nav-item"><aclass="nav-link"href="#">About</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Contact</a></li></ul></div><divclass="card-body"><h5class="card-title">Webtags.com.pk</h5><pclass="card-text">Webtags.com.pk is the best academy for web development courses.</p><buttonclass="btn btn-primary">Read more</button></div></div>
Output of above code
Webtags.com.pk
Webtags.com.pk is the best academy for web development courses.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
