Category: 3. Components

https://cdn3d.iconscout.com/3d/premium/thumb/components-3d-icon-png-download-10523284.png

navbar

This chapter will discuss about Bootstrap navbar. Bootstrap’s navbar is a powerful and responsive navigation header. A navigation bar is a navigation header located at the top of the page.

How it works

Basic navbar is built using .navbar class. For responsive collapsing wrap the class .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} (arranging the navbar vertically on small, medium, large, extra large or xxlarge screens).
Utilizing aria-current=”page” indicates the current item or aria-current=”true” indicates current item in a set.
Ensure availability by employing an <nav> element or, in case using a more generic element such as a <div> include a role=”navigation” to each navbar to expressly distinguish it as a point of interest locale for clients of assistive advances.
New in v5.2.0: Navbars can be themed with CSS variables themed using CSS variables restricted to the .navbar base class. .navbar-light has been deplored and the .navbar-dark has been rewritten to abrogate CSS factors rather than including extra styles.

Basic navbar

Supported content

Built-in classes come in handy while using navbars as listed below:

Use class .navbar-brand for a company, product, or project name.
Use .navbar-nav for full-height, lightweight navigation (includes support for dropdowns).
Use class .navbar-toggler with collapse plugin for navigational toggling behavior.
Use class .navbar-text for adding vertically centered strings of text..
Use .collapse.navbar-collapse to the group and collapse the navbar content by a parent breakpoint.
Use .navbar-scroll to set the maximum height and scroll the expanded content of the navbar.

https://www.tutorialspoint.com/bootstrap/examples/navbar_basic_navbar.php

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-primary"><div class="container-fluid"><a class="navbar-brand" href="#">Tutorialspoint</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;&lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;&lt;ul class="navbar-nav me-auto mb-2 mb-lg-0"&gt;&lt;li class="nav-item"&gt;&lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class="nav-item"&gt;&lt;a class="nav-link disabled"&gt;About us&lt;/a&gt;&lt;/li&gt;&lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;&lt;li class="nav-item dropdown"&gt;&lt;a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;
            Blog
          &lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;form class="d-flex" role="search"&gt;&lt;input class="form-control me-2" type="search" placeholder="Search Here" aria-label="Search"&gt;&lt;button class="btn btn-outline-warning" type="submit"&gt;Search&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Vertical navbar



To create a navigation bar that will always be vertical remove the .navbar-expand-* class.https://www.tutorialspoint.com/bootstrap/examples/navbar_vertical_navbar.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-light"><div class="container-fluid"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#"> Item 1</a></li><li class="nav-item"><a class="nav-link" href="#">Item 2</a></li><li class="nav-item"><a class="nav-link" href="#">Item 3</a></li></ul></div></nav><div class="container-fluid mt-3"><h3>Vertical Navbar</h3></div></body></html>



Centered navbar



Add the .justify-content-center class to show the center navigation barhttps://www.tutorialspoint.com/bootstrap/examples/navbar_centred_navbar.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-sm bg-light justify-content-center"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Item 1</a></li><li class="nav-item"><a class="nav-link" href="#">Item 2</a></li><li class="nav-item"><a class="nav-link" href="#">Item 3</a></li></ul></nav><div class="container-fluid mt-3"><h3>Centered Navbar</h3></div></body></html>



Brand



Add the class .navbar-brand is used for to get a brand of the project name.



Text



To add the text inside an element by adding the class .navbar-brand.https://www.tutorialspoint.com/bootstrap/examples/navbar_brand_text.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-primary mt-2"><div class="container-fluid"><a class="navbar-brand" href="#">Tutorialspoint</a></div></nav><nav class="navbar bg-light mt-2"><div class="container-fluid"><span class="navbar-brand mb-0 h1">Tutorialspoint</span></div></nav></body></html>



Images



Replace the text within the .navbar-brand with a <img> tag.https://www.tutorialspoint.com/bootstrap/examples/navbar_brand_images.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><div class="container"><a class="navbar-brand" href="#"><img src="\bootstrap\images\tutimg.png" alt="Bootstrap" width="100" height="65"></a></div></nav></body></html>



Image and text



You can also add some extra utilities to add an image and text at the same time using classes .d-inline-block and .align-text-top on the <img> elements.https://www.tutorialspoint.com/bootstrap/examples/navbar_text_image.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#"><img src="\bootstrap\images\tutimg.png" alt="Logo" width="100" height="75" class="d-inock alline-blign-text-mid">
        Tutorialspoint
      &lt;/a&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Nav




Navbar navigation links are built on the .nav options with their own modifier class and uses the toggler class for responsive styling.



The navbar navigation will also expand to occupy as much horizontal space as possible to safely align the navbar content.



Add the class .active to the .nav-link to show the current page.




Note that the aria-current attribute should also be added to active .nav links.https://www.tutorialspoint.com/bootstrap/examples/navbar_nav.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Register here</a></li><li class="nav-item"><a class="nav-link" href="#">Contanct us</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div></div></nav></body></html>



Navbar without list



As navbar uses classes for navigation, list-based approach can be avoided entirely as demonstrated in the following exmaple.https://www.tutorialspoint.com/bootstrap/examples/navbar_nav_without_%20list-based.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-primary"><div class="container-fluid"><a class="navbar-brand" href="#">Tutorialspoint</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-link active" aria-current="page" href="#">Home</a><a class="nav-link" href="#">About us</a><a class="nav-link" href="#">Services</a><a class="nav-link disabled">Contanct us</a></div></div></div></nav></body></html>



Navbar with dropdown



To use the dropdowns in navbar add the classes .nav-item and .nav-link as shown in the following example.https://www.tutorialspoint.com/bootstrap/examples/navbar_nav_with_dropdown.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-primary"><div class="container-fluid"><a class="navbar-brand" href="#">Tutorialspoint</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavDropdown"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link" href="#">About Us</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Blog
          &lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Forms



Place various form controls in the navbar by adding the class .form-control.https://www.tutorialspoint.com/bootstrap/examples/navbar_form.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-primary"><div class="container-fluid"><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search Here.." aria-label="Search"><button class="btn btn-outline-warning" type="submit">Search</button></form></div></nav></body></html>



Children of .navbar now use flex layout and justify-content: space-between by default. Use additional Flex utilities as needed to customize this behavior.https://www.tutorialspoint.com/bootstrap/examples/navbar_form_flex.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand">Navbar</a><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search Here..." aria-label="Search"><button class="btn btn-outline-info" type="submit">Search</button></form></div></nav></body></html>



When your navbar is a complete form or almost form then use the <form> element as the container.https://www.tutorialspoint.com/bootstrap/examples/navbar_form_as_container.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><form class="container-fluid"><div class="input-group"><span class="input-group-text" id="basic-addon1">#</span><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div></form></nav></body></html>



The navbar forms support various buttons. You can use vertical alignment utilities to align different sized elements.https://www.tutorialspoint.com/bootstrap/examples/navbar_form_verticalalignment_button.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><form class="container-fluid justify-content-start"><button class="btn btn-outline-primary me-2" type="button">Large Button</button><button class="btn btn-sm btn-outline-secondary" type="button">Small Button</button></form></nav></body></html>



Text



Add the class .navbar-text to adjust vertical alignment and horizontal spacing for strings of text.https://www.tutorialspoint.com/bootstrap/examples/navbar_text.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><div class="container-fluid"><span class="navbar-text">
     Welcome to the Tutorialspoint!
    &lt;/span&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Customise with other components and utilities as required as demonstrated below.https://www.tutorialspoint.com/bootstrap/examples/navbar_text_with_utilities.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar w/ text</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Register here</a></li><li class="nav-item"><a class="nav-link" href="#">Contanct us</a></li></ul><span class="navbar-text">
        Welcome to Tutorialspoint!
      &lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Color schemes




New Dark Navbar in v5.3.0 Deprecated .navbar-dark in favor of new data-bs-theme="dark". Include data-bs-theme="dark" to your .navbar to enable component-specific color mode.





New in v5.2.0 - Navbar themes are presently powered with CSS variables and .navbar-light is deprecated. A CSS variable is applied to the .navbar to give it a 'light' look by default and can be overridden in .navbar-dark.





By default navbar is a "light navbar" for use with light background colors.



Use data-bs-theme="dark" to the parent .navbar class for dark background colors.



Net, customize with .bg-* utilities.





https://www.tutorialspoint.com/bootstrap/examples/navbar_color_schemes.php




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-dark" data-bs-theme="dark"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Register here</a></li><li class="nav-item"><a class="nav-link" href="#">Contanct us</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div></div></nav><nav class="navbar bg-primary" data-bs-theme="dark"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Register here</a></li><li class="nav-item"><a class="nav-link" href="#">Contanct us</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div></div></nav><nav class="navbar" style="background-color: #e3f2fd;"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Register here</a></li><li class="nav-item"><a class="nav-link" href="#">Contanct us</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div></div></nav></body></html>



Containers




Optionally you wrap the navigation bar in a .container and center it on the page. Note, however, that the inner container is still required.



Add a container inside the .navbar to center your fixed or static top navbar content.





https://www.tutorialspoint.com/bootstrap/examples/navbar_containers.php




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><nav class="navbar navbar-expand-lg bg-primary"><div class="container-fluid"><a class="navbar-brand" href="###">Tutorialspoint</a></div></nav></div></body></html>



To modify how wide the content in your navbar is presented use any responsive containers.https://www.tutorialspoint.com/bootstrap/examples/navabar_containers_responsive_classes.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-md"><a class="navbar-brand" href="#">Tutorialspoint</a></div></nav></body></html>



Placement




Position the navigation bar in a non-static position using the position helper. Choose from pin to top, pin to bottom, fixed to top (scroll page to top and stay there), or stickied to bottom (Scroll until the page reaches the bottom and stop there).



Fixed navbars utilize Position: Fixed. This means that it is pulled from the normal flow of the DOM and may need custom CSS (such as padding-top on the ) to avoid overlapping with other elements.





https://www.tutorialspoint.com/bootstrap/examples/navbar_placement_default.php




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Default Navbar</a></div></nav></body></html>



Fixed top



This is acheived using class .fixed-top.https://www.tutorialspoint.com/bootstrap/examples/navbar_placement_fixedtop.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar fixed-top bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar Fixed at Top</a></div></nav></body></html>



Fixed bottom



This is acheived using class .fixed-bottom.https://www.tutorialspoint.com/bootstrap/examples/navbar_placement_fixedbottom.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid"></div><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><nav class="navbar fixed-bottom bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar Fixed at Bottom</a></div></nav></div></body></html>



Sticky top



This is acheived using class .sticky-top.https://www.tutorialspoint.com/bootstrap/examples/navbar_placement_sticktop.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar sticky-top bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar Stick at Top</a></div></nav></body></html>



Sticky bottom



This is acheived using class .sticky-bottom.https://www.tutorialspoint.com/bootstrap/examples/navbar_placement_stickbottom.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container-fluid"><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><p>Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.</p><nav class="navbar sticky-bottom bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Sticky bottom</a></div></nav></div></body></html>



Scrolling




To allow vertical scrolling within the toggleable contents of a collapsed navbar add the classes. navbar-nav-scroll to a .navbar-nav.



By default, scrolling kicks has 75vh (75% of the viewport height). By using css property --bs-navbar-height you can override the height.



navbar utilizing .navbar-nav-scroll with style="--bs-scroll-height: 100px;", with a few additional margin utilities for optimal spacing.





https://www.tutorialspoint.com/bootstrap/examples/navbar_scrolling.php




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-primary"><div class="container-fluid"><a class="navbar-brand" href="#">Tutorialspoint</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarScroll"><ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Blog
          &lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Blog 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class="nav-item"&gt;&lt;a class="nav-link disabled"&gt;About us&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;form class="d-flex" role="search"&gt;&lt;input class="form-control me-2" type="search" placeholder="Search here..." aria-label="Search"&gt;&lt;button class="btn btn-outline-warning" type="submit"&gt;Search&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Responsive behaviors




The navbars use the classes .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} to find their content collapses behind the button.



Add the class.navbar-expandon the navbar for the navbars that are never collapsing. Dont add the class .navbar-expand for navbars that always collapse.




Toggler



By default, navbar togglers are left-aligned, but if they follow a sibling element like a .navbar-brand it will automatically be aligned to the right.https://www.tutorialspoint.com/bootstrap/examples/navbar_toggler.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-light"><div class="container-fluid"><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarTogglerDemo01"><a class="navbar-expand" href="#">Tutorialspoint</a><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"><button class="btn btn-outline-warning" type="submit">Search</button></form></div></div></nav></body></html>



Brand name on the left and toggler on the right



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarTogglerDemo02"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Register here</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div></nav></body></html>



Brand name on the right and toggler on the left.




https://www.tutorialspoint.com/bootstrap/examples/navbar_brandonright_toggleronleft.php




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarTogglerDemo03"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About us</a></li><li class="nav-item"><a class="nav-link disabled">Contanct us</a></li></ul><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div></nav></body></html>



External content



You need to utilize the collapse plugin to trigger container elements for content that are structurally outside the .navbar. It's easy because our plugin works on target matching of id and data-bs-target.https://www.tutorialspoint.com/bootstrap/examples/navbar_external_content.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="collapse" id="navbarToggleExternalContent"><div class="bg-primary p-4"><h5 class="text-white h4">Collapsed content</h5><span class="text-body-light">Toggleable via the navbar brand</span></div></div><nav class="navbar navbar-dark bg-primary"><div class="container-fluid"><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></div></nav></body></html>



Offcanvas




Convert expanding and collapsing navbar into an offcanvas drawer with no offcanvas component. To extend both the offcanvas default styles add the classes .navbar-expand-* that creates a dynamic and flexible navigation sidebar.



Create an offcanvas navbar that collapses across all breakpoints and skip the .navbar-expand-* class entirely.





https://www.tutorialspoint.com/bootstrap/examples/navbar_offcanvas.php




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar bg-body-tertiary fixed-top"><div class="container-fluid"><a class="navbar-brand" href="#">Offcanvas navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><ul class="navbar-nav justify-content-end flex-grow-1 pe-3"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About us</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            &lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;form class="d-flex mt-3" role="search"&gt;&lt;input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"&gt;&lt;button class="btn btn-outline-success" type="submit"&gt;Search&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


To construct an offcanvas navbar that expands into a normal navbar at the exact breakpoint use .navbar-expand-lg.https://www.tutorialspoint.com/bootstrap/examples/navbar_offcanvas_expand_at_breakpoint.php



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"><a class="navbar-brand" href="#">Offcanvas navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><ul class="navbar-nav justify-content-end flex-grow-1 pe-3"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About us</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          &lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;form class="d-flex mt-3" role="search"&gt;&lt;input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"&gt;&lt;button class="btn btn-outline-success" type="submit"&gt;Search&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


To avoid text becoming unreadable in a dark navbar, use dark background on the offcanvas content. In the following example




Added classes .navbar-dark and .bg-dark to .navbar.



Added class .text-bg-dark to .offcanvas.



Added class .dropdown-menu-dark to .dropdown-menu



And added class .btn-close-white to .btn-close.




You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navbar</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-dark bg-dark fixed-top"><div class="container-fluid"><a class="navbar-brand" href="#">Offcanvas dark navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><ul class="navbar-nav justify-content-end flex-grow-1 pe-3"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About us</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            &lt;/a&gt;&lt;ul class="dropdown-menu dropdown-menu-dark"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Other's&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;form class="d-flex mt-3" role="search"&gt;&lt;input class="form-control me-2" type="search" placeholder="Search here" aria-label="Search"&gt;&lt;button class="btn btn-success" type="submit"&gt;Search&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>

September 23, 2025

Size	Class	Max-width
Small	.modal-sm	300px
Default	None	500px
Large	.modal-lg	800px
Extra large	.modal-xl	1140px

Class	Availability
.modal-fullscreen	Always
.modal-fullscreen-sm-down	576px
.modal-fullscreen-md-down	768px
.modal-fullscreen-lg-down	992px
.modal-fullscreen-xl-down	1200px
.modal-fullscreen-xxl-down	1400px

List Groups

The list groups is an effective component for displaying a sequence of content. Change and extend them to support the regarding any content within.

Basic items

The list group is an unordered list with list items and suitable classes. Create the list group with your own CSS as per requirement.https://www.tutorialspoint.com/bootstrap/examples/list_group_basic_example.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li><li class="list-group-item">item 4</li><li class="list-group-item">item 5</li></ul></body></html>

Active items

To show the currently active selection add the classes .active to a .list-group-item.https://www.tutorialspoint.com/bootstrap/examples/list_group_active_items.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item">item 1</li><li class="list-group-item active" aria-current="true">An active item 2</li><li class="list-group-item">item 3</li><li class="list-group-item">item 4</li><li class="list-group-item">item 5</li></ul></body></html>

Disabled items

To create the list group disabled add the class .disabled to .list-group-item. Some items with .disabled will need custom JavaScript to make it fully disable their click events.https://www.tutorialspoint.com/bootstrap/examples/list_group_disabled_items.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item ">item 1</li><li class="list-group-item ">item 2</li><li class="list-group-item disabled" aria-disabled="true">A disabled item 3</li><li class="list-group-item">item 4</li><li class="list-group-item">item 5</li></ul></body></html>

Links and buttons

By adding .list-group-item-action, you can use <a> or <button> to create an actionable list of group items with hover, disabled, and active states.

Remember not to use the standard .btn classes here.

https://www.tutorialspoint.com/bootstrap/examples/list_group_links_items.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="list-group"><a href="#" class="list-group-item list-group-item-action ">item 1</a><a href="#" class="list-group-item list-group-item-action">item 2</a><a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item 3</a><a href="#" class="list-group-item list-group-item-action">item 4</a><a class="list-group-item list-group-item-action disabled">item 5</a></div></body></html>

You can use the disabled attribute with <button> rather than the .disabled class. The element <a> doesnt support the disabled attribute.https://www.tutorialspoint.com/bootstrap/examples/list_group_buttons_items.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="list-group"><button type="button" class="list-group-item list-group-item-action ">item 1</button><button type="button" class="list-group-item list-group-item-action">item 2</button><button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item 3</button><button type="button" class="list-group-item list-group-item-action">item 4</button><button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item 4</button></div></body></html>

Flush

To display list group elements edge-to-edge in a parent container (such as cards), remove borders and round corners by adding .list-group-flush.https://www.tutorialspoint.com/bootstrap/examples/list_group_flush.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group list-group-flush"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li><li class="list-group-item">item 4</li><li class="list-group-item">item 5</li></ul></button></body></html>

Numbered

To opt into numbered list group items, add the .list-group-numbered modifier class (and avoid the use of <ol> element).
The counter-reset on the <ol> is used to generate numbers, which are then stylized and placed on the <li> with counter-increment and content using the a::before pseudo-element.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ol class="list-group list-group-numbered"><li class="list-group-item">Item One</li><li class="list-group-item">Item Two</li><li class="list-group-item">Item Three</li></ol></button></body></html>

These work excellently with customizedcontent as demonstrated below:https://www.tutorialspoint.com/bootstrap/examples/list_group_numbered_custom_content.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ol class="list-group list-group-numbered"><li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-bold">Subheading 1</div>
        Content of list item
      &lt;/div&gt;&lt;span class="badge bg-primary rounded-pill"&gt;14&lt;/span&gt;&lt;/li&gt;&lt;li class="list-group-item d-flex justify-content-between align-items-start"&gt;&lt;div class="ms-2 me-auto"&gt;&lt;div class="fw-bold"&gt;Subheading 2&lt;/div&gt;
         Content of list item
      &lt;/div&gt;&lt;span class="badge bg-primary rounded-pill"&gt;12&lt;/span&gt;&lt;/li&gt;&lt;li class="list-group-item d-flex justify-content-between align-items-start"&gt;&lt;div class="ms-2 me-auto"&gt;&lt;div class="fw-bold"&gt;Subheading 3&lt;/div&gt;
          Content of list item
      &lt;/div&gt;&lt;span class="badge bg-primary rounded-pill"&gt;8&lt;/span&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Horizontal




By adding the class .list-group-horizontal you can modify the layout of list group items from vertical to horizontal across all breakpoints.



To create a list group horizontal starting at that breakpoints min-width select a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl}.



You cannot combine horizontal list groups with flush list groups.





Note: If you want to list group items of equal width when horizontal then add the class .flex-fill to each list group item.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group list-group-horizontal"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li></ul><ul class="list-group list-group-horizontal-sm"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li></ul><ul class="list-group list-group-horizontal-md"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li></ul><ul class="list-group list-group-horizontal-lg"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li></ul><ul class="list-group list-group-horizontal-xl"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li></ul><ul class="list-group list-group-horizontal-xxl"><li class="list-group-item">item 1</li><li class="list-group-item">item 2</li><li class="list-group-item">item 3</li></ul></button></body></html>



Variants



The contextual classes list-group-item-primary, list-group-item-secondary ....etc. can be used to style list elements with a stateful background and colour.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item">Default list group item</li><li class="list-group-item list-group-item-primary">Primary list group item</li><li class="list-group-item list-group-item-secondary">secondary list group item</li><li class="list-group-item list-group-item-success">Success list group item</li><li class="list-group-item list-group-item-danger">Danger list group item</li><li class="list-group-item list-group-item-warning">Warning list group item</li><li class="list-group-item list-group-item-info">Info list group item</li><li class="list-group-item list-group-item-light">Light list group item</li><li class="list-group-item list-group-item-dark">Dark list group item</li></ul></body></html>



For links and buttons




You can use contextual classes with .list-group-item-action for <a> and <button> elements.



Apply .active state to indicate an active selection on a contextual list group item.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="list-group"><a href="#" class="list-group-item list-group-item-action">item 1</a><a href="#" class="list-group-item list-group-item-action list-group-item-primary">item 2</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary">item 3</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">item 4</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">item 5</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning">item 6</a><a href="#" class="list-group-item list-group-item-action list-group-item-info">item 7</a><a href="#" class="list-group-item list-group-item-action list-group-item-light">item 8</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark">item 9</a></div></body></html>



With badges



By using thecertain utilities, add badges to any list group item to display unread counts, activity, and more.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">
    item 1
    &lt;span class="badge bg-primary rounded-pill"&gt;14&lt;/span&gt;&lt;/li&gt;&lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
     item 2
    &lt;span class="badge bg-primary rounded-pill"&gt;2&lt;/span&gt;&lt;/li&gt;&lt;li class="list-group-item d-flex justify-content-between align-items-center"&gt;
     item 3
    &lt;span class="badge bg-primary rounded-pill"&gt;1&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Custom content



Using Flex utilities, you can add almost any HTML within, even for linked list groups as demonstrated below



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1"> Heading 1</h5><small>3 days ago</small></div><p class="mb-1">Some content in paragraph</p><small>muted small print</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">Heading 2</h5><small class="text-body-secondary">2 days ago</small></div><p class="mb-1">Some content in paragraph</p><small class="text-body-secondary">muted small print</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">Heading 3</h5><small class="text-body-secondary">1 days ago</small></div><p class="mb-1">Some content in paragraph</p><small class="text-body-secondary">muted small print</small></a></div></body></html>



Checkboxes and radios



Add Bootstraps checkboxes and radios inside the list of group items and customize as required. You can use them without <label>, and don't forget to include an aria-label attribute and value for accessibility.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"><label class="form-check-label" for="firstCheckbox">Male</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"><label class="form-check-label" for="secondCheckbox">Female</label></li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox"><label class="form-check-label" for="thirdCheckbox">Other's</label></li></ul></body></html>



The following example demonstrates radio buttons



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group"><li class="list-group-item"><input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked><label class="form-check-label" for="firstRadio">Male</label></li><li class="list-group-item"><input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio"><label class="form-check-label" for="secondRadio">Female</label></li><li class="list-group-item"><input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio"><label class="form-check-label" for="thirdRadio">Other's</label></li></ul></body></html>



To make the whole list group item clickable, use the .stretched-link style on the labels.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - List Group</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="list-group mt-2"><li class="list-group-item"><input class="form-check-input me" type="checkbox" value="" id="checkboxStretched1"><label class="form-check-label stretched-link" for="checkboxStretched1">Item One</label></li><li class="list-group-item"><input class="form-check-input me" type="checkbox" value="" id="checkboxStretched2"><label class="form-check-label stretched-link" for="checkboxStretched2">Item Two</label></li><li class="list-group-item"><input class="form-check-input me" type="checkbox" value="" id="checkboxStretched3"><label class="form-check-label stretched-link" for="checkboxStretched3">Item Three</label></li></ul></body></html>

September 23, 2025

Dropdowns

This chapter will discuss about Bootstrap dropdown menus. Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format. This can be made interactive by using dropdown JavaScript plugin.

Few points worth noting before checking examples and features of dropdowns.

Dropdowns are constructed using Popper, a third-party library. Popper offers dynamic placement and viewport detection.
Include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js or bootstrap.bundle.js, which contains Popper.
As dynamic positioning is not necessary, Popper is not used to placing dropdowns in navbars.

Basic dropdown

The dropdowns toggle (button or link) and the dropdown menu needs to be wrapped within .dropdown, or another element that declares position: relative;. We can use a <button> element as the dropdown trigger, but the plugin will work with <a> elements as well. The following examples use <ul> elements where appropriate, but custom markup is supported.

Dropdown Button

The .btn class can be converted into a dropdown menu/toggle with some markup changes. Following example demonstrates how you can use it with <button> element.https://www.tutorialspoint.com/bootstrap/examples/dropdown_button.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dropdown link



Although <button> is the preferred control for a dropdown toggle, there may be times when you must use <a>. If you do, we advise including a role="button" attribute to clearly explain the function of the control to assistive technology like screen readers.https://www.tutorialspoint.com/bootstrap/examples/dropdown_link.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropdown"><a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Link
    &lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Variant



Use contextual classes to style the dropdown menu with color.https://www.tutorialspoint.com/bootstrap/examples/dropdown_variant.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Primary Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
    Secondary Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
    Danger Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
    Info Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
    Success Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
    Light Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
    Warning Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Split button



Similar to single button dropdowns, split button dropdowns are made by using the same syntax, but with the addition of .dropdown-toggle-split for adequate space around the dropdown caret.



Use this additional class to reduce the horizontal padding on either side of the caret by 25% and remove the left margin added to regular button dropdowns. These additional changes center the caret on the split button and provide an appropriately sized hit area next to the main button.https://www.tutorialspoint.com/bootstrap/examples/dropdown_split_button.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-primary">Split Dropdown</button><button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Create Account</a></li><li><a class="dropdown-item" href="#">Sign in</a></li><li><a class="dropdown-item" href="#">Sign out</a></li></ul></div></body></html>



Sizing



The dropdown menus operate with buttons of all sizes, including the default and split dropdown buttons.



Large dropdown button



To get large size buttons of dropdown menus, add class .btn-lg alongwith class .btnhttps://www.tutorialspoint.com/bootstrap/examples/dropdown_large_button.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown - Large Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-secondary btn-lg" type="button"&gt;
       Dropdown - Large split button
  &lt;/button&gt;&lt;button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"&gt;&lt;span class="visually-hidden"&gt;Toggle Dropdown&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Small dropdown button



To get small size buttons of dropdown menus, add class .btn-sm alognwith the class .btnhttps://www.tutorialspoint.com/bootstrap/examples/dropdown_small_button.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown - Small Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-secondary btn-sm" type="button"&gt;
    Dropdown - Small split button
&lt;/button&gt;&lt;button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"&gt;&lt;span class="visually-hidden"&gt;Toggle Dropdown&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dark dropdown




Deprecated in v5.3.0




Add the classes .dropdown-menu-dark to an existing .dropdown-menu to choose a dark dropdown to match your dark navbar or custom style. No need to change the dropdown items.



The dark variant of components has been deprecated in v5.3.0 with the introduction of color mode. Instead of adding .dropdown-menu-dark set data-bs-theme="dark" on the root element, parent wrapper, or the component itself.https://www.tutorialspoint.com/bootstrap/examples/dropdown_dark.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Dark
&lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-dark"&gt;&lt;li&gt;&lt;a class="dropdown-item active" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


And place it for use in a navbar:




https://www.tutorialspoint.com/bootstrap/examples/dropdown_dark_navbar.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNavDarkDropdown"><ul class="navbar-nav"><li class="nav-item dropdown"><button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown Dark Navbar
            &lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-dark"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Directions




The directions are reversed in RTL mode. You will see .dropstart on the right.




Centered dropdowns



Use the class .dropdown-center on the parent to center the dropdown menu under the toggle.https://www.tutorialspoint.com/bootstrap/examples/dropdown_centered.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Dropdowns</title></head><body><div class="dropdown-center"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Centered Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dropup



By adding the class .dropup to the parent class, you get the trigger dropdown menus above the elements.https://www.tutorialspoint.com/bootstrap/examples/dropdown_dropup.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group dropup" style="padding-top: 200px;"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group dropup" style="padding-top: 200px;"&gt;&lt;button type="button" class="btn btn-secondary"&gt;
    Split Dropup Button
&lt;/button&gt;&lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
    aria-expanded="false"&gt;&lt;span class="visually-hidden"&gt;Toggle Dropdown&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dropup centered



By adding the class .dropup-center to the .dropup class, you get the trigger dropdown menus centered above the elements.https://www.tutorialspoint.com/bootstrap/examples/dropdown_dropup_centered.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropup dropup-center"  style="padding-top: 200px;"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered Dropup Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dropend



By adding the class .dropend to the parent class, you get the trigger dropdown menus at the right of the elements.https://www.tutorialspoint.com/bootstrap/examples/dropdown_dropend.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group dropend"><button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group dropend"&gt;&lt;button type="button" class="btn btn-secondary"&gt;
    Split Dropend Button
&lt;/button&gt;&lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
    aria-expanded="false"&gt;&lt;span class="visually-hidden"&gt;Toggle Dropend&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dropstart



By adding the class .dropstart to the parent class, you get the trigger dropdown menus at the left of the elements.https://www.tutorialspoint.com/bootstrap/examples/dropdown_dropstart.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group dropstart" style="padding-left: 200px;"><button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group dropstart"&gt;&lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
      aria-expanded="false"&gt;&lt;span class="visually-hidden"&gt;Toggle Dropstart&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;button type="button" class="btn btn-secondary"&gt;
      Split Dropstart Button
    &lt;/button&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Menu items



You can display the dropdown items by using elements <a> and <button>



Following example demonstrates dropdown items using <button> element:https://www.tutorialspoint.com/bootstrap/examples/dropdown_menuitem_button.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Dropdowns</title></head><body><div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Menu Using Button
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Create Account&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign in&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign out&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Following example demonstrates dropdown items using <a> element:https://www.tutorialspoint.com/bootstrap/examples/dropdown_menuitem_a.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Menu Using a
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Active



To add style the dropdown menu as active add .active class. To communicate the active state to assistive technology, use the aria-current attribute with the page value of the existing page, or true for the current item in the set.https://www.tutorialspoint.com/bootstrap/examples/dropdown_menuitem_active.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown Menu
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item active" href="#" aria-current="true"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Disabled



To make the dropdown menu disabled add .disabled class.https://www.tutorialspoint.com/bootstrap/examples/dropdown_menuitem_disabled.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Menu
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item disabled"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Menu alignment




Dropdowns are positioned by default 100% from the top and along the left side of its parent.



By using .drop* classes, you can change the direction of the dropdown menu. You can also handle them with some other modifier classes.



Get the dropdown menu right aligned by adding class .dropdown-menu-end to .dropdown-menu.



.dropdown-menu-end will appear on the left side when using Bootstrap in RTL.





https://www.tutorialspoint.com/bootstrap/examples/dropdown_menualignment_right_align.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned Dropdown Menu
&lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-end"&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Create Account&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt; Sign in&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign out&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Responsive alignment



For responsive alignment, add the data-bs-display="static" attribute to disable dynamic positioning and use responsive variation classes.



Add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end to position the dropdown menu to the right of the specified breakpoint.https://www.tutorialspoint.com/bootstrap/examples/dropdown_menualignment_responsive_leftaligned.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned for large screen
&lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-lg-end"&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Create Account&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign in&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign out&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start to align the dropdown menu to the left of the specified breakpoint or beyond to do.https://www.tutorialspoint.com/bootstrap/examples/dropdown_menualignment_responsive_rightaligned.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned for large screen
&lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Create Account&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign in&lt;/button&gt;&lt;/li&gt;&lt;li&gt;&lt;button class="dropdown-item" type="button"&gt;Sign out&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Alignment options



Put most of the options shown in the above examples in one place.https://www.tutorialspoint.com/bootstrap/examples/dropdown_alignment_options.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button class="btn btn-Primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Menu
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
      Right-aligned Menu
    &lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-end"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"&gt;
      Left-aligned, right-aligned lg Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-lg-end"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"&gt;
      Right-aligned, left-aligned lg Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group dropstart"&gt;&lt;button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
      Dropstart Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group dropend"&gt;&lt;button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
      Dropend Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group dropup"&gt;&lt;button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
      Dropup Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Menu content



Headers



Add the class .dropdown-header to add a header to label sections of the dropdown menu.https://www.tutorialspoint.com/bootstrap/examples/dropdown_headers.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;h6 class="dropdown-header"&gt;Dropdown Header&lt;/h6&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dividers



Add the class .dropdown-divider to separate groups of related menu elements with a divider.https://www.tutorialspoint.com/bootstrap/examples/dropdown_dividers.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Text



Place free-form text in drop-down menus with text and use the spacing utilities. Note that additional size styles may be required to limit the width of the menu.https://www.tutorialspoint.com/bootstrap/examples/dropdown_text.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Menu With Text
&lt;/button&gt;&lt;div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;"&gt;&lt;p&gt;
    example of dropdown menu with text.
&lt;/p&gt;&lt;p class="mb-0"&gt;
        more examples of text.
&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Forms



Add or create a form for the dropdown menu and use any margin or padding utility to provide the necessary negative space.https://www.tutorialspoint.com/bootstrap/examples/dropdown_form.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Menu Form
&lt;/button&gt;&lt;div class="dropdown-menu"&gt;&lt;form class="px-4 py-3"&gt;&lt;div class="mb-3"&gt;&lt;label for="exampleDropdownFormEmail1" class="form-label"&gt;Email Id&lt;/label&gt;&lt;input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]"&gt;&lt;/div&gt;&lt;div class="mb-3"&gt;&lt;label for="exampleDropdownFormPassword1" class="form-label"&gt;Password&lt;/label&gt;&lt;input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"&gt;&lt;/div&gt;&lt;button type="submit" class="btn btn-primary"&gt;Log in&lt;/button&gt;&lt;/form&gt;&lt;div class="dropdown-divider"&gt;&lt;/div&gt;&lt;a class="dropdown-item" href="#"&gt;Forgot password?&lt;/a&gt;&lt;a class="dropdown-item" href="#"&gt;Create new account&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dropdown options



To change the location of the dropdown menu add the classes data-bs-offset or data-bs-reference.https://www.tutorialspoint.com/bootstrap/examples/dropdown_options.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="d-flex"><div class="dropdown me-1"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
        Offset Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button type="button" class="btn btn-secondary"&gt;Reference Dropdown&lt;/button&gt;&lt;button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"&gt;&lt;span class="visually-hidden"&gt;Toggle Dropdown&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;hr class="dropdown-divider"&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Others&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Auto close behavior



When you click inside or outside the dropdown menu the dropdown menu is automatically closed. By using the autoClose option you can change this behavior of the dropdown.https://www.tutorialspoint.com/bootstrap/examples/dropdown_autoclose.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Dropdowns</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
      Basic Dropdown
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"&gt;
      Menu Close Clickable Inside
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"&gt;
      Menu Close Clickable Outside
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"&gt;
      Manual Close
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Create Account&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Sign out&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

September 22, 2025

Collpasev

This chapter will discuss about Bootstrap collpase. Collasping is toggling the content visibility. This is achieved using bootstrap’s javaScript plugins and some classes.

The JavaScript plugin for collapse is used to display and hide information. Buttons or anchors act as triggers when mapped to specific elements to toggle.
When an element is collapsed, the height will animate from its current value to zero. Due to how CSS handles animations, padding cannot be applied to a .collapse element.

Basic example

A basic collapse works as in the following example. Buttons when clicked show and hide another element via class changes:

Class .collapse hides content.
Class .collapsing helps transitions.
Classes .collapse.show displays content.

Using a button with the data-bs-target attribute is a good idea. You can also use an <a> link with a role=”button” (although this is not advised from a semantic perspective). data-bs-toggle=”collapse” is necessary in both situations.https://www.tutorialspoint.com/bootstrap/examples/collapse_basic_example.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap plugin - Collapse</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Collapse using link
    &lt;/a&gt;&lt;button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&gt;
      Collapse using button
    &lt;/button&gt;&lt;/p&gt;&lt;div class="collapse" id="collapseExample"&gt;&lt;div class="card card-body"&gt;
      The collapse JavaScript plugin used to display and hide content.
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Horizontal



Horizontal collapsing is supported by collapse plugin. Set a width on the immediate child element and add the .collapse-horizontal modifier class to transition the width rather than the height. You can further customize by using width utilities, create your own unique Sass, or use inline styles.https://www.tutorialspoint.com/bootstrap/examples/collapse_horizontal.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap plugin - Collapse</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Collapse With Toggle Width 
  &lt;/button&gt;&lt;/p&gt;&lt;div style="min-height: 120px;"&gt;&lt;div class="collapse collapse-horizontal" id="collapseWidthExample"&gt;&lt;div class="card card-body" style="width: 300px;"&gt;
      The collapse plugin supports horizontal collapsing.
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Multiple toggles and targets



Multiple targets can be used to toggle multiple elements assingning them to a common group and using a single <button> or <a> tag to hide/show. Following points helps us understand this better:




By assigning the common class in the data-bs-target attribute of the <button> or <a>, an element can reference multiple elements to show and hide them.



Multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap plugin - Collapse</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><p><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button></p><div class="row"><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample1"><div class="card card-body">
          Example of multiple collpase and targets.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col"&gt;&lt;div class="collapse multi-collapse" id="multiCollapseExample2"&gt;&lt;div class="card card-body"&gt;
          Example of multiple collapse and targets.
        &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Accessibility




Use aria-expanded to communicate collapsible element's status to assistive technology. Set aria-expanded="false" for closed collapsible elements and aria-expanded="true" for open ones.



The plugin toggles the attribute on the control based on whether the collapsible element is open or closed. Apply role="button" if the control element's HTML element is not a button.



Modern screen readers and similar assistive technologies make use of the data-bs-target attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

September 22, 2025

Close Button

This chapter will discuss about Bootstrap close button. Close button is used for dismissing content like modals, alerts, and popovers.

Basic example

Use .btn-close for creating a close button. Default styling is customizable.
Change Sass variables to change background-image and add text for screen readers using aria-label.

https://www.tutorialspoint.com/bootstrap/examples/closebutton_basic_example.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Close Button</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-2">
    Close Notification
    &lt;button type="button" class="btn-close" aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Disabled state




Disable close buttons with disabled attribute. Bootstrap also applies pointer-events: none; and user-select: none; to prevent triggering of hover and active states.



The opacity of disabled close buttons is changed.




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Close Button</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-2">
    Close Notification
    &lt;button type="button" class="btn-close" disabled aria-label="Close"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Dark variant




Take note! The .btn-close-white class is deprecated as of v5.3.0. Use data-bs-theme="dark" for the close button color mode.




To invert the close button, add data-bs-theme="dark" to .btn-close class or to it's parent elements. The filter property is used to invert the background-image.https://www.tutorialspoint.com/bootstrap/examples/closebutton_dark_variant.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Close Button</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body>
    Close Notification
    &lt;button type="button" class="btn-close" data-bs-theme="dark" aria-label="Close"&gt;&lt;/button&gt;&lt;button type="button" class="btn-close" data-bs-theme="dark" disabled aria-label="Close"&gt;&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

September 22, 2025

Carousel

This chapter discusses about the Bootstrap component carousel. The Carousel component in Bootstrap is used to display a rotating set of images or content in a slideshow format.

Overview

The component provides multiple options for customization, including slide transitions, interval timing, and navigation controls.
It allows users to easily navigate through the content and is commonly used for showcasing products or featured content on a website.
To ensure optimal performance, carousels require manual initialization through the carousel constructor method. If not initialized, certain event listeners (specifically those necessary for touch/swipe support) will remain unregistered until a control or indicator is activated by the user.
The carousel with the data-bs-ride=”carousel” attribute is initialized automatically on page load. No need to explicitly initialize such carousels.
Bootstrap does not support nested carousels. They can also often cause usability and accessibility challenges.
The animation effect of the carousel component depends on the prefers-reduced-motion media query.

Let us see an example of a basic carousel:https://www.tutorialspoint.com/bootstrap/examples/carousel_create.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel example</h1><div id="carouselExample" class="carousel slide"><center><div class="carousel-inner bg-secondary"><div class="carousel-item active"><p class="text-bg-danger display-6">Slide 1</p><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="300" class="d-block w-50" alt="..."></div><div class="carousel-item"><p class="text-bg-danger display-6">Slide 2</p><img src="/bootstrap/images/profile.jpg" alt="GFG" width="300" height="400" class="d-block w-50" alt="..."></div><div class="carousel-item"><p class="text-bg-danger display-6">Slide 3</p><img src="/bootstrap/images/scenery.jpg" alt="GFG" width="300" height="500" class="d-block w-50" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></center></div></body></html>

Points to remember:

The slide dimensions are not automatically normalized in carousels.
You need to use additional utilities or custom styles to size the content in carousels.
The previous/next controls and indicators are not explicitly required, as carousels support them. Add and customize the controls as per your requirement.
Do not forget to add the .active class to one of the slides, else the carousel will not be visible.
Ensure to set a unique id on the .carousel for optional controls, in case you are using multiple carousels on a single page.
You must add the data-bs-target attribute to the control and indicator elements or href for links, that matches the id of the .carousel element.

Indicators

Indicators can be added along with the previous/next controls, such that the user has the access to jump directly to a specific slide.

Let us see an example for adding indicators:https://www.tutorialspoint.com/bootstrap/examples/carousel_indicators.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Indicators</h1><div id="carouselExample" class="carousel slide"><center><div id="carouselExampleIndicators" class="carousel slide bg-secondary"><div class="carousel-indicators text-dark"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/scenery.jpg" alt="GFG" width="400" height="300" alt="..."></div><div class="carousel-item"><img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="400" height="300" alt="..."></div><div class="carousel-item"><img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="400" height="300" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></div></body></html>

Captions

Captions can be added to the slides with the .carousel-caption element within any .carousel-item. The caption can be hidden using the class .d-none and can be made visible using the classes .d-{breakpoint}-block.

Let us see an example for adding captions:https://www.tutorialspoint.com/bootstrap/examples/carousel_captions.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Captions</h1><div id="carouselExampleCaptions" class="carousel slide bg-secondary"><center><div id="carouselExampleCaptions" class="carousel slide bg-secondary"><div class="carousel-indicators text-dark"><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div class="carousel-caption text-white"><h5>Caption for first slide</h5><p>This is the first slide of the carousel component.</p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div class="carousel-caption text-white"><h5>Caption for second slide</h5><p>This is the second slide of the carousel component.</p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div class="carousel-caption text-white"><h5>Caption for third slide</h5><p>This is the third slide of the carousel component.</p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></div></body></html>

Crossfade

To apply a fade transition to your carousel slides instead of a slide, include .carousel-fade. However, if your carousel content comprises solely text slides, it may be necessary to add .bg-body or utilize custom CSS for appropriate crossfading in .carousel-items.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Animation - Fade</h1><div id="carouselExampleFade" class="carousel slide"><center><div id="carouselExampleFade" class="carousel slide carousel-fade bg-secondary"><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."><div class="carousel-caption text-white"><h2>First slide</h2></div></div><div class="carousel-item"><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."><div class="carousel-caption text-white"><h2>Second slide</h2></div></div><div class="carousel-item"><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="..."><div class="carousel-caption text-white"><h2>Third slide</h2></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></div></body></html>

Autoplaying carousel

The carousels can be made to autoplay on page load by setting the ride option to carousel.
While you hover with the mouse, the autoplaying carousels pause automatically. You can control this behavior with the option pause.
The carousel will stop cycling when the webpage is not v isible (either the browser window is inactive or minimized). in case of browsers support that support the page visibility API.

To ensure accessibility, it is advised to steer clear of autoplaying carousels. Should your page contain such a feature, we advise adding a separate button or control to enable explicit pausing or stopping of the carousel.

Let us see an example for autoplaying carousel:https://www.tutorialspoint.com/bootstrap/examples/carousel_autoplay.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Autoplaying</h1><center><div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/tutimg.png" alt="GFG" width="400" height="300" alt="..."><div><p><h3>First slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/profile.jpg" alt="GFG" width="400" height="300" alt="..."><div><p><h3>Second slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="..."><div><p><h3>Third slide</h3></p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></body></html>

When the ride option is set to true, instead of carousel, the carousel will not automatically start to cycle on page load. It will start only after the user’s interaction.

Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/carousel_autoplay_ride.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Autoplaying on Ride</h1><center><div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="true"><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/scenery.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>First slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Second slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Third slide</h3></p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></body></html>

Individual .carousel-item interval

To a .carousel-item add data-bs-interval=”” to change the amount of time to set between automatically cycling to next item.

Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/carousel_time_interval.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Autoplay Time Interval</h1><center><div id="carouselExampleInterval" class="carousel slide bg-secondary" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active" data-bs-interval="2000"><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="..."><div><p><h3>First slide</h3></p></div></div><div class="carousel-item" data-bs-interval="2000"><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Second slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Third slide</h3></p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></body></html>

Autoplaying carousel without controls

Carousel can be played without any controls as well.

Here is an example:https://www.tutorialspoint.com/bootstrap/examples/carousel_without_control.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel Autoplay without controls</h1><center><div id="carouselExampleSlideOnly" class="carousel slide bg-secondary" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active" data-bs-interval="2000"><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="..."><div><p><h3>First slide</h3></p></div></div><div class="carousel-item" data-bs-interval="2000"><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Second slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Third slide</h3></p></div></div></div></div></center></body></html>

Disable touch swiping

Touchscreen devices can swipe left or right to switch between slides on carousels. Turning off the touch option can disable this feature, by setting the value as false.

Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/carousel_disable_touch.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Carousel</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-center">Carousel disable touch swiping</h1><center><div id="carouselExampleControlsNoTouching" class="carousel slide bg-secondary" data-bs-touch="false"><div class="carousel-inner"><div class="carousel-item active"><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>First slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Second slide</h3></p></div></div><div class="carousel-item"><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="..."><div><p><h3>Third slide</h3></p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></center></body></html>

Dark variant

Attention! The use of dark variants for components has been deprecated in v5.3.0 due to the implementation of color modes. Rather than adding .carousel-dark, set data-bs-theme=”dark” on the root element, a parent wrapper, or the component itself.

September 22, 2025

Card

This chapter will discuss about Bootstrap cards. Bootstrap cards provide flexible and extensible content containers with many flavors and options. A card is a flexible and extensible container for content. It includes header and footer options, different content, contextual background colors, and effective display options.

Basic card

To create a basic card use the class .card. Use spacing utilities when required because cards don’t come with margins.
The basic card with mixed content and a fixed width is demonstrated here. Cards naturally cover the entire width of their parent element since they have no fixed width. With many sizing choices, this is easily customizable.

https://www.tutorialspoint.com/bootstrap/examples/card_basic_card.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 15rem;"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5>A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get More information</a></div></div></body></html>

Content types

Cards support a various type of content including images, text, list groups, and links. Below are examples of what’s supported.

Body

Add the class .card-body whenever you require a padded section within a card.https://www.tutorialspoint.com/bootstrap/examples/card_body.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card"><div class="card-body">
      Card body section.
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Titles, text, and links




Use the card title by adding the class .card-title to the <h*> tag. You can similarly add and tile links by adding .card-link to the <a> tag.



Placing the .card-title and .card-subtitle elements in the .card-body element ensures that the card title and subtitle line up nicely. Subtitles are used by adding .card-subtitle to the <h*> tag.





https://www.tutorialspoint.com/bootstrap/examples/card_title_text_links.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Mr. Jhon</h5><h6 class="card-subtitle mb-2 text-body-secondary">HR</h6><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="card-link">More info</a></div></div></body></html>



Images




The class .card-img-top places the image above the card.



You can add text to the card using .card-text. The text within .card-text can also be styled using standard HTML tags.





https://www.tutorialspoint.com/bootstrap/examples/card_images.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></body></html>



List groups



Use flush list groups to create content lists on cards. Add the class .list-group-flush.https://www.tutorialspoint.com/bootstrap/examples/card_list_groups_using_flush.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><ul class="list-group list-group-flush"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li></ul></div></body></html>



Use flush list groups to create header content lists on cards. Add the header to the list group of card by adding the class .card-header.https://www.tutorialspoint.com/bootstrap/examples/card_list_groups_header_using_flush.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><div class="card-header">
      Header
  &lt;/div&gt;&lt;ul class="list-group list-group-flush"&gt;&lt;li class="list-group-item"&gt;Item 1&lt;/li&gt;&lt;li class="list-group-item"&gt;Item 2&lt;/li&gt;&lt;li class="list-group-item"&gt;Item 3&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Use flush list groups to create footer content lists on cards. Add the footer to the list group of card by adding the class .card-footer.https://www.tutorialspoint.com/bootstrap/examples/card_list_groups_footer_using_flush.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><ul class="list-group list-group-flush"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li></ul><div class="card-footer">
    Card Footer
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Kitchen sink



Combine multiple content types to create the card you want, or populate it all. Below are image styles, blocks, text styles, and list groups, all grouped into fixed-width card.https://www.tutorialspoint.com/bootstrap/examples/card_kitchen_sink.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><ul class="list-group list-group-flush"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li></ul><div class="card-body"><a href="#" class="card-link">Link  1</a><a href="#" class="card-link">Link 2</a></div></div></body></html>



Header and footer



Include an optional header and/or footer inside a card.https://www.tutorialspoint.com/bootstrap/examples/card_header.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card"><div class="card-header">
    Card Header
  &lt;/div&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;Card Title&lt;/h5&gt;&lt;p class="card-text"&gt;A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.&lt;/p&gt;&lt;a href="#" class="btn btn-primary"&gt;Get more info&lt;/a&gt;&lt;/div&gt;&lt;div class="card-footer"&gt;
     Card Footer
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


You can style the card header by adding .card-header to the <h*> element.https://www.tutorialspoint.com/bootstrap/examples/card_header_using_h.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card"><h5 class="card-header">Card Header</h5><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>



To highlight, add the class .blockquote mb-0 to the .blockquote.https://www.tutorialspoint.com/bootstrap/examples/card_header_using_quote.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card"><div class="card-header">
  Quote
&lt;/div&gt;&lt;div class="card-body"&gt;&lt;blockquote class="blockquote mb-0"&gt;&lt;p&gt;blockquote element&lt;/p&gt;&lt;footer class="blockquote-footer"&gt;Blockquote footer &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/footer&gt;&lt;/blockquote&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Align the text of whole card at the center with the class .text-center.https://www.tutorialspoint.com/bootstrap/examples/card_header_text_in_center.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card text-center"><div class="card-header">
    Rose
  &lt;/div&gt;&lt;div class="card-body"&gt;&lt;h5 class="card-title"&gt;A rose is a flower that people in love give each other.&lt;/h5&gt;&lt;p class="card-text"&gt;Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.&lt;/p&gt;&lt;a href="#" class="btn btn-primary"&gt;More info&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Sizing



Card width is 100% unless otherwise stated. This can be customized using custom CSS, grid classes, grid sass mixins, or utilities.



Using grid markup



Use a grid to wrap your cards into columns and rows as required.https://www.tutorialspoint.com/bootstrap/examples/card_sizing_grid_markup.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row"><div class="col-sm-6 mb-3 mb-sm-0"><div class="card"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</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">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></div></div></body></html>



Using utilities



Quickly set the width of your card using some of the available resizing utilities.https://www.tutorialspoint.com/bootstrap/examples/card_using_utilities.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card w-75 mb-3"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content..</p><a href="#" class="btn btn-primary">Card Button</a></div></div><div class="card w-50"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Card Button</a></div></div></body></html>



Using custom CSS



Use custom CSS in your style sheet or as an inline style to set the width.https://www.tutorialspoint.com/bootstrap/examples/card_using_custom_css.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>



Text alignment



Text Alignment classes allow you to quickly change the text alignment of the entire card or specific parts.https://www.tutorialspoint.com/bootstrap/examples/card_text_alignment.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">The text alignment of the card at the left.</p><a href="#" class="btn btn-primary">Get more info</a></div></div><div class="card text-center mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">The text alignment of the card at the center.</p><a href="#" class="btn btn-primary">Get more info</a></div></div><div class="card text-end" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">The text alignment of the card at the right.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>



Navigation



Add navigation to the header (or block) of your card using Bootstrap navigation components.https://www.tutorialspoint.com/bootstrap/examples/card_navigation.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><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" aria-current="true" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div><div class="card-body"><h5 class="card-title">Rose</h5><p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>



Get the Bootstrap navigation components by adding the class .nav-pills.https://www.tutorialspoint.com/bootstrap/examples/card_navigation_using_pills.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><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="#" >Home</a></li><li class="nav-item"><a class="nav-link" href="#">Services</a></li><li class="nav-item"><a class="nav-link disabled">About us</a></li></ul></div><div class="card-body"><h5 class="card-title">Rose</h5><p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p><a href="#" class="btn btn-primary">Get more info</a></div></div></body></html>



Images



Cards contain several options for working with images. Choose to have "image caps" on each side of the card, overlay the image on the card's contents, or simply embed the image into the card.



Image caps



Cards can have "image caps" at top and bottom (images at the top or bottom of the card), similar to headers and footers as demonstrated below.https://www.tutorialspoint.com/bootstrap/examples/card_images_caps.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card mb-3"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">2 mins ago</small></p></div></div><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">5 mins ago</small></p></div><img src="\bootstrap\images\tutimg2.jpg" class="card-img-bottom" alt="..."></div></body></html>



Images overlays



Turn an image into a card background and overlay the card text. Some images may require additional styling or utility.https://www.tutorialspoint.com/bootstrap/examples/card_images_overlays.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card text-bg-dark"><img src="\bootstrap\images\tutimg2.jpg" class="card-img" alt="..."><div class="card-img-overlay"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small>2 mins ago</small></p></div></div></body></html>




Note: It is important note that text/content should not exceed the height of the image, as this will cause it to be displayed outside the frame.




Horizontal



By using a combination of grid and utility classes, you can create cards horizontally in a mobile-friendly and responsive way. In the example below, .g-0 removes the grid bars and uses the .col-md-* classes to level the card at the md breakpoints.https://www.tutorialspoint.com/bootstrap/examples/card_horizontal.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card mb-3" style="max-width: 540px;"><div class="row g-0"><div class="col-md-4"><img src="\bootstrap\images\tutimg.png" class="img-fluid rounded-start" alt="..."></div><div class="col-md-8"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">1 mins ago</small></p></div></div></div></div></body></html>



Card styles



A wide range of background, border, and color customization choices are available for cards.



Background and color



Added in v5.2.0




Using .text-bg-{color} helpers, you can set a background color with a contrasting foreground color.



Previously, pairing .text-color and .bg-color utilities manually was necessary for styling, you can still do so if you prefer.





https://www.tutorialspoint.com/bootstrap/examples/card_background_and_color.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card text-bg-primary mb-3" style="max-width: 18rem;"><div class="card-header">Primary</div><div class="card-body"><p class="card-text">A card with primary background-color.</p></div></div><div class="card text-bg-secondary mb-3" style="max-width: 18rem;"><div class="card-header">Secondary</div><div class="card-body"><p class="card-text">A card with secondary background-color.</p></div></div><div class="card text-bg-success mb-3" style="max-width: 18rem;"><div class="card-header">Success</div><div class="card-body"><p class="card-text">A card with success background-color.</p></div></div><div class="card text-bg-danger mb-3" style="max-width: 18rem;"><div class="card-header">Danger</div><div class="card-body"><p class="card-text">A card with danger background-color.</p></div></div><div class="card text-bg-warning mb-3" style="max-width: 18rem;"><div class="card-header">Warning</div><div class="card-body"><p class="card-text">A card with warning background-color.</p></div></div><div class="card text-bg-info mb-3" style="max-width: 18rem;"><div class="card-header">Info</div><div class="card-body"><p class="card-text">A card with info background-color.</p></div></div><div class="card text-bg-light mb-3" style="max-width: 18rem;"><div class="card-header">light</div><div class="card-body"><p class="card-text">A card with light background-color.</p></div></div><div class="card text-bg-dark mb-3" style="max-width: 18rem;"><div class="card-header">Dark</div><div class="card-body"><p class="card-text">A card with dark background-color.</p></div></div></body></html>



Border



By using the border utilities you can change the card border-color. Note that the .text-{color} class can be placed on the parent .card or a subset of the card's content as shown below.https://www.tutorialspoint.com/bootstrap/examples/card_border.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card border-primary mb-3" style="max-width: 18rem;"><div class="card-header">Primary</div><div class="card-body text-primary"><p class="card-text">A card with primary border-color.</p></div></div><div class="card border-dark mb-3" style="max-width: 18rem;"><div class="card-header">Dark</div><div class="card-body"><p class="card-text">A card with dark border-color.</p></div></div><div class="card border-secondary mb-3" style="max-width: 18rem;"><div class="card-header">Secondary</div><div class="card-body text-secondary"><p class="card-text">A card with secondary border-color.</p></div></div><div class="card border-light mb-3" style="max-width: 18rem;"><div class="card-header">Light</div><div class="card-body"><p class="card-text">A card with light border-color.</p></div></div><div class="card border-danger mb-3" style="max-width: 18rem;"><div class="card-header">Danger</div><div class="card-body text-danger"><p class="card-text">A card with light border-color.</p></div></div><div class="card border-warning mb-3" style="max-width: 18rem;"><div class="card-header">Warning</div><div class="card-body"><p class="card-text">A card with warning border-color.</p></div></div><div class="card border-success mb-3" style="max-width: 18rem;"><div class="card-header">Success</div><div class="card-body text-success"><p class="card-text">A card with success  border-color.</p></div></div><div class="card border-info mb-3" style="max-width: 18rem;"><div class="card-header">Info</div><div class="card-body"><p class="card-text">A card with info border-color.</p></div></div></body></html>



Mixins utilities



You can also change the card header and footer borders and remove the background color with .bg-transparent if you like.https://www.tutorialspoint.com/bootstrap/examples/card_mixins_utilities.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card border-info mb-3" style="max-width: 18rem;"><div class="card-header bg-transparent border-info">Card Header</div><div class="card-body text-info"><h5 class="card-title">Info card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer bg-transparent border-info">Card Footer</div></div></body></html>



Card layout



In addition to styling and customising the content in your card, Bootstrap provides several options for arranging card in series. Currently, these layout options are not responsive. Following sections demonstrates this.



Card groups



Card groups render cards as a single attached element with columns of the same width and height. Card groups are stacked. They use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.https://www.tutorialspoint.com/bootstrap/examples/card_layout_card_groups.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card-group"><div class="card"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">1 mins ago</small></p></div></div><div class="card"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">2 mins ago</small></p></div></div><div class="card"><img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p><p class="card-text"><small class="text-body-secondary">3 mins ago</small></p></div></div></div></body></html>



Use a card group with a footer, its content is automatically arranged.https://www.tutorialspoint.com/bootstrap/examples/card_layout_card_groups_footer.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="card-group"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">1 mins ago</small></div></div><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">2 mins ago</small></div></div><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">3 mins ago</small></div></div></div></body></html>



Grid cards




Use the Bootstrap grid system and its .row-cols class to control the number of grid columns (wrapped around the cards) to display per row.



For example, here's .row-cols-1 to put cards in columns and .row-cols-md-2 to spread 4 cards of the same width across multiple rows from the middle breakpoint upwards.





https://www.tutorialspoint.com/bootstrap/examples/card_grid_cards.php




Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-md-2 g-4"><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div></div></body></html>



If you change it to .row-cols-3 you will see the 4th card break.https://www.tutorialspoint.com/bootstrap/examples/card_grid_cards_row_col_3.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-sm-3 g-5"><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div></div></body></html>



When you want the same height to add .h-100 to the card. You want the same height by default, you can set $card-height: 100% in Sass.https://www.tutorialspoint.com/bootstrap/examples/card_grid_height_100.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-sm-3 g-5"><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div></div></div></div></body></html>



Like card groups, card footers are automatically arranged.https://www.tutorialspoint.com/bootstrap/examples/card_group_footer.php



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row row-cols-1 row-cols-sm-3 g-4"><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">1 mins ago</small></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">2 mins ago</small></div></div></div><div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p></div><div class="card-footer"><small class="text-body-secondary">3 mins ago</small></div></div></div></div></body></html>



Print Page

September 22, 2025

Button Group

This chapter will discuss about Bootstrap button groups. Bootstrap button group puts multiple buttons together on a single line, horizontally or vertically.

Basic example

You can create a group of buttons using .btn in .btn-group class.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group" role="group" aria-label="Basic Example"><button type="button" class="btn btn-info">Register</button><button type="button" class="btn btn-danger">Submit</button><button type="button" class="btn btn-warning">Cancel</button></div></body></html>

To ensure accessibility for assistive technologies like screen readers, it is important to use the appropriate role attribute and provide explicit labels for button groups. You can use role=”group” for button groups or role=”toolbar” for button toolbars. To label them, you can use aria-label or aria-labelledby.

As an alternative to the .nav navigation components, these classes can also be applied to groups of links.
You can highlight a link by using .active class.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group my-2"><a href="#" class="btn btn-success active" aria-current="page">Registration Link</a><a href="#" class="btn btn-success">Submit</a><a href="#" class="btn btn-success">Cancel</a></div></body></html>

Mixed styles

In the case of button groups mixed styles, it is possible to form a button group where each button has a distinct background color.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group mt-2" role="group" aria-label="Mixed styles"><button type="button" class="btn btn-info">Register</button><button type="button" class="btn btn-success">Cancel</button><button type="button" class="btn btn-warning">Submit</button></div></body></html>

Outlined styles

Use button styles such as btn-outline-primary, btn-outline-dark, etc to show the colors only for the border of the buttons element in the group.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group my-2" role="group" aria-label="Basic outlined"><button type="button" class="btn btn-outline-primary">Register</button><button type="button" class="btn btn-outline-dark">Submit</button><button type="button" class="btn btn-outline-warning">Cancel</button></div></body></html>

Checkbox and radio button groups

Using button like-checkbox toggle buttons, we can create seamless looking button group. To acheive this use .btn-check class and type=”checkbox”.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group my-2" role="group" aria-label="checkbox toggle button group"><input type="checkbox" class="btn-check" id="btnCheckbox1" autocomplete="off"><label class="btn btn-outline-primary" for="btnCheckbox1">Register</label><input type="checkbox" class="btn-check" id="btnCheckbox2" autocomplete="off"><label class="btn btn-outline-warning" for="btnCheckbox2">Submit</label><input type="checkbox" class="btn-check" id="btnCheckbox3" autocomplete="off"><label class="btn btn-outline-info" for="btnCheckbox3">Cancel</label></div></body></html>

Using button like-radio toggle button, we can create a seamless looking button group. To aceive this use .btn-check and type=”radio”.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group" role="group" aria-label="radio toggle button group"><input type="radio" class="btn-check" name="radioButton" id="buttonRadio1" autocomplete="off" checked><label class="btn btn-outline-primary" for="buttonRadio1">Register</label><input type="radio" class="btn-check" name="radioButton" id="buttonRadio2" autocomplete="off"><label class="btn btn-outline-warning" for="buttonRadio2">Submit</label><input type="radio" class="btn-check" name="radioButton" id="buttonRadio3" autocomplete="off"><label class="btn btn-outline-success" for="buttonRadio3">Cancel</label></div></body></html>

Button toolbar

Button toolbars can be created by combining sets of button groups. Use utility classes to add a space between groups, buttons, etc.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-toolbar mt-2" role="toolbar" aria-label="Toolbar button groups"><div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup1"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-secondary">Secondary</button></div><div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-dark">Dark</button></div><div class="btn-group" role="group" aria-label="toolbarButtonGroup3"><button type="button" class="btn btn-warning">Warning</button></div></div></body></html>

Combine input groups and button groups in toolbars. Space things appropriately using utilities.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-toolbar mb-3" role="toolbar" aria-label="toolbarButtonGroup1"><div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"><button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-secondary">secondary</button></div><div class="input-group"><div class="input-group-text" id="inputbtnGroup1">@</div><input type="text" class="form-control" placeholder="Username" aria-label="toolbarButtonGroup3" aria-describedby="inputButtonGroup1"></div></div><div class="btn-toolbar justify-content-between" role="toolbar" aria-label="toolbarButtonGroup4"><div class="btn-group" role="group" aria-label="toolbarButtonGroup1"><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-success">Success</button></div><div class="input-group"><input type="text" class="form-control" placeholder="tutorialspoint" aria-label="toolbarButtonGroup5" aria-describedby="inputButtonGroup2"><div class="input-group-text" id="inputbtnGroup2">@example.com</div></div></div></body></html>

Sizing

When nesting several groups, use .btn-group-* on each .btn-group rather than button sizing classes for each button.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h6 class="mt-4">Default size button group</h6><div class="btn-group" role="group" aria-label="Default size button group"><button type="button" class="btn btn-outline-dark">Dark</button><button type="button" class="btn btn-outline-warning">Warning</button></div><h6 class="mt-4">Small size button group</h6><div class="btn-group btn-group-sm" role="group" aria-label="Small size button group"><button type="button" class="btn btn-outline-secondary">Secondary</button><button type="button" class="btn btn-outline-success">Success</button></div><h6 class="mt-4">Large size button group</h6><div class="btn-group btn-group-lg" role="group" aria-label="Large size button group"><button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-info">Info</button></div></body></html>

Nesting

To get the dropdown menu mixed with button series, use .btn-group within another .btn-group.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group mt-2" role="group" aria-label="Nested dropdown"><button type="button" class="btn btn-primary">Submit</button><button type="button" class="btn btn-warning">Cancel</button><div class="btn-group" role="group"><button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Languages
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;English&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Hindi&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Vertical variation



To create vertically stacked button group, use .btn-group-vertical class. Bootstrap doesn't support split button dropdowns in this case.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group-vertical mt-2" role="group" aria-label="Button group with verical variation"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button></div></body></html>



Create the vertical button group with the dropdown menu.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-info">Secondary</button><div class="btn-group" role="group"><button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Languages
    &lt;/button&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;English&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;French&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Create vertical button group with radio buttons.



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Button Groups</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group with radio"><input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton1" autocomplete="off" ><label class="btn btn-outline-warning" for="verticalRadioButton1">Unchecked Radio Button</label><input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton2" autocomplete="off" checked><label class="btn btn-outline-warning" for="verticalRadioButton2">checked Radio Button</label><input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton3" autocomplete="off"><label class="btn btn-outline-warning" for="verticalRadioButton3">Unchecked Radio Button</label></div></body></html>

September 22, 2025

Breadcrumb

This chapter will discuss about Bootstrap breadcrumbs. A breadcrumb is a navigational method that shows the user where they are relative to the current page on a website or application. An accessible website with many pages or a complicated hierarchy can benefit greatly from breadcrumb navigation.

Basic breadcrumbs

Bootstrap allows users to easily create static breadcrumbs layouts by adding the class .breadcrumb to ordered or unordered lists, as demonstrated in the following example. Utility classes can be used to decorate the breadcrumbs.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Breadcrumb</title></head><body><div class="m-4"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Services</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Services</a></li><li class="breadcrumb-item active" aria-current="page">Contact</li></ol></nav></div></body></html>

Dividers

When you want to modify the default breadcrumb divider / with the > as a divider, then you can use some custom CSS style rules as shown in the below example:

Dividers are automatically added in CSS through the pseudo-element ::before and property content.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><title>Bootstrap - Breadcrumb</title></head><body><div class="m-4"><nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Services</li></ol></nav></div></body></html>

The quote function is required to quote strings when modifying with Sass. For example, if you use > as your delimiter, then you can use $breadcrumb-divider: quote(“>”);

You can also use embedded SVG icons. Apply icons via custom CSS properties or use Sass variables as demonstrated below.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Breadcrumb</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body>
  &lt;nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb"&gt;
      &lt;ol class="breadcrumb"&gt;&lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class="breadcrumb-item active" aria-current="page"&gt;About us&lt;/li&gt;&lt;/ol&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>


If you don't want a breadcrumb separator into the linked list items then set the value of --bs-breadcrumb-divider as a empty strings (' ') or set a Saas variable to $breadcrumb-divider: none;



Example



You can edit and try running this code using Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Breadcrumb</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">About us</li></ol></nav></body></html>

September 22, 2025

Category: 3. Components

navbar

How it works

Basic navbar

Supported content

Vertical navbar

Centered navbar

Brand

Text

Images

Image and text

Nav

Navbar without list

Navbar with dropdown

Forms

Text

Color schemes

Containers

Placement

Fixed top

Fixed bottom

Sticky top

Sticky bottom

Scrolling

Responsive behaviors

Toggler

Brand name on the left and toggler on the right

Brand name on the right and toggler on the left.

External content

Offcanvas

Modals

Modal components

Example

Static backdrop

Example

Scrollable modal

Example

Vertically centered

Example

Tooltips and popovers

Example

Example

Using the grid

Example

Varying modal content

Example

Toggle between modals

Example

Change animation

Example

Example

Dynamic heights

Accessibility

Optional sizes

Example

Fullscreen modal

Example

List Groups

Basic items

Example

Active items

Example

Disabled items

Example

Links and buttons

Example

Example

Flush

Example

Numbered

Example

Example

Horizontal

Example

Variants

Example

For links and buttons

Example

With badges

Example