Contents
- Introduce
- What is Bootstrap Card Component?
- Using Bootstrap Card in the project
- 1. Simple Style Definition for Cards
- 2. Define width and height for Bootstrap Card Component
- 3. Definition of Header and Footer Bootstrap Card Component
- 4. Add Navigation
- 5. Add Links
- 6. Using Align and Transform text
- 7. Adjust Background, Foreground, and Border Colors
- Create Layouts with Bootstrap Card Component
- 1. Grouping/Nesting Cards
- 2. Card decks
- 3. Card Columns
- Conclude
Introduce
In this article, I will introduce you to a very popular component used in Bootstrap that is the Bootstrap Card Component. Each definition will have an example attached, surely after this article you can use it proficiently because it is very simple. Hope you can apply it to your project.
Bootstrap is the most popular HTML, CSS and Javascript framework available today.
It provides a lot of benefits for developers such as:
- Easily and quickly create a responsive layout with simple knowledge of HTML and CSS.
- Since mobile users visit websites a lot these days, mobile-first design is also a priority. Bootstrap is built on the Mobile-first philosophy.
- It is compatible with all browsers
- Using Flexbox for grid system
- It offers a lot of features and components.
The latest version of Bootstrap provides a lot of new features, such as Flexbox support, new card components, replacement panels, thumbnails…
What is Bootstrap Card Component?
Here is an example using Bootstrap Card:
Flexbox is a new layout style of CSS3 and Bootstrap Card Component builds on this mechanism.
You can have a lot of options in Bootstrap Card like define header & footer, define content content, background, insert link…
Using Bootstrap Card in the project
To use Bootstrap in your project simply include the CDN or download it from getbootstrap.com. I will demo some simple HTML code, using Bootstrap to illustrate the basic components of the Card.
1. Simple Style Definition for Cards
These are the most basic elements to create a Card as follows:
<div class="card">
<img class="card-img-top" src="http://animalsbirds.com/wp-content/uploads/2017/03/Beautiful-Maltese-Dog-Photos-HD-Wallpapers.jpg" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
</div>
!["Card](http://animalsbirds.com/wp-content/uploads/2017/03/Beautiful-Maltese-Dog-Photos-HD-Wallpapers.jpg")
Card title
Card subtitle
This is a simple Card example
When creating a simple Card we need:
- Create a <div> tag with a class of card as an outer tag
- Use the card-img-top class with the <img> tag to add an image to the top of the card.
- Add class card-body to define the body
- Use card-title and card-subtitle to add titles and subtitles
- Use card-text with <p> tag to add content
As you can see, the Card is displaying over the entire <div> that surrounds it.
If you want to take the image as a background and display the text on the image, you just need to change the class card-body to card-img-overlay.
Or if you want to display more images below the title, you just need to add an <img> tag with the class card-img-bottom.
2. Define width and height for Bootstrap Card Component
By default, the Card will take all the width available in the <div> tag surrounding them, the height will be adjusted so that the display fits the content of the Card. However, you can also manually set their width by adding style width or max-width and change the length by adding style height. Like the example below:
<div class="card" style="width:20rem; height: 10rem;">
<img class="card-img-top" src="http://animalsbirds.com/wp-content/uploads/2017/03/Beautiful-Maltese-Dog-Photos-HD-Wallpapers.jpg" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
</div>
Card title
Card subtitle
This is a simple Card example
Did you notice that I use the unit of width and height as rem instead of px? I write that because the rem unit is expandable according to the size of the screen, and px is not.
Instead of fixing the width and height like that, you can also use Bootstrap grid, I usually use this way:
<div class="row">
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="http://animalsbirds.com/wp-content/uploads/2017/03/Beautiful-Maltese-Dog-Photos-HD-Wallpapers.jpg" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
</div>
</div>
</div>
Card title
Card subtitle
This is a simple Card example
With the definition of 1 card will correspond to 3 columns as above, 1 row will have 4 cards.
You just need to add <div> tag with class card-header and card-footer
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="http://animalsbirds.com/wp-content/uploads/2017/03/Beautiful-Maltese-Dog-Photos-HD-Wallpapers.jpg" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div>
Card title
Card subtitle
This is a simple Card example
A new feature of the Bootstrap Card Component is the ability to add tab templates or navigation pills to the header. To do this we will add the <ul> tag with the nav-tabs and card-header-tabs classes to the card-header:
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
Similarly we can add navigation pills by replacing nav-tabs with nav-pills and card-header-tabs with card-header-pill.
5. Add Links
We can easily add links to our content by adding an <a> tag and a class card-link.
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
</div>
6. Using Align and Transform text
We can align the content displayed in the card by adding classes such as: text-left (align text to the left), text-right (align text to the right), text-center (align text to center), text-justify (line widths are equal) or text-nowrap (prevent line breaks).
We can also capitalize and lowercase text content by adding classes text-lowercase (lowercase), text-uppercase (uppercase) or text-capitalize to capitalize the first letter.
7. Adjust Background, Foreground, and Border Colors
The background or foreground color can be customized using the Bootstrap text and background color utilities (https://getbootstrap.com/docs/4.0/utilities/colors/). To use Bootstrap’s border utilities we need to set the border utilities color for the card.
<div class="card border-danger text-white bg-dark mt-5">
<div class="card-header">This is a Header</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a text </p>
</div>
</div>
</div>
Card title
This is a text
In this code, I changed the background color of the card to bg-dark, the text to text-white and the border to border-danger.
Create Layouts with Bootstrap Card Component
As you know, Card is used to create layouts for photo albums, blog posts, e-commerce products… There are many big companies like Facebook, Google, Printest using it.
Normally, if you want to create beautiful layouts, you need to have in-depth knowledge of HTML and CSS. However, thanks to Bootstrap’s new features, we can quickly build such layouts by placing Cards inside <div> tags containing special classes such as card-group, card-deck, and card-column.
1. Grouping/Nesting Cards
Group Cards is to display a group of Cards of the same size. To do that, it used the display:flex attribute, the cards will be placed in a <div> tag with the class card-group.
2. Card decks
Similar to the example above, you just need to change the class card-group to card-deck. With a card-group the cards will be attached to each other, and with a card-deck, there will be more space between the cards.
3. Card Columns
Just like Card group and Card deck, we just need to put the card inside the <div> tag with the class card-columns. It will help us to create a layout in the style of Masonry layout. The advantage of masonry layout is that it can present many images of different sizes without creating clutter for the viewer.
Conclude
In short, with the Bootstrap Card Component, you can create a modern website without having to go too deep into CSS. You also have a lot of options to choose from and customize to your liking. Bootstrap still makes the most powerful framework for everyone.