Bootstrap Tutorial: Bootstrap 4 Card Explained

Bootstrap Tutorial: Bootstrap 4 Card Explained

In this post we will give you information about Bootstrap Tutorial: Bootstrap 4 Card Explained. Hear we will give you detail about Bootstrap Tutorial: Bootstrap 4 Card ExplainedAnd how to use it also give you demo for it if it is necessary.

In this Bootstrap tutorial, we’ll learn about the new Card component introduced in Bootstrap 4 which replaces many old components in Bootstrap 3, and can be used to build modern style web layouts without re-inventing the well or being a CSS designer with deep CSS knowledge. Now and thanks to Bootstrap 4 you can, as a developer with small CSS knowledge, build modern and professional card-based layouts.

Bootstrap cards provide flexible containers for displaying a mix of content (text, images, links etc.) in a grouped way. They can be created by only adding a bunch of CSS classes to HTML markup and they can be easily styled and customized to present a new and distinguished look.

Cards are used to create advanced layouts such as Masonry. You’ll find cards in many big web platforms such as e-commerce websites, analytics dashboards and blogs etc.

For Bootstrap users, Cards are a replacement for the popular components : panels, thumbnails and wells (all these can now be created with cards)

Before we start seeing how to create different card types. These are a summary of information about Bootstrap 4 Cards

  • Cards are used to present a mix of content in an elegant and compact way
  • Cards are built on top of Flexbox
  • Cards have no margin by default
  • Cards can be easily organized in groups, decks or Masonry columns
  • Cards have a header, footer and 1 or more bodies
  • Cards can be easily aligned and well mixed with the other Bootstrap components etc.

In this tutorial you will get introduced to the new card component then you will see different elements of a card and finally you will build an Masonry like layout using Cards and Card Columns

First start by creating an HTML file then copy the following starter template from the Bootstrap docs in the new file

<!doctype html><htmllang="en"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><linkrel="stylesheet"href=""integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin="anonymous"><title>Bootstrap 4 Card Example</title></head><body><divclass="container"><!-- Our Simple Card Goes Here --></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src=""integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><script src=""integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><script src=""integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script></body></html>

Now let’s start by creating a basic card. Add a <div> with the class .card to create the outer container of your card component

Next inside the outer container, add a header, card body and footer

You can add a header by either creating a <div> or <h*> heading element then add the .card-header class

You can create a card body by adding a .card-body class to a <div>

For the footer you need to add a <div> with the class .card-footer

<divclass="card"><divclass="card-header">        Card Header        </div><divclass="card-body">        Card Body    </div><divclass="card-footer">        Card Footer    </div></div>

Please note that you can add one or many card bodies to your card and you can also wrap the content inside the body in other tags such as

<divclass="card-body">        You can also add a second body    </p></div>

Use a card body when you want to create a padded section within a card.

Using .card-img-top and card-img-bottom you create image caps which are images that exist on the top and bottom of the card body/bodies

<imgclass="card-img-top"src=""alt="Card image top"><divclass="card-body"></div><imgclass="card-img-bottom"src=""alt="Card image bottom">

You can see that the card component is taking the whole width of its container division but you can control the width with different means:

  • using the width and max-width CSS properties
  • using the Bootstrap 4 Grid

You can also set the height but in most cases the height needs to fit the vertical alignment of the card content so you’ll rarely need to set it.

For adding content inside the card body you also have a bunch of classes (.card-title, .card-subtitle, .card-text) that make it easy to style different content types such as the card title, subtitle and text.

You can use standard HTML tags to style text within .card-text class

<divclass="card-body"><h3class="card-title">Card title</h3><h4class="card-subtitle">Card subtitle</h4><pclass="card-text">This is a card body 1</p></div>

Want to use the cap image as an overlay? you can simply switch the .card-body class with the .card-img-overlay class

<divclass="card"><imgclass="card-img-top"src=""alt="Card image top"><divclass="card-img-overlay"><h3class="card-title">Card 2 title</h3><h4class="card-subtitle">Card 2 subtitle</h4><pclass="card-text">This is a card 2 body </p></div></div>

You can add navigation tabs and pills to the header of your card using nav, nav-tabs|nav-pills, card-header-tabs| card-header-pill classes with <ul> tags

<divclass="card-header"><ulclass="nav nav-tabs card-header-tabs"><liclass="nav-item"><aclass="nav-link active"href="#">Tab 1</a></li><liclass="nav-item"><aclass="nav-link"href="#">Tab 2</a></li></ul></div>

You can add links to card content using the .card-link class with an <a> element

<divclass="card"><imgclass="card-img-top"src=""alt="Card image top"><divclass="card-img-overlay white"><h3class="card-title">Card title</h3><h4class="card-subtitle">Card  subtitle</h4><pclass="card-text">You can add links to card body</p><ahref="#"class="card-link">Link 1</a><ahref="#"class="card-link">Link 2</a></div></div>

Bootstrap card tutorial

You can use list as body content. For example this is how you can create two stylish lists without any extra custom CSS

<divclass="card text-primary border-primary"><ulclass="list-group"><liclass="list-group-item">Item 1</li><liclass="list-group-item">Item 2</li><liclass="list-group-item">Item 3</li></ul></div><br><divclass="card text-primary border-primary"><divclass="card-body"><h2class="card-title"> My List</h2><ulclass="list-group list-group-flush"><liclass="list-group-item">Item 1</li><liclass="list-group-item">Item 2</li><liclass="list-group-item">Item 3</li></ul></div>

How to Create Complex Card Based Layouts?

Singe cards are great way to display a mix of content but usually you need to display a collection of cards to build complex layouts such as Masonry like layouts.

Bootstrap Card Groups

You can create a single unit of multiple cards using Cards. The columns of the unit will take the same width and height (this is achieved using Flexbox).

This is an example of a group of 3 cards

Bootstrap Card Decks

Card Decks are similar to Card Groups except that individual cards inside a deck are not attached

Bootstrap Card Columns

Cards Columns provides a grouping that organizes cards into a masonry like (Pinterest style) layout. You don’t need to provide extra CSS or JavaScript/jQuery code just wrap your cards inside a <div> with .card-columns and Bootstrap 4 will present you with a Masonry layout. But keep in mind this is just CSS not JavaScript code involved so the masonry layout is simple, cards are ordered from top-left, bottom-right and there is no easy way to chage this behavior unless you are using to a Mosonry plugin.

See the following pen for an example

Bootstrap tutorial

## Conclusion

In this tutorial we’ve introduced the Card component.

Thanks to Bootstrap 4 you will no more be intimidated when you want to create modern style and card based layouts even if you are just starting with HTML and CSS or you are a developer with no extensive knowledge of CSS.

Hope this code and post will helped you for implement Bootstrap Tutorial: Bootstrap 4 Card Explained. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US