Bootstrap media object has been discontinued from version 5. However, you can still create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc. using the flex and spacing utility classes.
Example
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
— The output of the above example will look something like this:
You can also create other variations of media object. Apply the image modifier classes like .rounded or .rounded-circle to the image to create rounded corner or circular image.
Example
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
— The output of the above example will look something like this:
Creating Nested Media Objects
Media objects can also be nested inside other media object. It can be very useful for creating comment threads in a blog post. Let’s check out an example:
Example
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
<!-- Nested media object -->
<div class="d-flex mt-4">
<div class="flex-shrink-0">
<img src="images/avatar.svg" class="rounded-circle" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Clark Kent <small class="text-muted"><i>Posted on January 12, 2021</i></small></h5>
<p>Thanks, you found this component useful. Don't forget to check out other Bootstrap components as well. They're also very useful.</p>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Alignment of Media Objects
You can also change the horizontal alignment of content and media by simply tweaking the HTML code itself, as demonstrated in the following example:
Example
<div class="d-flex">
<div class="flex-grow-1 me-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
<div class="flex-shrink-0">
<img src="images/avatar.svg" alt="Sample Image">
</div>
</div>
— The output of the above example will look something like this:
Besides that you can also align the images or other media at the middle or bottom of the content block using the flexbox utilities classes, for example, you can use the class .align-self-center for vertical center alignment, and the class .align-self-end for bottom alignment.
By default, the media inside a media object is top aligned. Here’s an example:
Example
<!--Top aligned media-->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Top aligned media <small class="text-muted"><i>This is Default</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
Bootstrap card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Card replaces panel, well, and thumbnail components in old Bootstrap 3 version.
In the following sections, you will see what you can do with the card component.
Creating a Basic Card
The card markup is pretty straight forward. The outer wrapper require the base class .card, whereas content can be placed inside the .card-body element. The following example will show you how to create a card with a picture, mixed with some text content and a button.
Example
<div class="card" style="width: 300px;">
<img src="images/sample.svg" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary">View Profile</a>
</div>
</div>
— The output of the above example will look something like this:
Note: Card doesn’t have fixed width, they’ll occupy the full width of its parent element. So, if you need a fixed width card you need to apply the width property on card yourself. Also, card have no margin by default, use spacing utility classes if needed.
Content Types for Card Component
The card component support a wide variety of content, including images, text, list groups, links, navs, and more. Here are the examples of what’s supported by the card.
Body Only Card
You can simply use .card with .card-body within, whenever you need to create a padded box.
Example
<div class="card">
<div class="card-body">This is some text within a padded box.</div>
</div>
— The output of the above example will look something like this:
Card with Titles, Text, and Links
Further, you can also place title and links inside the card along with text, like this:
Example
<div class="card" style="width: 300px;">
<div class="card-body">
<h5 class="card-title">Eiffel Tower</h5>
<h6 class="card-subtitle mb-3 text-muted">Champ de Mars, Paris, France</h6>
<p class="card-text">Built in 1889 Eiffel Tower is one of the most iconic landmarks in the world.</p>
<a href="#" class="card-link">View pictures</a>
<a href="#" class="card-link">Discover history</a>
</div>
</div>
— The output of the above example will look something like this:
Card with Header and Footer
You can also add header and footer within your cards using the .card-header and .card-footer class, respectively. Let’s take a look at the following example:
Example
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">NASA Launched Solar Probe</h5>
<p class="card-text">NASA launched Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
<div class="card-footer text-muted">3 years ago</div>
</div>
— The output of the above example will look something like this:
Tip: You can use text align utility classes such as .text-center and .text-end to align card’s content to the center and right end, respectively. By default they’re left aligned.
Placing List Groups within Card
You can also place list groups inside the card along with other content types, as shown here.
— The output of the above example will look something like this:
Mix and Match Multiple Content Types within Card
Feel free to mix and match multiple content types to create the card you need. The following example will create a fixed-width card with an image, text, list group, and hyperlinks.
Example
<div class="card" style="width: 300px;">
<img src="images/thumbnail.svg" class="w-100 border-bottom" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Here is some example text to make up the card's content. Replace it with your own text anytime.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
— The output of the above example will look something like this:
To add tabs navigation to a card simply place the tabs markup inside the card header, and the tabs content inside the card body. You are also required to use an additional class .card-header-tabs on the .nav element along with the class .nav-tabs for proper alignment.
Let’s try out the following example which creates an elegant tabbed navigation.
Example
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h5 class="card-title">Home tab content</h5>
<p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="profile">
<h5 class="card-title">Profile tab content</h5>
<p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="messages">
<h5 class="card-title">Messages tab content</h5>
<p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Similarly, you can add pills nav to the card by using an additional class .card-header-pills along with the class .nav-pills on the .nav element, as shown below:
Example
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h5 class="card-title">Home tab content</h5>
<p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="profile">
<h5 class="card-title">Profile tab content</h5>
<p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="messages">
<h5 class="card-title">Messages tab content</h5>
<p class="card-text">Here is some example text to make up the tab's content. Replace it with your own text anytime.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Customizing the Card Styles
There are several options available for customizing the card’s backgrounds, borders, and color.
Customizing Background and Color
You can simply use the background and color utility classes to change the appearance of a card. Let’s try out the following example to understand how it basically works:
Example
<div class="row">
<div class="col-6">
<div class="card text-white bg-primary mb-4">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card text-white bg-secondary mb-4">
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card text-white bg-success mb-4">
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card text-white bg-danger mb-4">
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card text-white bg-warning mb-4">
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card text-white bg-info mb-4">
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card text-white bg-dark">
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Customizing Border and Color
Similarly, you can customize the border and text color of any card using the text and border utility classes. Just apply these classes on the .card or its child elements, as shown below:
Example
<div class="row">
<div class="col-6">
<div class="card border-primary mb-4">
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-secondary mb-4">
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-success mb-4">
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-danger mb-4">
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-warning mb-4">
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-info mb-4">
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-dark mb-4">
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-light mb-4">
<div class="card-body text-muted">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Card Layout Options
In addition to styling of the cards, Bootstrap also includes a few options for laying out the series of cards. However, these layouts are not responsive yet.
Creating the Card Groups
You can use card groups to render cards as a single, attached element with equal width and height columns. However, cards inside a card group become horizontally stacked on extra small devices (i.e. viewport width <576px). Let’s try out an example and see how it actually works:
Example
<div class="card-group">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
— The output of the above example will look something like this:
Creating the Card Grids
You can use the Bootstrap grid system and its .row-cols-* classes to control how many grid columns (wrapped around your cards) to show per row. For example, you can use the class .row-cols-1 to show one card per row, similarly you can use the class .row-cols-md-2 to show two cards per row, from the medium breakpoint up (i.e. viewport width ≥768px).
Example
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="images/thumbnail.svg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Creating Horizontal Cards
You can also create horizontal cards where image and text content are placed side-by-side using a combination of grid and utility classes, as shown in the following example:
Example
<div class="card" style="max-width: 500px;">
<div class="row g-0">
<div class="col-sm-5">
<img src="images/sample.svg" class="card-img-top h-100" alt="...">
</div>
<div class="col-sm-7">
<div class="card-body">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary stretched-link">View Profile</a>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Card Image Overlays
You can even turn an image into a card background and place the card’s text on the top it using the class .card-img-overlay in place of .card-body. Depending on the image, you may need additional styles for better adjustments. Let’s check out an example:
<img src="images/sample.svg" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary stretched-link">View Profile</a>
</div>
</div>
— The output of the above example will look something like this:
Note: The card content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Text Alignment inside Card
You can easily change the text alignment of any card—entirely or specific parts—with the text alignment utility classes. For example, you can use the class .text-center and .text-end to align the card’s text content to the center and to the right end, respectively.
Example
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<!-- Card with default left text alignment -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
<div class="col">
<!-- Card with center text alignment -->
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
<div class="col">
<!-- Card with right text alignment -->
<div class="card text-end">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
</div>
— The output of the above example will look something like this:
Specifying Card Size
Cards have no specific width, they are 100% wide by default. However, you can change this as needed with custom CSS, grid classes, or sizing utility classes.
Let’s try out the following example to understand how it basically works:
Example
<!-- Card sizing using grid markup -->
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some dummy text to make up the card's content. You can replace it anytime.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
Card with Stretched Link
You can add the class .stretched-link to a link inside the card to make the whole card clickable (i.e. whole card act like a link). Multiple links are not recommended with stretched links.
Try out the following example to see how this actually works:
Example
<div class="card" style="width: 300px;">
<img src="images/sample.svg" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Alice Liddel</h5>
<p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
<a href="#" class="btn btn-primary stretched-link">View Profile</a>
</div>
Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience.
Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.
— The output of the above example will look something like this:
Creating Responsive Images and Videos
With Bootstrap you can make the images responsive too. Just add the class .img-fluid to the <img> tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it scales nicely to fit the containing element — in case if the width of the image is larger than the containing element itself. Check out the following example to see how it works:
Note: When making the responsive layouts consider making your images responsive too, otherwise if an image width is larger than the parent element’s width in any case, it will overflow and may break your web page layout.
You can also make the video or slideshow embedded in a web page responsive without affecting its original aspect ratio. To do this wrap any embed like an <iframe>, or <video> in a <div> element and apply the class .embed-responsive, and an aspect ratio class such as .embed-responsive-16by9.
You can optionally apply an explicit descendant class .embed-responsive-item on the embedded element to match the styling for other attributes. Here’s is an example:
Example
<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21x9">
In the above example, we’ve created the 4 responsive embedded videos with 4 different aspect ratios (21:9, 16:9, 4:3, and 1:1) by using the classes .ratio-21x9, .ratio-16x9, .ratio-4x3, and .ratio-1x1, respectively in addition to the base class .ratio on the wrapper element.
Tip: The aspect ratio of an image describes the proportional relationship between its width and its height. Two common videographic aspect ratios are 16:9 and 4:3.
Horizontal Alignment of Images
You can use the text alignment classes such as .text-center, and .text-end on the parent container to align the inline images horizontally center and right. You can also align images to the left and right within a larger box using the classes .float-start and .float-end.
However, to center align the block-level images you need to use the .mx-auto margin utility class. Let’s try out the following example to understand how it really works:
Example
<!-- Center alignment using text alignment classes -->
<div class="text-center">
In the previous chapter you’ve learnt how to create different types of individual buttons and modify them with predefined classes. Bootstrap however, also allows you to group a series of buttons together in a single line through the button group component.
To create a button group just wrap a series of buttons with .btn class in a <div> element and apply the class .btn-group on it. You can additionally apply the class .active on an individual button to indicate the active state. Let’s take a look at the following example:
— The output of the above example will look something like this:
See the tutorial on Bootstrap stateful buttons to learn how to enable radio buttons and checkboxes like toggling on button groups without using any JavaScript code.
Mixed Styles Button Groups
You can also mix and match different button styles to create button groups like this:
— The output of the above example will look something like this:
Creating Button Toolbar
You can also combine sets of button groups together for creating more complex components like button toolbar. To create button toolbar just wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it, as shown in the following example:
— The output of the above example will look something like this:
Height Sizing of Button Groups
Instead of applying button sizing classes to each button in a group, you can simply apply button group sizing classes like .btn-group-lg or .btn-group-sm directly to each .btn-group element to create larger or smaller button groups, as shown in the example below:
Example
<!-- Large button group -->
<div class="btn-group mb-2 btn-group-lg">
— The output of the above example will look something like this:
Nesting Button Groups
Button groups can also be nested. The following example demonstrates how to place a .btn-group within another .btn-group to create dropdown menus inside button groups.
You can also make the button groups appear vertically stacked rather than horizontally. To do this just replace the class .btn-group with the class .btn-group-vertical, like this:
— The output of the above example will look something like this:
Creating Justified Button Groups
You can also stretch your button groups to fill all the available width by applying the flex utility class .d-flex to the .btn-group element. Every button has equal width in this case.
Buttons are the integral part of a website and application. They are used for various purposes like, submit or reset an HTML form, performing interactive actions such as showing or hiding something on a web page on click of the button, redirecting user to another page, and so on. Bootstrap provides a quick and easy way to create and customize the buttons.
Bootstrap Button Styles
Different classes are available in Bootstrap for styling the buttons as well as to indicate the different states or semantic. Button styles can be applied to any element. However, it is applied normally to the <a>, <input>, and <button> elements for the best rendering.
The following example will show you how to create different styles of buttons in Bootstrap:
— The output of the above example will look something like this:
You can also create full-width or block buttons (buttons that covers the full width of the parent elements) through using the Bootstrap’s display and gap utility classes. These utilities offers much greater control over spacing, alignment, and responsive behaviors.
— The output of the above example will look something like this:
You can also create responsive variation of these buttons using the .d-{breakpoint}-block classes.
In the following example buttons will be vertically stacked on small and extra small devices (i.e. viewport width <768px). From medium (md) breakpoint up .d-md-block replaces the .d-grid class, thus nullifying the .gap-2 class. Let’s try it out and see how it really works:
Sometimes we need to disable a button for certain reasons, for example, a user in case is not eligible to perform this particular action, or we want to ensure that user should performed all other required actions before proceed to this particular action. Let’s see how to do that.
Creating Disabled Buttons Using Button and Input Element
Buttons created through <button> or <input> tag can be disabled by adding the disabled attribute to the respective element, as shown in the following example:
— The output of the above example will look something like this:
Note: The .disabled class only make links visually appear like disabled, however the link will remain clickable unless you remove the href attribute from it. Alternatively, you could implement custom JavaScript to prevent those clicks.
Bootstrap Active Buttons
Moreover, you can also apply the class .active to force the buttons look like active (i.e. pressed). Usually you don’t need to add this class to the buttons, as their active state is automatically styled by the Bootstrap using CSS :activepseudo-class. Here’s an example:
— The output of the above example will look something like this:
Creating Spinner Buttons
With Bootstrap you can easily include spinner icon in a button to indicate the loading state in your application. Check out the following example to see how it works:
— The output of the above example will look something like this:
In the next chapter you will learn how to combine multiple buttons horizontally or vertically in a line like toolbars using the Bootstrap button groups component. Also, in the advanced section you will learn how to create toggle buttons without using any JavaScript code.
Bootstrap input group component is a very flexible and powerful component for creating interactive and elegant form controls, however, it is limited to text input, select, and textarea only.
In the following sections you will see how to extend form controls by adding the text, icons and buttons before, after, or on both sides of it to make your form more attractive.
Creating Prepended and Appended Inputs
Input groups are created using the class .input-group. It act as a container for inputs and addons.
Further, wrap the text or icon in a <span> element as well as apply the class .input-group-text on it and place it before or after the input. Let’s take a look at the following example:
— The output of the above example will look something like this:
Since Bootstrap 5 you can also prepend or append select box dropdown and textarea form controls. Let’s try out the following example and see how it basically works:
— The output of the above example will look something like this:
Similarly, you can also place multiple addons side-by-side within an input group. You can also mix it with checkbox and radio inputs, as shown in the following example:
— The output of the above example will look something like this:
Buttons Addons for Form Controls
You can also prepend or append buttons to the form controls like text. Simply, place as many buttons as you like within the .input-group, as shown in the following example:
— The output of the above example will look something like this:
Adding Button Dropdowns
You can even add buttons with dropdowns to a form control if you want to perform more than one action from a button. Also, in case of input group you don’t need the .dropdown wrapper element, which is otherwise normally required. Let’s check out an example:
— The output of the above example will look something like this:
Adding Segmented Dropdown Button Groups
Similarly, you can define the segmented dropdown button group where dropdown button is placed besides the other buttons, as shown in the following example:
— The output of the above example will look something like this:
Height Sizing of Input Groups
You can also add the relative form sizing classes such as .input-group-lg or .input-group-sm to the .input-group element itself to make it larger or smaller in height.
The contents within the .input-group will automatically resize — there is no need for repeating the form control size classes on each element. Here’s an example:
Example
<!-- Larger input group -->
<div class="input-group input-group-lg">
Bootstrap enables you to customize the browser’s default form controls to create even more elegant form layouts. Now you can create completely customized and cross-browser compatible radio buttons and checkboxes, file inputs, select dropdowns, range inputs, and more.
In the following sections, you’ll see how to create those custom form elements one by one.
Creating Custom Checkboxes
To create custom checkboxes wrap each checkbox <input> and their corresponding <label> in a <div> element, and apply the classes as shown in the following example:
— The output of the above example will look something like this:
Disabling Custom Checkboxes and Radios
Custom checkboxes and radio buttons can also be disabled. Just add the boolean attribute disabled to the <input> element, as shown in the following example:
— The output of the above example will look something like this:
Creating Toggle Switches
The switch markup is similar to custom checkbox—the only difference is—it uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
Let’s try out the following example to understand how it basically works:
— The output of the above example will look something like this:
Creating Custom Select Menu
You can also customize the select dropdown menus by simply adding the class .form-select on the <select> element. However, this custom styling is limited only to the initial appearance of the <select> and cannot modify the <option>s due to browser limitations.
— The output of the above example will look something like this:
You can also add the disabled attribute on a custom select to give it a grayed out appearance and remove pointer events, as shown in the following example:
— The output of the above example will look something like this:
You can also create large and small variant of the custom selects to match the height of similarly sized Bootstrap’s text inputs using the classes .form-select-lg and .form-select-sm on the <select> element, respectively. Let’s take a look at the following example:
— The output of the above example will look something like this:
You can also add disabled attribute on the range inputs to give it a grayed out appearance and remove pointer events, as shown in the following example:
— The output of the above example will look something like this:
Setting the Min and Max Values
By default range inputs have implicit values for min and max—0 and 100, respectively. But, you may specify new values for those using the min and max attributes.
Also, range inputs “snap” to integer values by default. To change this, you can specify a step value. In the following example, we’ve doubled the number of steps by using the step="0.5".
HTML forms are an integral part of the web pages and applications, but creating the form layouts or styling the form controls manually one by one using CSS are often boring and tedious. Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.
Bootstrap provides three different types of form layouts:
Vertical Form (default form layout)
Horizontal Form
Inline Form
The following section will give you the detailed overview of all these form layouts as well as the various form related Bootstrap components one by one. Well let’s get started.
Creating Vertical Form Layout
To create vertical form layouts simply use the predefined margin utility classes for grouping the labels, form controls, optional form text, and form validation messages.
Here’s an example in which form controls are vertically stacked with labels on the top.
— The output of the above example will look something like this:
You will learn about custom checkboxes and other custom form controls in the next chapter.
Note: All textual form controls, such as <input> and <textarea> requires the class .form-control, while <select> requires the class .form-select for general styling. These classes also makes the forms controls 100% wide. To change their width or use them inline, you can utilize the Bootstrap’s predefined grid classes.
Tip: It is recommend to use margin-bottom utility classes (e.g., mb-2, mb-3, etc.) to add vertical spacing between the form groups. As, using single direction margin throughout in the form prevent margin collapsing and create more consist form.
Creating Horizontal Form Layout
You can also create horizontal form layouts where labels and form controls are aligned side-by-side using the Bootstrap grid classes. To create a horizontal form layout add the class .row on form groups and use the .col-*-* grid classes to specify the width of your labels and controls.
Also, be sure to apply the class .col-form-label on the <label> elements, so that they’re vertically centered with their associated form controls. Let’s check out an example:
— The output of the above example will look something like this:
Creating Inline Form Layout
Sometimes you may want to display a series of form controls, and buttons in a single horizontal row to compact the layout. You can do this easily by using the Bootstrap’s grid classes.
Let’s take a look at following example and see how it actually works:
Tip: It is recommended to include a label for every form inputs otherwise screen readers will have trouble with your forms. However, in case of inline form layouts you can hide the labels using the .visually-hidden class, so that only screen readers can read it.
Creating Responsive Form Layout
You can also make your forms responsive through using the grid classes with specific breakpoints.
The following example will create a form which laid out inline on medium devices and up (i.e., viewport width ≥768px), but will become vertically stacked on smaller viewports.
There might be a situation when you just want to display a plain text value next to a form label instead of a working form control. You can do this easily by replacing the class .form-control with the .form-control-plaintext and applying the attribute readonly.
The .form-control-plaintext class removes the default styling from the form field, but preserves the correct margin and padding. Let’s take a look at an example:
— The output of the above example will look something like this:
Column Sizing of Form Controls
You can also match the size of your inputs, textareas and select boxes to the Bootstrap grid column sizes. Simply, place your form controls (i.e. <input>, <textarea>, and <select>) in grid columns.
Let’s try out the following example to understand how it basically works:
— The output of the above example will look something like this:
Placing Checkboxes and Radio Buttons Inline
By default, any number of custom checkboxes and radio buttons that are immediate sibling will be vertically stacked and appropriately spaced with .form-check class.
But, you can also place these custom checkboxes and radio buttons inline (i.e., in the same line) by simply adding the class .form-check-inline to .form-check element, like this:
— The output of the above example will look something like this:
Adding Help Text to Form Controls
Placing help text for the form controls in an efficient way to guide users to enter the correct data in a form. You can place block level help text for a form control using the class .form-text. The block help text is typically displayed at the bottom of the control. Here’s an example:
Must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.
</div>
— The output of the above example will look something like this:
Similarly, you can also place inline help text using the <small> element. No need to use .form-text in this case. The following example shows how to implement this:
— The output of the above example will look something like this:
Creating Disabled Form Controls
To disable individual form controls such as <input>, <textarea>, <select> just add the attributes disabled to them and Bootstrap will do the rest. Here’s an example:
— The output of the above example will look something like this:
However, if you want to disable all controls within a <form> at once, place them inside a <fieldset> element and apply the attribute disabled on it, as shown in the following example:
— The output of the above example will look something like this:
Creating Readonly Inputs
You can also add the readonly boolean attribute on an input or textarea to prevent the modification of its value. Read-only inputs appear in lighter background (just like disabled inputs), but it retain the standard text cursor. Check out the following example to see how it works:
<input type="text" class="form-control mb-2" value="This input value cannot be changed." readonly>
<textarea rows="3" class="form-control" readonly>This textarea value cannot be changed.</textarea>
— The output of the above example will look something like this:
Height Sizing of Form Controls
You can easily change the height of your text inputs and select boxes to match the button sizes.
Use the form control height sizing classes such as .form-control-lg and .form-control-sm on the text inputs to create it’s larger or smaller sizes. Here’s an example:
— The output of the above example will look something like this:
Tip: Be sure to apply the class .col-form-label-lg or .col-form-label-sm on the <label> or <legend> elements to correctly resize the label according to the form controls.
Similarly, you can create larger and smaller variants of the select boxes using the .form-select-lg and .form-select-sm classes on the <select> element, like this:
— The output of the above example will look something like this:
Bootstrap Form Validation
Bootstrap provides an easy and quick way to validate web forms on client-side. It uses browser’s native form validation API to validate the form. Form validation styles are applied via CSS :invalid and :valid pseudo-classes. It applies to <input>, <select>, and <textarea> elements.
Let’s try out the following example and see how it actually works:
Note: For custom Bootstrap form validation messages, you’ll need to disables the browser default feedback tooltips by adding the novalidate boolean attribute to the <form> element. However, it still provides access to the form validation APIs in JavaScript.
Here’s the custom JavaScript code that displays error messages and disables form submission if there are invalid fields. See the JavaScript closures chapter to learn about self-executing function.
Example
<script>
// Self-executing function
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
— The output of the above example will look something like this:
Tip: To reset the appearance of the form programmatically, remove the .was-validated class from the <form> element after submission. This class is applied automatically on the form by the Bootstrap when you click the submit button.
If you require server-side validation, you can alternatively use the .is-invalid and .is-valid classes to indicate invalid and valid form fields. The .invalid-feedback and .valid-feedback are also supported with these classes. Let’s take a look at the following example:
— The output of the above example will look something like this:
You can alternatively swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display the validation feedback text in a tooltip style.
Also, be sure to apply the style position: relative or class .position-relative on the parent element for proper feedback tooltip positioning. Here’s an example:
— The output of the above example will look something like this:
Supported Form Controls in Bootstrap
Bootstrap includes support for all standard HTML form controls as well as new HTML5 input types such as datetime, number, email, url, search, range, color, url, and so on. The following example will show you the usages of standard form controls with Bootstrap.
The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner. In most basic form a list group is simply an unordered list with the class .list-group whereas, the list items having the class .list-group-item.
— The output of the above example will look something like this:
Tip: List groups are 100% wide by default. To set their width explicitly you can either use the Bootstrap’s width utility classes (e.g. w-25, w-50, etc.) or place them inside grid columns.
Indicate Disabled and Active Items
You can simply add the class .active to a .list-group-item to indicate the current active selection. Similarly, you can add .disabled to a .list-group-item to make it look like disabled.
— The output of the above example will look something like this:
Tip: In case of list group with linked items, the .disabled class only make the link look like disabled, but the link is still clickable. To actually disable links you need to remove the anchor’s href attribute either using the JavaScript or manually.
Edge-to-Edge List Groups
You can optionally add the class .list-group-flush to the list-group element to remove outer borders and rounded corners to create list groups that are edge-to-edge with their parent container.
Let’s check out the following example to understand how it actually works:
— The output of the above example will look something like this:
Creating Numbered List Groups
You can also create list groups where items are numbered through simply adding the modifier class .list-group-numbered on the .list-group element, like this:
Example
<ol class="list-group list-group-numbered w-50">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
</ol>
— The output of the above example will look something like this:
Note: Numbers are generated via CSS (as opposed to <ol> element’s default browser styling) for better placement inside list group items and to allow for better customization. See the CSS counter-reset and counter-increment properties to learn more about it.
List Group with Checkboxes and Radios
You can also place Bootstrap’s custom checkboxes and radio buttons within the list group items.
The following example will create a list group with custom checkboxes:
— The output of the above example will look something like this:
You’ll learn about custom checkboxes and radio buttons in the Bootstrap custom forms chapter.
List Group with Linked Items
You can also link list group items with the little change in HTML markup.
Just replace the <li> with <a> tag and use <div> element as a parent instead of <ul>. You can also add icons and badges to this list group to make it more elegant. Here’s an example:
— The output of the above example will look something like this:
Tip: You can use the Bootstrap list group component for creating the sidebar navigation menu, e.g. displaying the list of products or categories on your website.
List Group with Custom Content
You can also add nearly any HTML within the list groups with the help of flexbox utilities.
Here’s an example of a linked list group with headings and paragraph.
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>Asteroid detected near earth</h4>
<small>1 days ago</small>
</div>
<p>Researchers have detected an asteroid of the size of a football field near earth. This asteroid does not pose any threat to the planet, but it is difficult to be tracked.</p>
</a>
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h4>Scientists found massive black hole</h4>
<small>2 days ago</small>
</div>
<p>Scientists have found an ultra-bright, supermassive black hole at the center of a distant galaxy, whose mass is about a million times that of our Sun.</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>NASA launches solar probe</h4>
<small>3 days ago</small>
</div>
<p>NASA launched a Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.</p>
</a>
</div>
— The output of the above example will look something like this:
List Group with Contextual States
Like most of the other components you can also use contextual classes on the list group items to apply extra emphasis on them. Here’s an example:
Example
<ul class="list-group w-50">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
— The output of the above example will look something like this:
Similarly, you can use these contextual classes to the linked list group items. You can also use the class .active to specify the active list group item. Here’s an example:
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Please, check out the Bootstrap tabs chapter to learn how to create dynamic vertical tabs using the Bootstrap list group component without using any JavaScript code.
You can create three different types of HTML lists:
Unordered lists — A list of items in which the order does not explicitly matter. The list items in unordered lists are marked with bullets, e.g. ⚬, ●, etc.
Ordered lists — A list of items in which the order does explicitly matter. The list items in ordered lists are marked with numbers, e.g. 1, ⅵ, etc.
Definition list — A list of terms with their associated descriptions.
See the tutorial on HTML lists, to learn more about the different lists types.
Unstyled Ordered and Unordered Lists
Sometimes you might need to remove the default styling form the list items. You can do this by simply applying the class .list-unstyled to the respective <ul> or <ol> elements.
— The output of the above example will look something like this:
Note: The .list-unstyled class removes the default list-style and left padding only from the list items which are immediate children of the <ul> or <ol> element.
Placing Ordered and Unordered List Items Inline
If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class .list-inline to the <ul> or <ol>, and the class .list-inline-item to the child <li> elements.
— The output of the above example will look something like this:
Creating Horizontal Definition Lists
The terms and descriptions in a definition list can also be aligned horizontally side-by-side using the Bootstrap grid system’s predefined classes. Here’s an example:
Example
<dl class="row">
<dt class="col-sm-3">User Agent</dt>
<dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>
<dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
<dd class="col-sm-9">Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.</dd>
<dt class="col-sm-3">Document Tree</dt>
<dd class="col-sm-9">The tree of elements encoded in the source document.</dd>
</dl>
— The output of the above example will look something like this:
