Hello Guys, In this article of Bootstrap 4 Tutorial. We will uncover Bootstrap 4 cards. If you don’t have read another post of Bootstrap then you can read another post if you want. Because we have made many posts on Bootstrap 4. Let’s talk about Bootstrap 4 cards.
if we can talk about Cards in bootstrap, Then Bootstrap provides cards from starting. If we can check previous versions of bootstrap then we will found everywhere cards. And also cards are very useful for all the new projects. This will give a better look to your container and also this one is lightweight. So let’s see the definition of cards.
Contents
- 1 What are Bootstrap 4 Cards
- 2 Content types of Bootstrap 4 Cards
- 2.1 1. Body
- 2.2 Example of Card Body
- 2.3 2. Titles, Text, and Links
- 2.4 Example of Card Titles, Texts, and Links
- 2.5 3. Images
- 2.6 Example of Card Image
- 2.7 4. List groups
- 2.8 Example of List Groups in Bootstrap Cards
- 2.9 5. Header and footer
- 2.10 Example of Card Header and Card Footer in Bootstrap 4
- 2.11 6. Bootstrap 4 Card Background Colors
- 2.12 Example of Card Background colors
- 3 Read Also:
- 4 ** Conclusion **
What are Bootstrap 4 Cards
The Bootstrap 4 card component is a container that is covered by borders and some kind of paddings and margins. This will give a better look at your small containers. this one is used to show data in an attractive look. Cards will incorporate options for Images, headers, and footers, and a wide area of containers. In bootstrap 4 we will see various background colors for cards. colorful background will make this very beautiful.
If you are familiar with bootstrap’s oldest versions then cards have replaced the panel, well, Thumbnail. In the old version, we also used cards with different named but here in the bootstrap 4 we have these contents with cards named.
Here in the cards, you can present whatever you want with amazing look. mainly everyone uses cards for showing Images, Text, Links, Text and also Buttons. If you want to show your Images, Texts, Buttons among then card will best for you. This will give a new and soft look for your data. and one of the best things about cards is you can use any kind of class in the cards. There are no limitations to cards.
Bootstrap 4 is a combination of many contents. So, Let’s see all the contents of cards in the very deep.
Content types of Bootstrap 4 Cards
The card supported wide verities of contents like Images, Texts, Buttons, Labels and many more. Let’s see the examples that card supports.
1. Body
The building block of cards is the body. I mean to say that if we assume mail and leaning Piller is the body of the card. This will design content with some specific paddings and margins. You can use define card body using.card-body
. Now, See the example of the card body. This is only body example. First, We will see all the components separated and after that, we will see a full example of the card. This will help you to know more deep bootstrap 4 cards.
Example of Card Body
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Card Body</title> </head> <body> <div class="container"> <h2>Body of Bootstrap 4 Card</h2> <div class="card"> <div class="card-body"> Here your texts in the card body. </div> </div> </div> </body> </html> |
2. Titles, Text, and Links
The card titles are managed by using a class. Like if you want to use Title in the card then you have to use.card-title
in the header tags. Like <h1>, <h2>,…<h6>. as per your needs.
There is also a class for subtitles also. Like here you have two headers one is the main and the second one is subheader then you can define subheader using.card-subtitle
class. This all works with <h1> to <h6>.
If you want to add any kind of links in Bootstrap cards then you have to use.card-link
class for that in the Anchor tag. If you are using .card-link class in any texts then that text will represents like a link. Let’s see an example of this.
Example of Card Titles, Texts, and Links
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Card Body</title> </head> <body> <div class="container"> <h2>Example of Card Titles, Texts, and Links in Bootstrap version 4</h2> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Here your normal texts.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> </body> </html> |
3. Images
Yes, In the cards you can also use images. You can use images in the cards using .card-img-top
and .card-img-bottom
. This will arrange your images as your needs. If you want your image at the top of card then you can use .card-img-top and if you want your image in the bottom then you have to use .card-img-bottom. Let’s see the example using images on the card.
Example of Card Image
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Card images</title> </head> <body> <div class="container"> <h2>Bootstrap 4 card Images Example</h2> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <p class="card-text">Here your texts what you want to write.</p> </div> </div> </div> </body> </html> |
4. List groups
Here you can also group your list on the card. Sometimes you have to need to list your group then you have to use a .list-group
class. From using this class you can list your group very easily. here many supportive classes also available for listing a group. Like .list-group-flush
, .list-group-item
and many more. Which will make your list group very attractive.
Example of List Groups in Bootstrap Cards
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Card List Group</title> </head> <body> <div class="container"> <h2>Bootstrap 4 card List Group</h2> <div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> </body> </html> |
The Header and footer also have specific classes for themselves. On the card, you have a header and footer which you have to highlight in the cards. Then here we have classes like .card-header
and .card-footer
. Which will present your header and footer in the card. I have also an example of a header and footer. So let us check this example for your deep knowledge.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Card Header and Footer</title> </head> <body> <div class="container"> <h2>Bootstrap 4 card Header and Footer</h2> <div class="card text-center"> <div class="card-header"> This is Header of Card </div> <div class="card-body"> <h5 class="card-title">Here yout Title</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> This is footer of Card </div> </div> </div> </body> </html> |
You can resize your Cards using width as per your needs.
6. Bootstrap 4 Card Background Colors
You know very well bootstrap provides more than eight colors for internal use. These all the colors are also work in the cards. I have an example of all the colors that I have to give you at the bottom.
Example of Card Background colors
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Card Background Colors</title> </head> <body> <div class="container"> <h2>Bootstrap 4 card With Separated Colors</h2> <div class="card border-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-primary"> <h5 class="card-title">Primary card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-secondary"> <h5 class="card-title">Secondary card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-success mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-success"> <h5 class="card-title">Success card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-danger"> <h5 class="card-title">Danger card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-warning"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-info"> <h5 class="card-title">Info card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-light mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> <div class="card border-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-dark"> <h5 class="card-title">Dark card title</h5> <p class="card-text">Your Texts here...</p> </div> </div> </div> </body> </html> |
Read Also:
1. Introduction of Bootstrap 4
2. What is the difference between Bootstrap 3 and Bootstrap 4?
3. Advantages of Using Bootstrap 4
4. Online or Offline? How should you use bootstrap 4 Online or Offline? Why?
5. Bootstrap 4 Grid System with Separated Examples
6. Bootstrap 4 Tables with structured and easy examples
7. Bootstrap 4 Buttons with structured and easy examples
8. Bootstrap 4 Cards with structured and easy examples
9. Bootstrap 4 Dropdowns with structured and easy examples
10. Bootstrap 4 Navs with structured and easy examples
11. Bootstrap 4 Navbar with structured and easy examples
12. Bootstrap 4 Carousel with easy examples
13. Bootstrap 4 Modal with easy examples
** Conclusion **
I hope once again this concept of bootstrap 4 cards is very cleared in your mind. After all If you fave any kind of questions then you can ask me any time without hesitation. I am here only for sharing knowledge with needy peoples. I will give you all the responses as soon as possible. Also, you can contact me on the “contact us” page.
I’m gone to say to my little brother, that
he should also pay a quick visit this website on regular basis to obtain updated from latest gossip.
Wow, this article is nice, my sister is analyzing such things,
so I am going to inform her.
Hello There. I found your blog using google. This is an extremely
wrll written article. I’ll make sure too bookmark it andd
return to read more of your useful information. Thanks for the post.
I’ll certainly return.
Hey are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding expertise to make your own blog? Any help would be greatly appreciated!
Yes, some where i have to customize theme, even i have almost, 70 to 80 changed theme. it,s easy for me because i am a web designer also wordpress designer so.
Hi my loved one! I want to say that this post is amazing,
nice written and come with approximately all important infos.
I would like to look extra posts like this .
Hello there. I found your web site via Google even as searching for a similar matter, your web site came up. It looks good. I have bookmarked it in my google bookmarks to come back then. Marguerite Romain Cuyler