Open In App

Bootstrap 5 Components Reference

Last Updated : 01 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Components enable the user to make their own Components and can include more functionality by adding the Accordion, Alerts, Badge, Breadcrumb, Buttons, etc, which help to enhance the overall user experience, along with engaging the users on their sites by decorating them.

The complete list of Components is listed below with their brief description:

Accordion

Bootstrap 5 Accordion is an essential part of modern web development that allows users to organize and present content in a structured and intuitive manner.

Components

Descriptions

Flush Accordion Flush is a type of accordion who are more edge-to-edge with the parent container.
Always open Accordion Always open is used to change the default value of Accordion and change it to always-open
Sass Accordion SASS can be used to change the default values provided for the accordion by customizing the SCSS file of Bootstrap 5.

Alerts

Bootstrap 5 Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages. 

Components

Descriptions

Link color Alerts Link Color class is used to set the color of the alert element.
Additional content Alerts help inform users about particular events or give acknowledgment.
Icons Alerts Icons are used to add icons to the alert bar to format the bar and make it more informative.
Dismissing It provides a feature to dismiss the alerts inline and to enable alerts dismissing we need to add the .alert-dismissible class to the alert, and the data-bs-dismiss=”alert” attribute to the close button.
Sass Alerts SASS can be used to change the default values provided for the alert by customizing the SCSS file.
JavaScript behavior Alerts JavaScript behavior provides to enable the dismissal of an alert when an action is triggered.
Triggers Alert Triggers are used to close an alert.
Methods Alerts methods that are used to control the visibility of the alert component.
Events Alerts JavaScript behavior Events fired when interacting with Bootstrap 5 Alerts.

Badges

Bootstrap 5 Badges are used for creating labels. Badges scale to match the size of the immediate parent element by using relative font sizing.

Components

Descriptions

Headings Badge headings can be used to label the latest information about the headings.
Buttons we will see the use of Badges on Buttons by using the badges class on Buttons.
Positioned It is used to position the badge in the corner of the button or to make the link look more appealing.
Background colors Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge.
Pill badges Bootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component
Sass Badges SASS is used to change the default value of badge’s font size, font color, padding, border radius, and font-weight.

Breadcrumb

Bootstrap 5 Breadcrumb are used to indicate the current page’s location within a navigational hierarchy.

Components

Descriptions

Dividers Breadcrumb Dividers are created using the content property of the “::before” element.
Variables Breadcrumb SASS variables can be used to change the default values provided for the breadcrumb by customizing scss file of Bootstrap5.

Buttons

Bootstrap 5 Buttons is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Buttons are the components provided to create various buttons.

Components

Descriptions

Disable text wrapping Buttons Disable text wrapping is used if you don’t want to wrap the button text.
Button tags Buttons Button tags are used to create buttons using <a>, <button>, and <input> elements.
Outline buttons Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color.
Sizes Bootstrap 5 provides 2 different classes that allow changing the button sizes.
Disabled state The disabled option is used to create a button with the disabled state.
Block buttons Block buttons are used to display the full-width responsive buttons.
Button plugin buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods
Toggle states Buttons Toggle states are used to change the button states.
Methods Bootstrap 5 has specially designed buttons that can be used in different utilities and the buttons can be used.
Sass SASS can be used to change the default values provided for the buttons by customizing scss file of bootstrap 5.

Button Group

Bootstrap 5 Button Group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line.

Components

Descriptions

Mixed styles Button group is a component that helps to combine the buttons in a series in a single line.
Outlined styles Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line.
Checkbox and radio button groups checkbox and radio button group provide to combine the button, such as checkbox and radio toggle buttons in a button group, by implementing the .btn-group class.
Button toolbar Button Group Buttons toolbar components are used to create a toolbar of Button groups.
Sizing Bootstrap 5 provides different classes that allow changing button group sizes.
Nesting Bootstrap 5 Button group nesting is used to create a dropdown menu mixed with a series of buttons
Vertical variation The vertical group variation is used to stack the button group vertically rather than horizontally.

Card

Bootstrap 5 Card provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers

Components

Descriptions

Body Bootstrap 5 Cards Body is used to create the card’s body is the main part of the card which contains the title, sub-title all the things that a card contains.
Titles, text, and links Cards Titles, text, and links are used to add a title, text content, and links to a card.
Images ootstrap 5 Cards Images facilitates adding the image to the card, which may contain the content.
List groups Cards List groups are used to create a group of lists inside the card to show information like features, pricing, and many more.
Kitchen sink The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options.
Sizing Cards Sizing can set the width of the card using custom CSS, grid classes, grid Sass mixins, or utilities.
Using utilities Cards Using utilities: The height and weight of the card can be set up using card utilities.
Using custom CSS card component provides a flexible and extensible content container with multiple variants and options.
Text alignment A card is a flexible and extensible content container that shows the information overview shortly.
Navigation Cards navigation refers to a user interface design pattern where related information is organized into individual cards that can be interacted with and rearranged for easy viewing and access.
Image caps Images can be used similarly to headers and footers of the cards. These images are called Card Image Caps.
Image Overlays With the help of this feature, the image can be modified into a card background, along with overlaying text into the card.
Horizontal Cards Horizontal is used to make the card horizontal so the image and content can be placed side by side.
Card styles A card is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.
Border Cards Border is part of the utilities that can be used to add borders on cards.
Mixins utilities In Bootstrap 5, the cards can have additional headers and footers and their backgrounds can be made completely transparent using the .bg-transparent class.
Card layout Cards layout facilitates a variety of classes to be used for styling the content within the cards component, although, there are no responsive layout options available yet in Bootstrap.
Grid cards Grid Cards is a way to have a grid of cards put beside one another and they completely act like a grid.
Masonry Cards Masonry is a grid layout that uses space optimization and displays cards in the most space-efficient way and also looks beautiful.
Sass Cards SASS can be used to change the default values provided for the card by customizing scss file.

Carousel

Bootstrap 5 Carousel provides a slideshow component for cycling through elements.

Components

Descriptions

Slides only Carousel Slides only is a type of carousel where there is nothing in the slides of the carousel like the previous, next buttons, captions, and indicators.
With controls Carousel With controls means we can add controls to the Carousel for changing the slides of the carousel.
With indicators Carousel With indicators are used to create indicators in the carousel. We can click on these indicators, to change from one slide to another.
With captions Carousel With captions means we can add a class carousel-caption to the carousel items to add a caption for them.
Crossfade Carousel Crossfade is used to create a carousel animate slide show effect in Crossfade style.
Individual .carousel-item interval Carousel Individual .carousel-item interval is used to give time intervals to individual carousel items by which the carousel items will be automatically cycled at the given intervals of time.
Disable touch swiping Carousel Disable Touch Swiping can be used to disable the left/right swipe of the slides with touch on a touchscreen
Dark variant Carousel Dark variant is by default, controls, indicators, and captions have white colors.
Custom transition Bootstrap 5 Carousel transition can be customized with the help of the SASS variables that help to set the duration of the transition.
Sass SASS has a set of variables with default values that can be changed to customize the Carousel.
Options Carousel options can be used to customize the carousel and use it more efficiently.
Methods Bootstrap 5 Carousel Methods are used with JavaScript to implement different settings and variations to the carousel.

Close Button

Bootstrap 5 Close Button provides a new component which can be used for dismissing content like modals and alerts.

Components

Descriptions

Disabled state Close button Disabled state is used to disable the close button for dismissing content like modals and alerts.
White variant Bootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components.
Sass Close button SASS can be used to change the default values provided for the close button by customizing scss file of bootstrap 5.

Collapse

Bootstrap 5 Collapse is used to toggle the visibility of content across your project with a few classes and the JavaScript plugins.

Components

Descriptions

Multiple targets Collapse multiple targets can be used to show or hide multiple elements by assigning them a common group and using a single <button> or <a> tag to hide/show them.
Sass Collapse SASS can be used to change the default value of transition duration and transition timing of the height property collapsible component.
Usage Collapse is a component used to create collapsible content panels. It allows you to hide and show content on demand.
Via data attributes Collapse can also be controlled by using the data attributes.
Via JavaScript Collapse can be triggered using two ways using data attributes and using JavaScript.
Options collapse options are used to group the collapsible elements under a single parent.
Methods Collapse Methods are used to control the visibility of a Bootstrap 5 Collapse element, manually.
Events In this article, we will learn about the Bootstrap 5 Collapse Events fired when interacting with the Bootstrap 5 Collapse element

Dropdowns

Bootstrap 5 Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Components

Descriptions

Single button Bootstrap 5 Dropdowns Single button is used to turn a button into a dropdown toggle with some basic markup.
Split button Bootstrap 5 Dropdowns split button is used to turn a button into a dropdown toggle with some basic markup.
Sizing Bootstrap 5 Dropdowns SizingBootstrap 5 Dropdowns Sizing is used to create dropdowns on different sizes of buttons.
Dark dropdowns Bootstrap 5 Dropdowns Dark dropdowns are needed to match the navbar or site theme.
Directions Bootstrap 5 Dropdowns Directions are used to change the direction in which we want the dropdown to pop up
Dropup Bootstrap 5 Dropdowns Dropup is used to show dropdown menus above the parent elements by using the .dropup class.
Dropright Dropdowns Dropright is used to open the dropdown on the right-hand side of the user, We can one the dropdowns anywhere
Dropleft Bootstrap 5 Dropdowns Dropleft is used to open the dropdown on the left-hand side of the user.
Menu items Bootstrap 5 Dropdowns Menu items are a list of options on a website that appears only when a user interacts with the menu, like by clicking on it or hovering over it.
Active Dropdowns Active helps to set the state of any item in the dropdown menu as active.
Disabled Dropdowns Disabled is used to disable some text items in the dropdown.
Menu alignment Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
Responsive alignment Bootstrap 5 Dropdowns Responsive alignment is used to align dropdowns by using the responsive variation classes.
Alignment options In Bootstrap 5 we can use classes on the dropdown container to make it aligned as per need.
Menu content Bootstrap Dropdowns are one of the most important parts of an interactive website.
Headers Bootstrap 5 Dropdowns Menu content Headers are used to add a header/title to the menu in the dropdown.
Dividers Bootstrap 5 Dropdowns Menu content Headers are used to add a header/title to the menu in the dropdown.
Text Bootstrap 5 Dropdowns Menu Content text is placed in the freeform in the dropdown menu.
Forms Bootstrap 5 Dropdown Menus in forms is a form element that displays a list of options, allowing the user to select one.
Dropdown options Bootstrap 5 Dropdowns Options can be passed through the data attributes or JavaScript.
Auto close behavior Bootstrap 5 Dropdowns Auto close behavior is used to make the dropdowns close when we click outside of that dropdown or that particular button.
Sass Bootstrap 5 Dropdown SASS can be used to change the default values provided for the dropdowns by customizing SCSS file.
Usage Bootstrap 5 dropdowns allow users to display a list of options that can be selected by clicking on a button or link.
Via data attributes Bootstrap 5 Dropdowns Via data attributes allow you to add your own information to tags.
Via JavaScript Bootstrap 5 Dropdowns can be triggered or used using two ways via data attributes and JavaScript.
Options Bootstrap 5 Dropdowns Options can be passed through the data attributes or JavaScript.
Methods In Bootstrap 5 Dropdowns, there are pre-defined methods that we can use to trigger different types of functionalities in dropdowns.
Events In this article, we will learn about the Bootstrap 5 Dropdowns events fired when interacting with the Bootstrap 5 dropdown.

List Group

Bootstrap 5 List groups are a flexible and powerful component for displaying a series of content.

Components

Descriptions

Active items Bootstrap 5 provides the List Group Active feature in which items are stored in form of a list.
Disabled items Bootstrap 5 provides the List Group disabled items feature in which items are stored in form of a list.
Links and buttons Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list.
Flush Bootstrap 5 provides the List Group Flush feature in which items are stored in the form of a list.
Numbered which is used to keep items in the form of a list and display them sequentially through the use of numbers.
Horizontal Bootstrap 5 List group Horizontal facilitates to modification & alignment of the structure of the list group items from vertical to horizontal
Contextual classes Bootstrap 5 List group Contextual classes are used to style list-group-items with different backgrounds and colors.
With badges Bootstrap 5 List group with badges can be used to add badges to the list group item to indicate the count of objects.
Custom content Bootstrap 5 List Group Custom content allows us to use HTML inside the list, here, the term custom Content” refers to HTML, therefore any HTML elements can be used inside, including anchor tags, paragraph tags, divs, photos, and many more.
Checkboxes and radios Bootstrap 5 List group Checkboxes and radios use .list-group and .list-group-item classes to create a list of items.
Sass Bootstrap 5 List Group SASS can be used to change the default values provided for the list group by customizing scss file of bootstrap 5.
JavaScript behavior Bootstrap5 list group JavaScript behavior is used to generate tabbable panes of local material by expanding our list group.
Using data attributes Bootstrap 5 List group Using data attributes allows you to add your own information to tags.
Fade effect Bootstrap 5 List group Fade effect is used to fade the visible element. This fade effect hides or shows an element by fading it. A fade-in effect begins with a solid color and then fades.
Methods Bootstrap 5 List Group methods that are used to control the visibility of the List Group component. For example, these methods can be used to show a list of group components, or dispose of them.
show Bootstrap 5 List Group shows a series of content to the user.
dispose Bootstrap’s List group dispose() Method is utilized to dispose of a tab of the list group.
getInstance Bootstrap 5 List Group getInstance() method is used to get the instance of the tab attached with the DOM element passes as the parameter.
getOrCreateInstance ootstrap List group getOrCreateInstance() method is used to obtain the instance of a particular tab of the list Group.
Events In this article, we will learn about the Bootstrap 5 List Group events fired when interacting with the Bootstrap 5 List Group.

Modal

Bootstrap 5 Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Components

Descriptions

Modal components A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals.
Live demo Bootstrap 5 Modal live demo demonstrates the toggle of a working modal by clicking a button that opens a modal.
Static backdrop Bootstrap 5 Modal Static backdrop facilitates the modal that will not be going to be closed while clicking outside of the modal, by setting the backdrop to static.
Scrolling long content Bootstrap 5 Modal Scrolling long content is used when modal body content becomes very large then it becomes scrollable.
Vertically centered Bootstrap 5 Modal Vertically Centered is used to make the modal centered aligned. Modals are positioned over everything else in the document and the scroll gets removed from the <body> so that modal content scrolls instead.
Tooltips and popovers Bootstrap 5 Modal Tooltips and Popovers can be used to display additional information to the users about the modal content.
Using the grid Bootstrap 5 Modal Using the grid can add content which can be anything from text to images to anything we want.
Varying modal content Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button.
Toggle between modals Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals,
Change animation Bootstrap 5 Modal Change animation facilitates several variables that determine the animation transformation state of the modal, along with setting the zoom-in & zoom-out animation for the modal
Remove animation Bootstrap 5 Modal is used to show dialogues to the frontend user using bootstrap’s JavaScript library.
Dynamic heights A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals.
Optional sizes Bootstrap 5 Modal Optional sizes have different optional sizes, to be placed along with the modal-dialog class.
Fullscreen Modal Bootstrap 5 Fullscreen Modal is used to create a modal that completely covers the entire screen of the user.
Usage Bootstrap 5 Modal plugin is used to create a customized webpage where we can add dialog boxes for user notifications and lightboxes.
Via data attributes Bootstrap 5 Modal Via data attributes can activate a modal, by setting data-bs-toggle=”modal” on an element, like a button.
Via JavaScript Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Options Bootstrap 5 Modal option can be used in two ways using data attributes and using JavaScript.
Passing options Bootstrap 5 Modal can be triggered in two ways using data attributes and using JavaScript.
toggle The Bootstrap 5 Modal toggle() method is used to directly toggle a modal i.e. show or hide.
handleUpdate A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals.
dispose Bootstrap 5 modal provides us with some utility methods and they can be used to manage the modal in different ways.
getInstance Bootstrap 5 Modal getInstance() method is used to get the modal instance from a DOM element if exists.
getOrCreateInstance Bootstrap 5 Modal getOrCreateInstance() method is used to get the modal instance from a DOM element if it exists or to create a new example for the same element if not exist.
Events Bootstrap5 Modal Events are the functionality provided by bootstrap to be added to the modals.

Navs and tabs

Navs and tabs are the components given in bootstrap for navigation list of all the nav and tab are given below

Components

Descriptions

Base nav Bootstrap 5 Navbar Nav is used to make the navbar according to our own needs, like navbar navigation links build on .nav options with their own modifier class.
Available styles to build your own , mix and match all the components if boot strap
Horizontal alignment nav are left-aligned you can easly change it to center with the help of flex box utilites
Vertical Bootstrap 5 Vertical alignment classes provided by Bootstrap 5 are used to align inline, inline-block, inline-table, and table cell elements vertically.
Tabs Tabs are navigation components they make website user-friendly
Pills Tabs are navigation components they make website user-friendly
Fill and justify fill and justify use to get the full availability of width in two modifier class
Working with flex utilities Flex utilities are use for great responsive nav variation with the help of these we can do great customizing accross all the backpoints
Regarding accessibility Even if they are visually formatted as tabs using the.nav-tabs class, navigation bars should not utilize the role=”tablist”, “tab”, or “tabpanel” properties.
 
Using dropdowns Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes
JavaScript behavior In addition to this, alert instances can be created with the help of the alert constructor. Although, there are a few events that enable the alert functionality by implementing Bootstrap’s alert plugin.
Methods To customize the usage of a user predefined methods can be used with JavaScript.

Navbar

Bootstrap 5 Navebar use for responsive navigation of header. they also make building , navigation user-friendly.

Components

Descriptions

Supported content Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll.
Brand Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar.
Text A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.
Image Bootstrap 5 Navbar Brand Image is used to put the image inside of a navbar. a navbar can contain images and text.
Image and text Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it.
Nav Bootstrap 5 Navbar Nav is used to make the navbar according to our own needs, like navbar navigation links build on .nav options with their own modifier class.
Forms Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar.
Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features.
Color schemes Bootstrap 5 Navbar Color schemes is used to customize a navbar using navbar light and dark themes, along with background color utilities.
Containers The container layout can define the main frame of the page using header, content, sidebar, and footer components.
Placement A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.
Scrolling Bootstrap 5 Navbar Scrolling enables vertical navigation scrolling within the toggleable contents
Responsive behaviors Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button
Toggler Bootstrap 5 Navbar has an amazing feature that makes it very innovatively responsive to different screen and viewport sizes which is its transformation into the Toggler.
External content The collapse plugin can be used to trigger a container element for content that structurally sits outside of the Bootstrap 5 Navbar.
Sass Bootstrap 5 Navbar SASS can be used to change the default values provided for the navigation bar by customizing scss file of bootstrap 5.

Offcanvas

Bootstrap 5 OffCanvas components constitute an offcanvas are a header with a close button and a body section which is optional and we can also add some action buttons on the footer section which are optional too.

Components

Descriptions

Offcanvas components Bootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar.
Live demo Bootstrap 5 Offcanvas live demo of Offcanvas can be implemented using a link with href attribute or button with data-bs-target attribute by applying javascript to the element.
Placement Bootstrap 5 Offcanvas Placement has four directions from which the carousel can pop out which are left(default), top, bottom, and right.
Backdrop Bootstrap 5 Offcanvas Backdrop is the greyish translucent cover that is all over the background which is shown when the off-canvas opens.
Sass Bootstrap 5 Offcanvas SASS can be used to change the default values provided for the Offcanvas by customizing scss file of bootstrap5.
Usage Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element’s display.
Via data attributes An Offcanvas can be triggered or used using two ways using data attributes and using JavaScript.
Via JavaScript Bootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript.
Options Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element’s display
Methods Bootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually.
Events Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas.

Popovers

Bootstrap 5 Popovers are a feature that allows you to add small overlays of content to a page.

Components

Descriptions

Four directions The popover is a bootstrap component used to mainly add additional information to a website.
Dismiss on next click The popover is an attribute of bootstrap used to make the website look more effective.
Disabled elements Bootstrap 5 Popovers are an amazing way to show some quick information when hovered over a button or anchor or span tag.
Sass Bootstrap 5 Popovers SASS has a set of variables that are usually set to a default value but it can be changed accordingly to customize the Popover.
Usage Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element.
Options Bootstrap 5 Popovers are small overlays that can be displayed on top of content to provide additional context or action options.
Using function with popperConfig Bootstrap 5 Popover is a feature of Bootstrap that allow you to display a small popup over the element when an element is clicked or hovered over.
show Bootstrap 5 Popovers show() method is used to open the popover manually. It will show the popover before the actual shown.bs.popover event occurs.
hide Bootstrap 5 Popovers hide() Method hides the popover for an element.
toggle Bootstrap 5 Popovers toggle() method is used to toggle the visibility of the popover.
dispose Bootstrap 5 Popover is an attribute in bootstrap that can be used to make any website look more dynamic.
enable Bootstrap 5 Popovers are a feature that allows you to add small overlays of content to a page.
disable Bootstrap 5 popover disable() method is used to disable the element’s popover to be displayed.
toggleEnabled Bootstrap 5 Popovers toggleEnabled() method is used to toggle between the enabled and disabled state of the popover.
update Bootstrap5 Popovers update() method is used to re-calculate the position of the popover based on any changes in the content or size.
getInstance Bootstrap 5 Popover getInstance() method is used to get the already existing instance of the bootstrap Popover and return that instance to the caller.
getOrCreateInstance Bootstrap 5 Popovers getOrCreateInstance() method is used to obtain the instance of tooltips while the tooltips are being used
Events Bootstrap 5 Popovers Events start off when the different popover instances are initiated
 

Pagination

Pagination is used to enable navigation between pages in a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and are easily scalable.

Components

Descriptions

Overview Bootstrap is a free and open-source tool collection for creating responsive websites and web applications.
Working with icons An icon is a visual representation that helps to understand the website & also helps to navigate through the website.
Disabled and active states The pagination links could be styled to make them appear unclickable by using the .disabled class.
Sizing Sizing is a set of utility classes used to set the height and width of the element.
Alignment This class is added inside the component which helps to align the pagination in rows. This is the default value.
Sass It offers the Fastclick.js tool for faster rendering on mobile devices.
Variables Variables facilitates the _variables.scss that is used to indicate the variables.
Mixins The Mixins can be used to create the form validation feedback styles.

Progress

Bootstrap 5 progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left.

Components

Descriptions

Labels Bootstrap 5 Progress Labels are used to display the progress of a process on a computer.
Height Bootstrap 5 Progress Height is used to set the height of the progress bar.
Backgrounds The Bootstrap 5 Progress is used to show the progress of a task to the user.
Multiple bars Bootstrap 5 Progress Multiple bars is used to put multiple bars in a single progress bar you can include multiple progress bars in a progress component giving them different colors and styling using bootstrap 5 classes.
Striped The Bootstrap 5 progress bar is used to show the progress of a task to the user.
Animated stripes Bootstrap 5 Progress Animated stripes are used to make the stripes progress bar animated.
Sass Bootstrap 5 Progress SASS has a set of variables with default values and keyframes which are used to create CSS animations for the progress bars.

Scrollspy

Bootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position.

Components

Descriptions

in navbar Bootstrap 5 Scrollspy in Navbar is used to apply the Scrollspy on the Navbar.
with nested nav Bootstrap 5 Scrollspy is one of the features which targets the navigation bar contents automatically on scrolling the area.
with list-group In Bootstrap 5, one of the features is Bootstrap Scrollspy which targets the navigation bar contents automatically on scrolling through the area.
data attributes Bootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation.
JavaScript In this article, we will see how to use Scrollspy in Bootstrap 5 via Javascript.
Methods Bootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing,
refresh Bootstrap 5 Scrollspy provides a refresh() method that is invoked while including or discarding the elements in the DOM tree,
dispose Bootstrap 5 Scrollspy dispose() method is used to remove the ScrollSpy functionality from an element
getInstance Bootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing of, getting or creating the Scrollspy instance
getOrCreateInstance Bootstrap 5 Scrollspy getOrCreateInstance() method is used to obtain the instance of a particular tab of the list group.
Options Bootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position.

Spinners

Bootstrap 5 spinners are used to specify the loading state of a component or webpage.

Components

Descriptions

Border spinner Bootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS
Growing spinner Bootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS
Alignment Bootstrap 5 Spinners Alignment is used to set the alignment of the spinner element.
Margin Bootstrap 5 Spinners Margin is used to create spinners in different margins.
Placement Bootstrap 5 Spinners Placement is used to set the position of spinners where you want to place them according to the need.
Flex Bootstrap5 Spinner Flex Placements is a display utility that is used to place the spinner in a flexbox, where the spinner is placed inside the flexbox container using the .d-flex class.
Floats Bootstrap 5 Spinners Float Placements are used to set the position of spinner elements to left, right, or none depending on the requirements.
Text align Bootstrap 5 Spinners Float Placements are used to set the position of spinner elements to left, right, or none depending on the requirements.
Size

Bootstrap 5 Spinners Size is used to create spinners in different sizes

.

Buttons Bootstrap 5 Spinners are used to display the loading state of a component or a page.
Sass Bootstrap 5 Spinners SASS has a set of variables with default values and keyframes which are used to create CSS animations for the spinners.

Toasts

Bootstrap 5 Toasts are notifications or messages which the users receive whenever they perform certain actions. They can easily be customized.

Components

Descriptions

Basic Bootstrap 5 Toasts Basic is used to show the alert notifications.
Live Bootstrap 5 Toasts Live is used to show the alert notifications.
Translucent Bootstrap 5 provides the Toasts which are used to show the alert notifications.
Stacking Bootstrap 5 Toasts Stacking feature is used to wrap multiple toasts in a toast container which will increase the vertical spacing.
Custom content Bootstrap 5 Toasts Custom content is used to add your own markup by removing sub-components.
Color schemes Toasts are a type of alert box that is used to show a message or an update to the user.
Placement Bootstrap 5 Toasts which are used to show the alert notifications.
Accessibility Toasts are the basic push notifications sent to the user its similar to the alert box.
Sass Bootstrap 5 Toasts SASS has a set of variables with default values that can be changed to customize the toasts.
Options Bootstrap 5 Toasts Options available a few features like enable/disable, auto-hide, etc.
Methods Bootstrap 5 Toasts Methods are used to perform some specific tasks on toasts like the show, hide, etc methods
show Bootstrap 5 Toasts are a type of alert box that is used to show a message or an update to the user.
hide Bootstrap 5 Toasts are a type of alert box that is used to show a message or an update to the user.
dispose Bootstrap 5 Toasts dispose() method stops a toast from being displayed on the webpage.
getInstance Bootstrap 5 Toast getInstance() method is used to get the already existing instance of the bootstrap Toast and return it to the caller.
getOrCreateInstance Bootstrap 5 Toast getOrCreateInstance() Method is used to get the already existing instance or create a new instance and return that to the caller.
Events Bootstrap5 Toasts Events are events that take place when the toast triggers a specific instance method.

Tooltips

Bootstrap 5 Tooltips is used to provide interactive textual hints to the user about the element when the mouse pointer moves over.

Components

Descriptions

Enable tooltips everywhere Bootstrap 5 Tooltips can be enabled everywhere by first creating a list of all the tooltips and then enabling each of them.
Usage Bootstrap 5 Tooltips usage is used to create the markup and the text on the elements when required, and the tooltip created is placed after the element that was triggered.
Markup Bootstrap 5 Tooltip is one of the components which provide small, interactive, textual hints for elements. 
Disabled elements Bootstrap 5 Tooltips are a JavaScript plugin that allows you to add small, interactive, text-based hints to elements on your web page.
Options Bootstrap 5 Tooltip usage options can be passed through the data attributes or via javascript.
Using function with popperConfig Bootstrap 5 Tooltips Using function with popperConfig facilitates an interface that allows us to change the default Popper Configuration.
Methods Bootstrap 5 Tooltips facilitates some pre-defined methods that we can use to trigger different types of functionalities in tooltips.
show Bootstrap 5 Tooltip is a UI element that shows some extra information when the user hovers over or focuses on a tooltip-enabled element.
hide Bootstrap 5 Tooltip is used to show some extra information to the user when the user hovers over the element.
toggle Bootstrap 5 Tooltips toggle() method is used to toggle a tooltip’s visibility manually.
dispose Bootstrap 5 Tooltips dispose() method is used to manually destroy a tooltip.
enable Bootstrap 5 Tooltips enable method. This method is used to enable a tooltip’s ability to be shown.
disable Bootstrap 5 Tooltips disable() method is used to remove a tooltip’s ability to be visible, manually.
toggleEnabled A tooltip is a UI element that is used to show some extra information when the user hovers over or focuses on a tooltip-enabled element. 
update Bootstrap 5 Tooltip is used to show some extra information to the user when the user hovers over the element or when the element with the tooltip is in focus.
getInstance Bootstrap Tooltips getInstance() Method is used to obtain the instance of tooltips while the tooltips are being used.
getOrCreateInstance Bootstrap Tooltips getOrCreateInstance() method is used to obtain the instance of tooltips while the tooltips are being used. 
Events Bootstrap 5 Tooltip is used to show additional information about an element when it is hovered by the user or comes into focus.


Previous Article
Next Article

Similar Reads

Differences between Functional Components and Class Components
In this article, we will learn about the differences between functional and class components in React with the help of an example. We will create a counter and implement it using both class and functional components to understand the differences practically. Functional Components Functional components are some of the more common components that wil
4 min read
Why it is Recommended to use Functional Components over Class Components ?
In this article, we will learn about the use of the functional component over the class component. In React JS, there are two main types of components:  Functional Components Class Components.Functional Components are JavaScript functions that take in props as an argument and return a React element to be rendered. They are simpler and less verbose
4 min read
How do Styled Components work in terms of styling React components?
Styled Components is a library for React and React Native that allows you to write CSS in your JavaScript code in a more component-oriented way. Working of Styled Components:Component-Based Styling: Styled Components allow you to write actual CSS directly into your JavaScript files using tagged template literals. This means you can define styles fo
2 min read
Migrating from Class Components to Functional Components in React
React version 16.8.0 or higher allows users to write the functional components without the use of class components. Using class components, we need to write the whole class to interact with the state and lifecycle of the component. The code was quite complex and harder to understand which led to lower performance and limited usability. With the hel
4 min read
Use nested Components With Standalone Components in Angular 17
Angular 17 introduced a new feature called Standalone Components, which allows you to create self-contained components that can be used independently without being tied to a specific module. This feature can make your code more modular and easier to maintain. However, when working with Standalone Components, you might need to nest components within
3 min read
ReactJS Components Complete Reference
Components are bits of code that are freelance and reusable. They serve a similar purpose as JavaScript functions. However, work isolation and returns HTML via a render function. A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called compo
2 min read
Primer CSS Components Complete Reference
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other Primer CSS Alerts Primer CSS Alerts DefaultPrimer CSS Alerts ColorsPrimer CSS Alerts Wit
3 min read
Blaze UI Components Complete Reference
Blaze UI is a free &amp; open-source (MIT License) Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation Blaze UI Components List: Blaze UI Accordions Blaze UI Addresses Blaze UI Alerts Blaze UI Alerts AttributesBlaze UI Alerts MethodsBlaze UI AutocompleteBl
3 min read
Spectre Components Complete Reference
Spectre is a lightweight, responsive, and modern CSS framework, which provides extensible with faster development. There are various components available in the Spectre framework. Below example illustrate the example of Spectre Accordion: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href= &quot;http
3 min read
Bulma Components Complete Reference
Bulma Components contain various classes that are used to build the different portions of the web application which includes the Breadcrumb component that improves the navigation experience, card component that can be used to add details. Several such components are helpful to building an attractive web application. The table form of complete refer
6 min read