This chapter discusses about the component offcanvas. The offcanvas component in Bootstrap is a feature that allows you to create a sliding panel or sidebar that can be revealed or hidden on the side of the viewport.
It is typically used for creating navigation menus, content panels, or additional information that can be temporarily displayed without taking up the full screen space.
Overview
Listed below are key features of Bootstrap offcanvas component:
Activation: The offcanvas component is typically activated by a toggle button or a link that triggers the opening and closing of the offcanvas panel. This can be achieved using JavaScript or data attributes.
Placement: The offcanvas panel can be positioned on the left, right, top or bottom of the viewport, based on your design requirements.
Content: You can place any HTML content inside the offcanvas panel, including navigation menus, text, images, forms, or other components.
Accessibility: Bootstrap ensures that the offcanvas component is accessible to screen readers and keyboard navigation, making it compliant with accessibility standards.
Responsive behavior: The offcanvas component is responsive by default, adapting to different screen sizes. On smaller screens, it can be made full-screen or allow scrolling within the offcanvas panel.
Events: Bootstrap provides JavaScript events that can be used to customize the behavior of the offcanvas component, such as executing code when the panel opens or closes.
It simplifies the creation of sliding panels and helps improve the user experience on mobile devices, providing a clean and efficient way to present additional content or navigation options without cluttering the main screen.
Note: Only one offcanvas can be shown at a time, like modals.
Offcanvas components
The following components work together to create the offcanvas functionality in Bootstrap, allowing you to create sliding panels that reveal additional content or navigation options when triggered by a toggle button or link:
Toggle button or trigger element
Offcanvas panel container
Offcanvas panel
Offcanvas placement
Close button
Javascript and data attributes
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_create.php
Example
You can edit and try running this code using the Edit & Run option.
Open offcanvas
</button></div><div class="offcanvas offcanvas-end" id="offcanvas"><div class="offcanvas-header"><h5 class="offcanvas-title">
Offcanvas title
</h5><button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><p>This is an offcanvas component of Bootstrap, which is similar to a modal in functionality.</p></div></div></div></body></html></pre>
Live demo
An offcanvas component can be shown or hidden based on:
.offcanvas (default) - hides the content
.offcanvas.show - shows the content
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_live.php
Example
You can edit and try running this code using the Edit & Run option.
</button><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div>
The Offcanvas component provides a convenient way to create responsive and mobile-friendly layouts. When triggered, the offcanvas panel slides into view from either the left or right side of the screen, depending on the placement chosen. It overlays the main content, pushing it aside, and provides a smooth transition effect.
</div></div></div></div><script>
//New instance of the collapse element is created
var offcanvasElement = document.getElementById("offcanvasExample");
var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
When an offcanvas and its backdrop are visible, the scrolling of the <body> element is prohibited. To enable scrolling for the <body> element, you can utilize the data-bs-scroll attribute.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_body_scrolling.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</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="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel"><div class="offcanvas-header"><h1 id="offcanvasStartLabel">Offcanvas</h1><button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><hr><div class="offcanvas-body"><h5>Enable body Scrolling</h5><h5><p>Bootstrap provides features to scroll the page when offcanvas and the backdrop are visible.</p></h5></div></div><div class="container mt-3"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">Offcanvas Scrolling Enable</button><center><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400"></center></div></body></html></pre>
Body scrolling and backdrop
You can enable <body> scrolling with visible backdrop.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_body_scrolling_backdrop.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</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="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Enable backdrop with scrolling</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><hr><div class="offcanvas-body"><h5><p>Bootstrap provides features to scroll the page and the backdrop are visible.</p></h5><img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200"></div></div><div class="container mt-3"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasStart">Enabled scrolling with backdrop</button><center><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"></center></div></body></html></pre>
Static backdrop
The offcanvas component will not close on clicking out of it, when the backdrop is set to static.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_static.php
Example
You can edit and try running this code using the Edit & Run option.
</button><div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div>
The offcanvas component will not get closed when you click outside it.
</div></div></div><center><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"></center></div></body></html></pre>
Dark offcanvas
The use of dark variants for components has been deprecated in v5.3.0 due to the implementation of color modes. Rather than manually including the aforementioned classes, it is recommended to apply the data-bs-theme="dark" attribute to either the root element, a parent wrapper, or the component itself.
Responsive
Offcanvas classes that are responsive, conceal content beyond the viewport starting from a designated breakpoint and downwards. On the other hand, the content behaves normally above that breakpoint. For instance, with the .offcanvas-lg class, the content situated below the lg breakpoint is hidden in an offcanvas, whereas it is visible above that breakpoint.
Note:You need to resize your browser to see the responsive behavior of offcanvas.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_responsive.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</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-3"><h4 class="text-success text-start">Responsive offcanvas</h4><div class="container"><button class="btn btn-success d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Show offcanvas</button><div class="alert alert-warning d-none d-lg-block">Resize your screen / viewport to show the responsive offcanvas.</div><div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button></div><div class="offcanvas-body"><p class="mb-0">This content can be verified when the screen size is below the breakpoint lg (.offcanvas-lg).</p></div></div></div></div></body></html>
Classes for responsive offcanvas are accessible at every breakpoint.
.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl
Placement
You must add one of the modifier classes, to add a placement to the offcanvas component, as there is no default placement for it.
Following are the placement options available:
.offcanvas-start - It places offcanvas on the left of the viewport.
.offcanvas-end - It places offcanvas on the right of the viewport.
.offcanvas-top - It places offcanvas at the top of the viewport.
.offcanvas-bottom - It places offcanvas at the bottom of the viewport.
Let us see an example for placement - top::https://www.tutorialspoint.com/bootstrap/examples/offcanvas_placement_top.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</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-3"><h4 class="text-success text-start">Offcanvas placement - Top</h4><p>Resize the viewport size to see the offcanvas</p><div class="container"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button><div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"><div class="offcanvas-header text-bg-primary"><h5 class="offcanvas-title" id="offcanvasTopLabel">Top offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-primary-subtle"><p>This is an example for an offcanvas whose placement is at the top of the viewport.</p></div></div></div></div></body></html>
Let us see an example for placement - right:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_placement_right.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</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-3"><h4 class="text-success text-start">Offcanvas placement - Right</h4><div class="container"><button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right offcanvas</button><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"><div class="offcanvas-header text-bg-success"><h5 class="offcanvas-title" id="offcanvasRightLabel">Right offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-success-subtle"><p>This is an example for an offcanvas whose placement is at the right of the viewport.</p></div></div></div></div></body></html>
Let us see an example for placement - bottom:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_placement_bottom.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</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-3"><h5 class="text-dark text-start">Offcanvas placement - Bottom</h5><p>Resize the viewport size to see the offcanvas</p><div class="container"><button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button><div class="offcanvas offcanvas-bottom" data-bs-scroll="true" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"><div class="offcanvas-header text-bg-danger"><h5 class="offcanvas-title" id="offcanvasBottomLabel">Bottom offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-danger-subtle"><p>This is an example for an offcanvas whose placement is at the bottom of the viewport.</p></div></div></div></div></body></html>
Accessibility
Make sure to include aria-labelledby="..." in .offcanvas, referring to the offcanvas title, since the offcanvas panel is similar to a modal dialog in concept. It's worth noting that you don't have to add role="dialog" as it is automatically added through JavaScript.
This chapter will discuss about Bootstrap navs and tabs. Create navigation menu using .nav class and tab navigation menu using .tab class.
Base nav
All types of Bootstrap’s navigation components are built with base class .nav (component build with flexbox). The nav components can be used to add a list of links to browse to other pages within the website.
The items can be added within the .nav-item class.
To add links within the item class use .nav-link class.
When item order is important, use <ul>s, <ol>, or create your own with <nav>. The nav links behave similar to the nav items because the .nav uses display: flex without extra markup.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_base_nav_link.php
Example
You can edit and try running this code using Edit & Run option.
Use modifiers and utilities to change the styles of the .navs component as seen the following sections:
Horizontal alignment
Use flexbox utilities to modify the horizontal alignment of navigation. Navs are left-aligned by default. Navs can be easily centered or right-aligned.
For center-alignment, use the CSS class .justify-content-center.
To achieve right-alignment, use the CSS class .justify-content-end.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_horizontal_alignment_right.php
Example
You can edit and try running this code using Edit & Run option.
Use the .flex-column utility, that changes the flex item direction, in order to stack the navigation items. Use responsive versions to stack them on various viewports (e.g., .flex-sm-column).https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_vertical.php
Example
You can edit and try running this code using Edit & Run option.
Add the .nav-tabs class to .nav to create a tab navigation menu. Use them to create tabbable regions using tab JavaScript plugin.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_tabs.php
Example
You can edit and try running this code using Edit & Run option.
Create a navigation pills menu by replacing .nav-tab to .nav-pills within .nav class.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_pills.php
Example
You can edit and try running this code using Edit & Run option.
Use .nav-fill to evenly fill available space withon .nav-items. The horizontal space is completely occupied, even when the width of each nav item varies.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify.php
Example
You can edit and try running this code using Edit & Run option.
With <nav>-based navigation, you can skip .nav-item and use .nav-link to style <a> elements.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify_link.php
Example
You can edit and try running this code using Edit & Run option.
Use .nav-justified for equal-width elements. This will fill the horizontal space with nav links, with each nav item having equal width, unlike the .nav-fill mentioned earlier.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify_justified.php
Example
You can edit and try running this code using Edit & Run option.
An example similar to the .nav-fill demonstration, but using a navigation based on the <nav> element.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify_justified_link.php
Example
You can edit and try running this code using Edit & Run option.
Use flexbox utilities, in case you require responsive nav variations.
These utilities provide more customization across all the various breakpoints. The navigation will be stacked at the lowest breakpoint and then switch to a horizontal layout that spans the entire width from the small breakpoint onwards.
For navigation bars using navs, add role=”navigation” to the parent container of the <ul> or wrap the entire navigation in a <nav> element. Don’t add the role to the <ul> to avoid it being announced as a list by assistive technologies.
Navigation bars styled as .nav-tabs should not have the attributes role=”tablist”, role=”tab” or role=”tabpanel”. This applies specifically to dynamic tabbed interfaces, as explained in the ARIA Authoring Practises Guide’s tabs pattern. Check out the JavaScript behavior section for a sample of dynamic tabbed interfaces.
The aria-current attribute is unnecessary on dynamic tabbed interfaces as the JavaScript already manages the selected state by using aria-selected=”true” on the active tab.
Using dropdowns
Dropdown menus can be added using HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
To create a tab with dropdown menu add .nav-tabs class to the <ul> element.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_tabs_with_dropdowns.php
Example
You can edit and try running this code using Edit & Run option.
Use navigational tabs and pills to generate tabbable panes of local content using the bootstrap.js file and tab JavaScript plugin.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_javascript_behaviour.php
Example
You can edit and try running this code using Edit & Run option.
This works with <ul>-based markup, or with any random “roll your own” markup.
To maintain the native role of <nav> as a navigation landmark, don’t add role=”tablist” directly to it. Instead, use an alternative element (such as a basic <div>) and enclose the <nav> within it.
For vertical tabs, it is recommended to include aria-orientation=”vertical” in the tab list container.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_vertical_tabs.php
Example
You can edit and try running this code using Edit & Run option.
Use role=”tablist”, role=”tab”, role=”tabpanel” and aria-attributes to show structure, function, and current state to assistive technology users.
Use <button> elements for tabs as a best practice. These controls cause dynamic changes, instead of taking the user to another page.
According to the ARIA Authoring Practises, only active tab gets keyboard focus. JavaScript sets tabindex = “-1” on inactive tab controls when initialized.
To improve keyboard navigation, it’s advisable to make tab panels focusable unless the first meaningful element inside them is already focusable. The JavaScript plugin doesn’t handle this, so you need to add tabindex=”0″ to your tab panels to make them focusable.
The JavaScript plugin for tabs doesn’t work well with tabbed interfaces that have dropdown menus due to usability and accessibility concerns. The dropdown menus hide the trigger element of the active tab, causing confusion for users.
Using data attributes
Activate tab or pill navigation by specifying data-bs-toggle=”tab” or data-bs-toggle=”pill” on an element with .nav-tabs or .nav-pills attributes.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_using_data_attribute.php
Example
You can edit and try running this code using Edit & Run option.
const triggerElement = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerElement).show() // Select tab by name
const triggerFirstTabElement = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabElement).show() // Select first tab
Fade effect
Use .fade to each .tab-pane to make the tabs fade in. The first tab pane must use .show to make the initial content visible.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fade_effect.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navs and Tabs</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="nav nav-pills bg-light" id="myTab" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tut" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Tutorialspoints</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button></li></ul><div class="tab-content bg-warning mt-2"><div class="tab-pane fade show active p-2" id="tut" role="tabpanel" aria-labelledby="tutTab" tabindex="0"><h4>Tutorialspoint</h4>Fade effect is used to fade the visible element.</div><div class="tab-pane fade p-2" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0"><h4>Home</h4>Use .fade to each .tab-pane to make the tabs fade in.</div><div class="tab-pane fade p-2" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0"><h4>Services</h4>The first tab pane must use .show to make the initial content visible.</div></div></body></html>
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).
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.
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.
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.
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.
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.
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.
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.
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.
Welcome to the Tutorialspoint!
</span></div></nav></body></html></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.
Welcome to Tutorialspoint!
</span></div></div></nav></body></html></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.
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.
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.
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.
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.
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.
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.
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.
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.
This chapter discusses about the Bootstrap’s component modals. Modals are a type of component that are used to display content or messages in a customizable dialog box that overlays the current page.
Modals can be used for a variety of purposes such as displaying images, videos, forms, and notifications.
Modals are useful for creating a user-friendly and interactive interface because they allow users to interact with content without leaving the current page.
They can also be easily customized using Bootstrap’s built-in classes and JavaScript plugins.
Modal gets closed automatically when the modal backdrop is clicked.
Only one modal window at a time is supported by Bootstrap.
It is advised to avoid nesting a .modal within another element. Rather place your modal in a top-level position to avoid any interference from other elements.
Using modals on mobile devices comes with certain limitations because of position: fixed.
Animation effect of the modal component depends upon the prefers-reduced-motion media query.
The autofocus HTML attribute is ineffective in Bootstrap modals because of the way HTML5 defines its semantics. A comparable result can be attained by employing specially crafted JavaScript code.
</button><!-- Modal --><div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-warning-subtle"><h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body bg-success-subtle border border-dark"><strong><h4>This is a modal with static backdrop. Try clicking outside to close me!!! Sorry you can't, as this has a static backdrop.</h4></strong></div><div class="modal-footer bg-warning-subtle"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-success">Save</button></div></div></div></div></div></body></html></pre>
Scrollable modal
Bootstrap provides feature to make a modal scrollable, independent of the page itself, in situations when the modal becomes too long for the viewport or device.
Let us see an example for a scrollable modal:https://www.tutorialspoint.com/bootstrap/examples/modal_scrollable.php
Example
You can edit and try running this code using the Edit & Run option.
</button><!-- Modal --><div class="modal fade" id="exampleModal"><div class="modal-dialog modal-lg modal-dialog-scrollable" style="height: 300px"><div class="modal-content"><div class="modal-header bg-warning-subtle"><h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body bg-success-subtle border border-dark"><h4>This is an example for a scrollable modal. A scroll bar is seen as the content is too long to be viewed in the modal. Hence the class ".modal-dialog-scrollable" is provided by Bootstrap. Let us use this class and see the change in the appearance of the modal. Still scroll bar doesn't appear. make the content long enough for the scroll to appear.....................................................................................</h4></div><div class="modal-footer bg-warning-subtle"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-success">Save</button></div></div></div></div></div></body></html></pre>
Vertically centered
In order to vertically center the modal, use the class .modal-dialog-centered to .modal-dialog.
Let us see an example for a vertically centered modal:https://www.tutorialspoint.com/bootstrap/examples/modal_vertically_centered_scrollable.php
Example
You can edit and try running this code using the Edit & Run option.
</button><!-- Modal --><div class="modal fade" id="exampleModal"><div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" style="width: 450px" style="height: 150px"><div class="modal-content"><div class="modal-header bg-warning-subtle"><h3 class="modal-title" fs-5" id="exampleModalLabel">Vertically centered modal</h3><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body bg-success-subtle border border-dark"><h4>This is an example for a vertically centered scrollable modal. A scroll bar is seen as the content is too long to be viewed in the modal. Hence the class ".modal-dialog-centered" with ".modal-dialog-scrollable" is provided by Bootstrap. Let us use this class and see the change in the appearance of the modal. Still scroll bar doesn't appear. make the content long enough for the scroll to appear....scrolllllllllllllllllaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaableeeeeeeeeeeeeee...................................</h4></div><div class="modal-footer bg-warning-subtle"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-success">Save</button></div></div></div></div></div></body></html></pre>
Tooltips and popovers
Modals can include tooltips and popovers. Tooltips and popovers within a modal, automatically gets dismissed, when the container modal gets closed.
Let us see an example for a modal with tooltip:https://www.tutorialspoint.com/bootstrap/examples/modal_tooltip.php
Example
You can edit and try running this code using the Edit & Run option.
This is a modal containing a tooltip. To see the tooltip hover over the button shown below.
<button
type="button" id="tooltip1" class="btn btn-secondary mt-4" data-bs-toggle="tooltip" title="I am a tooltip shown on hovering">
Hover over me
</button></div></div></div></div><button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button></div><script>
//Enabling the tooltip
bootstrap.Tooltip.getOrCreateInstance("#tooltip1")
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script></body></html></pre>
Let us see an example for a modal with popover:https://www.tutorialspoint.com/bootstrap/examples/modal_popover.php
Example
You can edit and try running this code using the Edit & Run option.
This is a modal containing a popover. To see the popover click the button shown below.
<button
type="button" id="popover1" class="btn btn-secondary mt-4" data-bs-toggle="popover" title="I am a popover shown on clicking">
Click me!!!
</button></div></div></div></div><button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button></div><script>
//Enabling the popover
bootstrap.Popover.getOrCreateInstance("#popover1")
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script></body></html></pre>
Using the grid
Bootstrap grid system can be utilized within a .modal-body by nesting a .container-fluid and then use the grid system classes as required.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/modal_grid.php
Example
You can edit and try running this code using the Edit & Run option.
Level 1: data
<div class="row border border-dark"><div class="col-8 col-sm-6 border border-dark">
Level 2: data
</div><div class="col-4 col-sm-6 border border-dark">
Level 2: data
</div></div></div></div></div></div></div></div></div></div><center><button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button></center></div><script>
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script></body></html></pre>
Varying modal content
If you have a collection of buttons that activate an identical modal with slightly distinct content, you can leverage event.relatedTarget and HTML data-bs-* attributes to modify the content of the modal based on the specific button that was clicked.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/modal_varying_content.php
Example
You can edit and try running this code using the Edit & Run option.
Open Modal
</button><a class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#mymodal" data-bs-heading="Title changed">
Open Modal Changed Title
</a><div class="modal fade" id="mymodal" data-bs-backdrop="static"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-primary-subtle">Title 1</div><div class="modal-body text-bg-warning"><p>
Modal is a feature provided by Bootstrap that can include tooltips, popovers, grid and much more.
</p></div><div class="modal-footer bg-primary-subtle"><button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button></div></div></div></div></div><script>
const myModal = document.querySelector('#mymodal');
myModal.addEventListener('show.bs.modal', function (event) {
// Get the reference of the triggering button
// and retrieve the value from the attribute
const button = event.relatedTarget;
const heading = button.getAttribute('data-bs-heading');
// Set the value for the heading
const title = myModal.querySelector('.modal-header').textContent = heading;
});
</script></body></html></pre>
Toggle between modals
With the help of placement of data-bs-target and data-bs-toggle attributes, you can toggle between multiple modals with ease.
Multiple modals can not be opened at the same time, you can simply toggle between two different modals.
Let us see an example for toggling between modals:https://www.tutorialspoint.com/bootstrap/examples/modal_toggle.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Modal</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><body class="m-4"><h4>Toggle between modals</h4><div class="modal fade" id="modal1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modalLabel">Modal 1</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>This is a simple modal. Clicking on the "Go to modal 2" button, you can toggle to the second modal.</p></div><div class="modal-footer"><button class="btn btn-danger" data-bs-dismiss="modal">Close</button><button class="btn btn-success" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">
Go to modal 2
</button></div></div></div></div><div class="modal fade" id="modal2"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modal2">Modal 2</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>This is the second modal appeared after the 'Go to modal 2' button was clicked from first modal. Click on 'Back' button to go back to modal 1.</p></div><div class="modal-footer"><button class="btn btn-success" data-bs-target="#modal1" data-bs-toggle="modal" data-bs-dismiss="modal">Back</button></div></div></div></div><a class="btn btn-success m-4" data-bs-toggle="modal" href="#modal1" role="button">Launch modal 1</a></body></html></pre>
Change animation
In order to add animation to your modal, use the class .fade to .modal, which will add a fading effect when opening and closing the modal.
And in case you want to remove the animation, just remove the .fade class from the .modal class.
Let us see an example for modal with animation:https://www.tutorialspoint.com/bootstrap/examples/modal_animation.php
Example
You can edit and try running this code using the Edit & Run option.
You should call the function myModal.handleUpdate() to adjust the modal's position, if the height of the modal changes dynamically.
Accessibility
Ensure that you include aria-labelledby="..." that pertains to the modal title for .modal. Also, to describe your modal dialog, you can use aria-describedby on .modal. It is not required to add role="dialog" as it is already implemented through JavaScript.
Optional sizes
By adding modifier classes to a .modal-dialog, one can access the three optional sizes of modals. These sizes are triggered at specific breakpoints to prevent the appearance of horizontal scrollbars on smaller viewports.
Size
Class
Max-width
Small
.modal-sm
300px
Default
None
500px
Large
.modal-lg
800px
Extra large
.modal-xl
1140px
Default modal without a modifier class, represents the medium size modal.
Note: In order to see the changed effect of the different modal sizes, kindly change the size of your browser.
Let us see an examples of differently sized modals, such as xl, lg and sm:https://www.tutorialspoint.com/bootstrap/examples/modal_varying_size.php
Example
You can edit and try running this code using the Edit & Run option.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Dropdown Menu Using a
</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></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.
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.
Left-aligned but right aligned for large screen
</button><ul class="dropdown-menu dropdown-menu-lg-end"><li><button class="dropdown-item" type="button">Create Account</button></li><li><button class="dropdown-item" type="button">Sign in</button></li><li><button class="dropdown-item" type="button">Sign out</button></li></ul></div></body></html></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.
Right-aligned but left aligned for large screen
</button><ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"><li><button class="dropdown-item" type="button">Create Account</button></li><li><button class="dropdown-item" type="button">Sign in</button></li><li><button class="dropdown-item" type="button">Sign out</button></li></ul></div></body></html></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.
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.
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.
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.
Dropdown Menu With Text
</button><div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;"><p>
example of dropdown menu with text.
</p><p class="mb-0">
more examples of text.
</p></div></div></body></html></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.
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.
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.
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.
Collapse using link
</a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Collapse using button
</button></p><div class="collapse" id="collapseExample"><div class="card card-body">
The collapse JavaScript plugin used to display and hide content.
</div></div></body></html></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.
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.
Example of multiple collpase and targets.
</div></div></div><div class="col"><div class="collapse multi-collapse" id="multiCollapseExample2"><div class="card card-body">
Example of multiple collapse and targets.
</div></div></div></div></body></html></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.
Close Notification
<button type="button" class="btn-close" aria-label="Close"></button></div></body></html></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.
Close Notification
<button type="button" class="btn-close" disabled aria-label="Close"></button></div></body></html></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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Card body section.
</div></div></body></html></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.
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.
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.
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.
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.
Card Header
</div><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 class="card-footer">
Card Footer
</div></div></body></html></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.
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.
Rose
</div><div class="card-body"><h5 class="card-title">A rose is a flower that people in love give each other.</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">More info</a></div></div></body></html></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.
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.
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.
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>