Bootstrap 5 Components Reference
Last Updated :
01 Dec, 2023
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. |
Similar Reads
Bootstrap 5 Tutorial Bootstrap 5 is a front-end framework that helps developers create responsive and visually appealing websites quickly and efficiently. Bootstrap 5 simplifies the process of web development with its intuitive design system and extensive components. This version includes improved responsiveness, stream
6 min read
Bootstrap 5 Introduction Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to
4 min read
Layout
Bootstrap 5 Layout BreakpointsBootstrap 5 layout breakpoints are specific screen widths at which the appearance and behavior of elements on a webpage change. These breakpoints enable responsive design, adjusting content layout and design for various devices, like mobile, tablet, and desktop.Core Concept:Breakpoints in responsive
3 min read
Bootstrap 5 Layout ContainersBootstrap5 Layout Containers are considered the most basic layout that can be used and they can be used to contain other layouts. Containers are basically used to add pad the contents inside or center the items inside the container. In this article, we'll see Bootstrap 5 Layout Containers.Layout Con
3 min read
BootStrap 5 Layout Grid SystemBootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns across the page. You can also group the columns together. The grid system is a powerful mobile-first responsive flexbox grid. How it works: Here’s how the grid system comes together: Its grid supports si
3 min read
Bootstrap 5 ColumnsBootstrap 5 Columns facilitates the different option for the alignment, ordering, and offsetting of the Columns with the help of flexbox grid system. The different available column classes can be utilized to manage widths of non-grid elements. Bootstrap 5 Columns: The following components is used th
2 min read
Bootstrap 5 GuttersBootstrap 5 Gutters are used to give padding between columns, responsively space, and align content to the grid system. How gutters works? Using the .padding-right and .padding-left classes, we can add padding to the right and left of each column. Gutters, which are produced by horizontal padding, a
2 min read
Bootstrap 5 UtilitiesBootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content. Bootstrap 5 utilities for layout: Changing display: Bootstrap 5 provides some displa
2 min read
Bootstrap 5 Z-indexIn Bootstrap 5, the z-index property controls the stacking order of elements. It defines the depth of an element along the z-axis, determining which elements appear above others. Higher values place elements closer to the foreground, while lower values move them to the background. Bootstrap 5 z-inde
2 min read
Content
Bootstrap RebootBootstrap Reboot is used to reboot all the styles of some specific elements. It normalizes HTML elements with opinionated styles, sets better defaults for <html> and <body> elements, optimizes text rendering with native font stacks, and resets margins, paddings, and other styles for cons
2 min read
Bootstrap 5 TypographyBootstrap 5 Typography styles and formats text, providing customized headings, subheadings, lists, paragraphs, and font styles. It supports global settings for font stack, headings, link styles, ensuring consistency across devices. Here's the information represented in a table format: TermDescriptio
2 min read
Bootstrap 5 ImagesBootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.Types of Images:TermDescriptionResponsive imagesResize images according to parent element and scre
1 min read
Bootstrap 5 TablesBootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Bootstrap 5 Tables:
2 min read
Bootstrap 5 FiguresA Bootstrap5 Figures is a component that provides a way to display a piece of content along with an image. If we want to show the image with an optional component, the figure class in Bootstrap 5 is used. Bootstrap 5 Figures Classes: figure: used to display content, like any image with an optional c
2 min read
Forms
Bootstrap-5 FormsForm controls: <input>, <select>, <textarea> are the tags used for general appearance like input field, select item and textareas. Â Â Â Note: To make the user interface more presentable, use properties like padding, margins as per the need. Example:Â HTML <!DOCTYPE html> <
2 min read
Bootstrap 5 Form ControlsForm controls like <input>, <select>, <textarea> are the tags used to add custom styles, sizing, focus states to  input field, select item, and text-areas etc. Below are utilities of form control:Sizing: This utility is used to set the label of the form input field in different siz
2 min read
Bootstrap 5 SelectBootstrap 5 Select form is used to create customized select elements with custom CSS that changes the element’s initial appearance. Bootstrap 5 Select Options: Default: It is used to create a default list of options from which a single option can be selected. To create a select option, we use <se
2 min read
Bootstrap 5 Checks and RadiosBootstrap 5 provides us with utility Checks and radios. This utility is used for creating checkboxes and radio without using CSS.Bootstrap 5 Checks and Radios:Checks: The checkboxes are used for selecting one or several options in a list.Radios: The radios are for selecting one option from many opti
2 min read
Bootstrap 5 RangeBootstrap 5 Range is the limit slider between values that can vary. Bootstrap provides us with a custom range of inputs that provides consistent cross-browser styling. The value and background for the range slider are both styled to look the same across all other browsers. Disabled: It is grayed out
2 min read
Bootstrap 5 Input GroupBootstrap 5 Input Group allows extending the default form controls easily by incorporating text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Bootstrap 5 facilitates several different components that can be utilized to create the basic Input gro
3 min read
Bootstrap 5 Floating labelsBootstrap 5 floating labels are form labels that float over input fields, improving UX. Wrap form controls like <input>, <label>, <textarea>, <select> inside <div> with class .form-floating. Ensure these elements precede <label> inside the floating <div>.Boo
2 min read
Forms Layout
Bootstrap 5 Layout FormsBootstrap 5 Layout forms provide control of the input field and custom positioning. All the fields should be placed inside the <form> tag. By default the form is aligned vertically as the default value for display is block and is set to 100%. We can use additional classes to change this defaul
2 min read
Bootstrap5 Layout UtilitiesBootstrap 5 Layout Utilities facilitate mobile-friendly, responsive websites. They offer numerous utility classes for tasks like displaying, hiding, aligning, and spacing content, enabling versatile modifications tailored to different design requirements. NameDescriptionChanging displayBootstrap 5 p
2 min read
Bootstrap 5 Layout Form GridBootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes. Form Grid Layout used Classes: .row: This class is used to create a row of a form
2 min read
Bootstrap 5 Layout GuttersGutters are the gaps between the columns in bootstrap's grid layout. The gutter modifier classes can be used to change the widths of the gutters. There are 3 primary gutter modifier classes that are listed below: Bootstrap5 Layout Gutter Modifier Classes: g-*: This class is used to set the width of
2 min read
Bootstrap 5 Layout Horizontal formBootstrap 5 Layout Horizontal form is used to create horizontal forms by using the .row class with .col-*-* classes to specify the width of your labels and controls. Also, use the .col-form-label class with <label> element to set the form label in vertically centered. Layout Horizontal form us
2 min read
Bootstrap 5 Layout Horizontal form label sizingBootstrap 5 Layout Horizontal form label sizing is used to set the label of the form input field in different sizes. To set the label size, use the .col-form-label-sm or .col-form-label-lg class to <label> or <legend> tag with the size of .form-control-lg and .form-control-sm. Horizontal
2 min read
Bootstrap 5 Layout Column sizingBootstrap 5 Layout Column sizing is used to set the width of the column element. To create equal widths columns, .col within .row classes are used. We can also use the subset of classes to set split the columns unequally. Layout Column sizing used Classes: .row: This class is used to create rows for
2 min read
Bootstrap 5 Layout Auto-sizingBootstrap5 layout Auto-sizing dynamically calculates the size height, width, and positions of the elements can be adjusted automatically. It uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed.Bootstrap5 Lay
2 min read
Bootstrap 5 Layout Inline formsBootstrap 5 Layout Inline forms consist of a responsive horizontal layout. All of the elements are inline and left-aligned, and labels are alongside, and only apply to forms within viewports. Bootstrap 5 Layout Inline forms used classes:row-cols-lg-auto: This class is used to create horizontal layou
2 min read
Bootstrap 5 ValidationBootstrap 5 Validation refers to the process of enhancing form input accuracy in web development. It utilizes HTML5 validation features, providing feedback to users regarding input correctness. This feature supports customization with custom styles and JavaScript for improved user experience.Bootstr
4 min read
Components
Bootstrap 5 AccordionBootstrap 5 Accordion organizes content into collapsible panels, enabling space-efficient presentation of information. It allows users to toggle between panel visibility, enhancing user experience, and content organization within web applications. iframe { width: 100%; height: 500px;} @media (max-wi
3 min read
Bootstrap 5 AlertsBootstrap 5 Alerts are customizable components used to convey important information to users. They come in various styles such as success, warning, danger, and info, providing visual feedback to users based on different actions or states within a web application. iframe { width: 100%; height: 450px;
2 min read
Bootstrap 5 BadgesBootstrap 5 Badges are small components used to highlight specific information, typically in lists or inline with other content. They provide visual cues through colored backgrounds and customizable text, helping to draw attention to key details or status indicators within a webpage or application.
2 min read
Bootstrap BreadcrumbBootstrap 5 Breadcrumb simplifies website navigation by displaying a sequential path to the current page. It enhances user experience by visually indicating the hierarchical structure of the site, facilitating easy navigation as per Bootstrap 5 documentation. Bootstrap 5 Breadcrumb TermDescriptionBr
2 min read
Bootstrap 5 ButtonsBootstrap 5 Buttons are pre-styled components in the Bootstrap framework, offering consistent design and functionality. They streamline development by providing ready-to-use button styles, sizes, and behaviors, ensuring a cohesive and responsive user interface across web applications with minimal CS
3 min read
Bootstrap 5 | Button groupBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. All types of buttons are supported by it. Syntax: <div class="btn-
4 min read
Bootstrap 5 | CardBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers
11 min read
Bootstrap 5 CarouselBootstrap 5 Carousel is a slideshow component for cycling through images or slides, allowing users to showcase multiple pieces of content in a visually appealing and interactive way. It offers various options for customization and responsive design.Bootstrap Carousel Classes:ClassDescriptioncarousel
3 min read
Bootstrap 5 | Close buttonBootstrap 5 provides a new component which is a Close button which can be used for dismissing content like modals and alerts. It can be included in the webpage using bootstrap.js or bootstrap.min.js. This component can be combined with models, alerts, and popovers. Disabled close buttons have pointe
1 min read
Bootstrap 5 CollapseBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Collapse is used to toggle the visibility of content across your project with a few classes and the JavaScript plugins which comes with Bootstrap 5. The working of collapse component is
3 min read
Bootstrap 5 DropdownsBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by
9 min read
Bootstrap 5 List groupBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. Use .list-group and .li
5 min read
Bootstrap 5 ModalBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over eve
7 min read
Navbar
Bootstrap 5 Navbar BrandBootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest. Bootstrap 5 Navbar Brand: Text: The text in the user interface is added
3 min read
Bootstrap 5 Navbar Brand TextA 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. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the nav
2 min read
Bootstrap Navbar Brand ImageBootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage. Pre-requisite: To use images
2 min read
Bootstrap 5 Navbar NavBootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like "active" for the current page. Bootstrap 5 Navbar Nav class: There is no specifi
2 min read
Bootstrap 5 Navbar FormsBootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar. Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes Syntax: <nav class="navbar"> <form> <input cl
2 min read
Bootstrap 5 Navbar TextNavbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text
2 min read
Bootstrap 5 OffcanvasBootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating responsive & dynamic websites layout and web applications. Offcanvas is one of the features of Bootstrap to make web pages more attractive, along with enhancing the user experience.Offcanvas is a s
12 min read
Bootstrap 5 PopoversBootstrap 5 Popovers Provides directional placement options (top, bottom, left, right), dismiss on click, and support for disabled elements. Styled with Sass, they feature various methods, options, and events for dynamic interaction and customization. Bootstrap 5 Popovers: AspectDescriptionFour dire
2 min read
Bootstrap 5 ProgressBootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A 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. You can add a progress bar o
5 min read
Bootstrap 5 ScrollspyBootstrap 5 Scrollspy is used to automatically update the navigation links based on the scroll position, highlighting the corresponding section in the viewport.To use scrollspy in Bootstrap 5, we need to add the data-bs-spy="scroll" attribute to the element that should be used for scrolling and spec
4 min read
Bootstrap 5 SpinnersIn this article, we will implement spinners in the website using Bootstrap & will also see the implementation of different types of spinners through the example. The spinners are used to specify the loading state of a component or webpage. Bootstrap facilitates the various classes for creating d
3 min read
Bootstrap 5 ToastsBootstrap 5 Toasts are notifications or messages which the users receive whenever they perform certain actions. They can easily be customized. Overview: Toasts need to be initialized. Apply autohide: false so that the toasts don't automatically hide.Placement: You can place toasts as you want. The t
3 min read
Bootstrap 5 TooltipsA Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. To create a tooltip, we need to add the data-bs-toggle="tooltip" attribute to an el
3 min read
Helpers
Bootstrap 5 ClearfixBootstrap 5 .clearfix helper class facilitates clearing and fixing the floated content in an element or container by adding the clearfix utility. Basically, without clearfix class, the floated content/elements act like they have a position set to absolute and to fix that, we use the clearfix helper
2 min read
Bootstrap 5 Colored linksBootstrap 5 Colored links are used to add colors to the link element. To set the colored links, we use the classes of utilities built on our theme colors. To make different color links, we will use .link-* class and add CSS styles to it. Colored links used Classes: link-primary: This class is used t
2 min read
Bootstrap 5 RatiosBootstrap 5 provides ratios, which can be used to create fixed-ratio containers. These containers maintain a specific aspect ratio, regardless of the size of the screen or the content within them. Bootstrap 5 Ratios: Aspect ratio: The proportionality between an element's height and breadth is known
2 min read
Bootstrap 5 PositionBootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.NameDescriptionposition-staticD
2 min read
Bootstrap 5 Visually hiddenBootstrap 5 Â Visually hidden are used to visually hide an element so that it does not display on the page while still allowing it to be exposed to assistive technologies. .The visually-hidden class hides the element by default and the visually-hidden-focusable class visually hides an element but dis
2 min read
Bootstrap 5 Stretched linkBootstrap 5 Stretched link is used to make any component clickable. Multiple links are not recommended. The card in bootstrap has position:relative by default, so we can easily add .stretched-link class to a link. Bootstrap 5 Stretched link class: stretched-link: It is added to <a> tag to make
2 min read
Bootstrap 5 Text TruncationBootstrap 5 is a catalog of UI components that enables developers to develop their websites and applications in less time by using the pre-built components and utility classes. This article will see Bootstrap 5 Text truncation.Text Truncation is used to truncate long statements and paragraphs using
2 min read
Extend