This chapter discusses about Bootstrap progress bars. Progress bars in Bootstrap are UI components that display the progress or completion status of a task or process. They are typically used to visually indicate the progress of an operation, such as file uploads, form submissions, or loading of data.
Bootstrap provides a set of in-built classes to create progress bars with different styles, sizes and animations. Bootstrap also provides additional classes and options for customizing the appearance and behavior of progress bars, such as setting different colors, adding labels, using striped or animated progress bars, and stacking multiple progress bars together.
Use the .progress as a wrapper to show the max value of the progress bar.
Use the inner .progress-bar to show the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
The .progress-bar also requires some role and aria attributes to make it accessible.
The .progress-stacked can be used to create multiple/stacked progress bars.
Basic Progress Bar
Here’s an example of a basic Bootstrap progress bar:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_create.php
Example
You can edit and try running this code using the Edit & Run option.
Bootstrap provides a complete list of utilities for setting width. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_sizing.php
Example
You can edit and try running this code using the Edit & Run option.
By default the height of a progress bar is 1rem, but it can be changed using the CSS height property. You must set the same height for the progress container and the progress bar.
Height value can be set only on the .progress, so once the value of height is changed in the .progress container, the inner .progress-bar automatically resizes.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_height.php
Example
You can edit and try running this code using the Edit & Run option.
Labels can be added to the progress bars by placing text within the .progress-bar.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_labels.php
Example
You can edit and try running this code using the Edit & Run option.
In order to avoid the content getting bleed out of the bar, the content inside the .progress-bar is controlled with overflow: hidden
Use overflow: visible from overflow utilities to make the content capped and become readable. This is useful when the progress bar is shorter than the label.
Define an explicit text color to make the text readable.
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Progress</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><h4>Progress Bar Long Label</h4><br><div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar overflow-visible text-dark" style="width: 20%">Overflow visible on progress bar, but the label is too long, but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long</div></div><br><div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar overflow-hidden text-dark" style="width: 20%">Overflow hidden on progress bar, but the label is too long, but the label is too long,but the label is too long,;/div>
</div></body></html></pre>
Background
The appearance of individual progress bar can be changed using the background utility classes.
The progress bar is blue by default (primary).https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_background.php
Example
You can edit and try running this code using the Edit & Run option.
Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
In order to make the labels readable on a colored background, choose appropriate text colors.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_textcolor.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Progress</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><h4>Progress Bar - Text Color</h4><br></div><div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-success" style="width: 25%">Default text color</div></div><br><div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-info text-dark" style="width: 50%">Dark text on Info</div></div><br><div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-warning text-dark" style="width: 75%">Dark text on warning</div></div><br><div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-danger" style="width: 100%">Light text on danger</div></div></body></html>
You can also use the new combined helper classes for text and background color i.e. Color and background.https://www.tutorialspoint.com/bootstrap/examples/progress_color_background.php
Example
You can edit and try running this code using the Edit & Run option.
A progress bar can have multiple progress bars stacked in it. Use the Bootstrap class .progress-stacked to create multiple bars.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_multiple.php
Example
You can edit and try running this code using the Edit & Run option.
Stripes can be added to a progress bar using .progress-bar-striped class to any .progress-bar.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_striped.php
Example
You can edit and try running this code using the Edit & Run option.
Animation can be added to a progress bar, where the stripes get animated right to left via CSS3 animations. Add.progress-bar-animated class to .progress-bar.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_animated.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about popovers in Bootstrap. A popover typically contains additional information, context, or actions related to the triggering element.
The popover may contain text, images, links, buttons, or other content, depending on its purpose and context. Bootstrap provides built-in popover components that can be easily integrated into web applications.
Things to remember while using the popover plug-in:
As popovers depend on Popper.js, a third party library, for positioning, you must include popper.min.js before bootstrap.js.
As a dependency, the popovers require the popover plugin.
You must initialize the popovers first, as popovers are opt-in for performance reasons.
A popover will never be shown for a zero-length title and content values.
Triggering popovers will not work on hidden elements.
Popovers for .disabled or disabled elements must be triggered using a wrapper element.
To avoid getting popovers centered between the anchors’ overall width, use white-space: nowrap; on the <a>
Before removing any element from the DOM, you must hide the popovers corresponding to them.
Enable Popovers
Initialize all the popovers on a page, by their data-bs-toggle attribute
data-bs-toggle="popover" data-bs-placement="top"
data-bs-title="Popover"
data-bs-content="It is a new popover.">
Click to view popover
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Positioning of a Popover
There are four options available for the positioning of the popover: left, right, top and bottom aligned.
By default, the popover will appear on the right of the element.
The data-bs-placement attribute is used to set the position of the popover.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_position.php
Example
Let's see an example of setting the position of a popover:
You can edit and try running this code using the Edit & Run option.
Popover on top
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Custom popovers
The appearance of popovers can be customized using a custom class data-bs-custom-class="custom-popover".https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_custom.php
Example
Let's see an example of creating a custom popover:
You can edit and try running this code using the Edit & Run option.
data-bs-toggle="popover" data-bs-placement="top"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="It is a custom popover.">
Custom popover
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Dismissible Popover
The popover gets closed when the same element is clicked again, by default. However, the attribute data-bs-trigger="focus" can be used, which will close the popover when clicking outside the element.
For the popover to be dismissed on the next click, it is necessary to use specific HTML code that ensures consistent behavior across different browsers and platforms
When the mouse pointer is moved over an element and you want a popover to appear on hovering, use the data-bs-trigger="hover" attribute.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_hover.php
Example
Let's see an example of a hovering popover:
You can edit and try running this code using the Edit & Run option.
For popovers on disabled elements, you may prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_disabled.php
Example
Let's see an example of a popover on disabled element:
You can edit and try running this code using the Edit & Run option.
An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".
By default, its 'clippingParents' and can accept an HTML Element reference (via JavaScript only).
container
string, element, false
false
Appends the popover to a specific element.
customClass
string, function
''
These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
delay
number, object
0
Delay showing and hiding the popover(ms). Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacements
array
['top', 'right', 'bottom', 'left']
Define fallback placements by providing a list of placements in array.
html
boolean
false
Allow HTML in the popover.
offset
array, string, function
[0, 0]
Offset of the popover relative to its target. Ex: data-bs-offset="10,20".
placement
string, function
'top'
Decides the position of the popover.
popperConfig
null, object, function
null
To change Bootstraps default Popper config.
sanitize
boolean
true
Enable or disable the sanitization.
sanitizeFn
null, function
null
You can supply your own sanitize function.
selector
string, false
false
With a selector, popover objects will be delegated to the specified targets.
template
string
''
While creating a popover, use the base HTML.
title
string, element, function
''
It refers to the title of the popover.
trigger
string
'hover-focus'
Shows how the popover is triggered: click, hover, focus, manual.
This chapter discusses about placeholders. A placeholder refers to a temporary text or image that is displayed in an input field or container until the user enters some data or the actual content is loaded.
Placeholders are commonly used to provide hints or examples of the expected input format. They are used for the enhancement and customization of the application.
Some key points to remember:
Placeholders are only displayed when the input field or container is empty.
The placeholders provide visual cues and improve the user experience.
How it works
Placeholders can be created using the class .placeholder and a grid column, such as .col-6 to set the width of the placeholder.
Once some content is been added to the textarea, the placeholder disappears and is replaced by the entered data.
Additional styling can be applied to the .btns via ::before, such that the height is respected.
The same pattern can be extended in other cases as well, or you can add within an element to show the height, when actual text is added.
Create placeholders
Here’s an example of how to create placeholders:https://www.tutorialspoint.com/bootstrap/examples/placeholders_create.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Placeholders</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"><h4>Placeholders example</h4><div class="card"><img src="/bootstrap/images/template.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card without placeholders</h5><p class="card-text">An example showing a card without the placeholders.</p><a href="#" class="btn btn-primary">Go</a></div></div><div class="card" aria-hidden="true"><img src="/bootstrap/images/template.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">
In order to make the placeholder hidden from the screen readers, use aria-hidden="true". Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/placeholders_create_hidden.php
Example
You can edit and try running this code using the Edit & Run option.
Width of the placeholders can be modified through grid column classes, such as col-6, utilities such as w-50, or inline styles such as style="width: 75%;".
Let us see the example for modifying the width of the placeholders:https://www.tutorialspoint.com/bootstrap/examples/placeholders_width.php
Example
You can edit and try running this code using the Edit & Run option.
Sizing of placeholders can be customized using the modifiers, such as .placeholder-lg, .placeholder-sm, or .placeholder-xs, as the the size of the placeholders depend on the style of the parent element.
Let us see an example of sizing of placeholders:https://www.tutorialspoint.com/bootstrap/examples/placeholders_sizing.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about the pagination. Pagination is a component that allows you to display a list of items across multiple pages. It provides a simple way to navigate through a large set of data by splitting it into smaller, more manageable chunks. In order to identify it as a navigation section to screen readers and other assistive technologies, use the wrapping <nav> element.
There could be more than one navigation section on pages, so it is advised to provide a descriptive aria-label for the <nav> element, so that the right purpose is served.
Like, if the pagination component is used by an online store selling shoes for navigating between a set of products (shoes) available, an appropriate label could be aria-label=”Search shoes”.
Simple Pagination
In order to create a basic pagination, add the .pagination class to an <ul> element. To each <li> element add the .page-item and a .page-link class to the link inside it.https://www.tutorialspoint.com/bootstrap/examples/simple_pagination.php
Example
You can edit and try running this code using the Edit & Run option.
Let’s look at how to insert a symbol or icon in place of some pagination link text. For screen readers to operate effectively, users must use correct aria attributes.https://www.tutorialspoint.com/bootstrap/examples/pagination_with_icons.php
Example
You can edit and try running this code using the Edit & Run option.
Pagination links can be modified based on the circumstances. For links that don’t appear to be clickable, use .disabled class, and use .active class to show the current page that is now being viewed.
Users can use .disabled class for un-clickable links
The alignment options can be used to control the positioning of pagination components on a web page.
Horizontally left alignment is the default for pagination. As demonstrated below, add the class .justify-content-center to the .pagination base class to centre it on the page.https://www.tutorialspoint.com/bootstrap/examples/pagination_alignment_to_center.php
Example
You can edit and try running this code using the Edit & Run option.
Refer the various classes provided under flex utilities to set the alignment of the pagination component. Alignment can be set as left, center, right, and many more using flexbox utilities.https://www.tutorialspoint.com/bootstrap/examples/pagination_alignment_using_flex.php
Example
You can edit and try running this code using the Edit & Run option.
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.