- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Cards
Description
Card is a content container which displays a bordered box with some padding around it. It includes background colors, headers, footers and other display options.
Basic Card
To get a basic card, just add .card class to the <div> element and place the content inside a .card-body class as shown in the following example −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Basic Card</h2> <div class = "card"> <div class = "card-body"> <h5 class = "card-title">Tutorialspoint</h5> <p class = "card-text"> Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments. </p> <a href="#" class = "btn btn-info">More Info</a> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Header and Footer
You can add header for the card by using the .card-header class and footer by using the .card-footer class.
The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Card Header and Footer</h2> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <h5 class = "card-title">Tutorialspoint</h5> <p class = "card-text"> Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments. </p> <a href = "#" class = "btn btn-info">More Info</a> </div> <div class = "card-footer">Card Footer</div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
List Groups
You can create list of content to the cards by using the .list-group-flush class as shown in the below example −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>List Groups</h2> <div class = "card" style = "width: 18rem;"> <div class = "card-header">Card Header</div> <ul class = "list-group list-group-flush"> <li class = "list-group-item">HTML-5</li> <li class = "list-group-item">CSS-3</li> <li class = "list-group-item">Bootstrap-4</li> </ul> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Contextual Cards
Bootstrap uses contextual classes such as .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light to change the background color of the card.
The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h3>Contextual Cards</h3> <div class = "card bg-primary text-white"> <div class = "card-body">Primary card</div> </div> <br> <div class = "card bg-success text-white"> <div class = "card-body">Success card</div> </div> <br> <div class = "card bg-info text-white"> <div class = "card-body">Info card</div> </div> <br> <div class = "card bg-warning text-white"> <div class = "card-body">Warning card</div> </div> <br> <div class = "card bg-danger text-white"> <div class = "card-body">Danger card</div> </div> <br> <div class = "card bg-secondary text-white"> <div class = "card-body">Secondary card</div> </div> <br> <div class = "card bg-dark text-white"> <div class = "card-body">Dark card</div> </div> <br> <div class = "card bg-light text-dark"> <div class = "card-body">Light card</div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Card Images (Top and Bottom)
You can place the image at the top of the card by using .card-img-top class or at the bottom by using .card-img-bottom class to the <img> element as shown in the below example −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Image at Top</h2> <div class = "card" style = "width:350px;height:400px"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Image Top"> <div class = "card-body"> <h4 class = "card-title">HTML</h4> <p class = "card-text"> HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. </p> <a href = "#" class = "btn btn-primary">More Info</a> </div> </div> <br> <h2>Image at Bottom</h2> <div class = "card" style = "width:350px;height:400px"> <div class = "card-body"> <h4 class = "card-title">CSS</h4> <p class = "card-text"> Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. </p> <a href = "#" class = "btn btn-primary">More Info</a> </div> <img class = "card-img-bottom" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Image Bottom"> </div> <br> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Card Image Overlay
Add the background image to a card and place the text on the top of an image by using .card-img-overlay class.
The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Image Overlay</h2> <div class = "card" style = "width:350px;height:400px"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card image" style = "width:100%"> <div class = "card-img-overlay"> <p class = "card-text text-white"> HTML stands for Hypertext Markup Language. It is the most widely used language to write Web Pages </p> <a href = "#" class = "btn btn-primary">More Info</a> </div> <div class = "card-body"> <h4 class = "card-title">HTML</h4> <p class = "card-text"> HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. </p> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Card Groups
Card groups can be used to place multiple cards as single attached element. The .card-group class specifies equal width and height columns and removes left and right margins between each card.
Note − On the small screens (less than 576px), cards will get displayed vertically along with top and bottom margin.
The following example demonstrates displaying of card groups as single attached element −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Card-Groups</h2> <div class = "card-group"> <div class = "card"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Groups"> <div class = "card-body"> <h5 class = "card-title">HTML</h5> <p class = "card-text"> HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. </p> </div> <div class = "card-footer"> <small class = "text-muted">Card Footer</small> </div> </div> <div class = "card"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Groups"> <div class = "card-body"> <h5 class = "card-title">CSS</h5> <p class = "card-text"> Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. </p> </div> <div class = "card-footer"> <small class = "text-muted">Card Footer</small> </div> </div> <div class = "card"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Groups"> <div class = "card-body"> <h5 class = "card-title">Bootstrap</h5> <p class = "card-text"> Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. </p> </div> <div class = "card-footer"> <small class = "text-muted">Card Footer</small> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Card Decks
Card decks specify equal width and height columns which are not attached to each other. You can do this by using .card-deck class.
The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Card Decks</h2> <div class = "card-deck"> <div class = "card"> <img class="card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Groups"> <div class = "card-body"> <h5 class = "card-title">HTML</h5> <p class = "card-text"> HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. </p> </div> <div class = "card-footer"> <small class = "text-muted">Card Footer</small> </div> </div> <div class = "card"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Groups"> <div class = "card-body"> <h5 class = "card-title">CSS</h5> <p class = "card-text"> Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. </p> </div> <div class = "card-footer"> <small class = "text-muted">Card Footer</small> </div> </div> <div class = "card"> <img class = "card-img-top" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Card Groups"> <div class = "card-body"> <h5 class = "card-title">Bootstrap</h5> <p class = "card-text"> Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. </p> </div> <div class = "card-footer"> <small class = "text-muted">Card Footer</small> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Card Columns
Cards can be placed into grid layout structure by using .card-columns class as shown in the below example −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Card Columns</h2> <div class =" card-columns"> <!-- Card 1 --> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <p class = "card-text">This is Card - 1</p> </div> </div> <!-- Card 2 --> <div class = "card"> <div class = "card-body"> <p class = "card-text">This is Card - 2</p> </div> </div> <!-- Card 3 --> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <p class = "card-text"> This is Card - 3 with <a href = "#" class = "card-link">link</a> </p> </div> <div class = "card-footer">Card Footer</div> </div> <!-- Card 4 --> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <p class = "card-text">This is Card - 4</p> </div> <div class = "card-footer">Card Footer</div> </div> <!-- Card 5 --> <div class = "card"> <div class = "card-body"> <h4 class = "card-title">Card Title</h4> <p class = "card-text">This is Card - 5</p> </div> </div> <!-- Card 6 --> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <p class = "card-text"> This is Card - 6 with <a href = "#" class = "card-link">link</a> </p> </div> </div> <!-- Card 7 --> <div class = "card"> <div class = "card-header">Card Header</div> <div class = "card-body"> <p class = "card-text">This is Card - 7</p> </div> <div class = "card-footer">Card Footer</div> </div> <!-- Card 8 --> <div class = "card text-white" > <!-- Image --> <img class = "card-img" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt = "Photo of Cat"> <!-- Text Content --> <div class = "card-img-overlay"> <h4 class = "card-title">Card 8</h4> <p class = "card-text">This is an image for Card - 8</p> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Navigation
You can create nav tab or nav pill to the card by adding .card-header-tabs class or .card-header-pills class to <ul> element.
The following example demonstrates adding of both nav tab and nav pill to the card −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Navigation Tab</h2> <div class = "card text-center"> <div class = "card-header"> <ul class = "nav nav-tabs card-header-tabs"> <li class = "nav-item"> <a class = "nav-link active" href = "#">HTML</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">CSS</a> </li> <li class = "nav-item"> <a class = "nav-link " href = "#">Bootstrap</a> </li> </ul> </div> <div class = "card-body"> <h5 class = "card-title">Title</h5> <p class = "card-text">Content goes here...</p> </div> </div> <br> <h2>Navigation Pill</h2> <div class = "card text-center"> <div class = "card-header"> <ul class = "nav nav-pills card-header-pills"> <li class = "nav-item"> <a class = "nav-link active" href = "#">HTML</a> </li> <li class = "nav-item"> <a class = "nav-link" href = "#">CSS</a> </li> <li class = "nav-item"> <a class = "nav-link " href = "#">Bootstrap</a> </li> </ul> </div> <div class = "card-body"> <h5 class = "card-title">Title</h5> <p class = "card-text">Content goes here...</p> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −