Bootstrap 5 Button Group Buttons toolbar Last Updated : 17 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Button Group Buttons toolbar components are used to create a toolbar of Button groups. It combines the sets of buttons in a group of button toolbars for complex components. Pre-requisite: Bootstrap 5 Button Group to create a group of buttons. Button Group Buttons toolbar Class: btn-toolbar: This class is used to give the Button group a toolbar look. Syntax: <div class="btn-toolbar" > <div class="btn-group ..." > <button type="button" class="...">....</button> .... </div> Below example illustrate the Button Group Buttons toolbar: Example 1: In this example, we will create a single Button Group Toolbar. We used a border so you can distinguish the buttons. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <title>Bootstrap 5 Button Group Buttons Toolbar</title> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Button Group BUttons Toolbar</strong> <!--Button Group Buttons Toolbar Class used --> <div class="btn-toolbar m-3"> <div class="btn-group"> <button type="button" class="btn border-primary"> Button 1 </button> <button type="button" class="btn border-primary"> Button 2 </button> <button type="button" class="btn border-primary"> Button 3 </button> <button type="button" class="btn border-primary"> Button 4 </button> </div> </div> </center> </body> </html> Output: Bootstrap 5 Button Group Buttons toolbar Example 2: In this example, we will create multiple Button Group Toolbars. We used background colors and border colors on another button group toolbar so you can differentiate the buttons. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <title>Bootstrap 5 Button Group Buttons Toolbar</title> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Button Group BUttons Toolbar</strong> <!--Button Group Buttons Toolbar Class used --> <div class="btn-toolbar m-3"> <div class="btn-group me-2"> <button type="button" class="btn bg-primary"> Button 1 </button> <button type="button" class="btn bg-info"> Button 2 </button> <button type="button" class="btn bg-danger"> Button 3 </button> <button type="button" class="btn bg-warning"> Button 4 </button> <button type="button" class="btn bg-success"> Button 5 </button> </div> <div class="btn-group me-2"> <button type="button" class="border-success btn bg-info"> Button 1 </button> <button type="button" class="border-success btn bg-info"> Button 2 </button> <button type="button" class="border-success btn bg-info"> Button 3 </button> </div> </div> </center> </body> </html> Output: Bootstrap 5 Button Group Buttons toolbar Reference: https://getbootstrap.com/docs/5.0/components/button-group/#button-toolbar Comment More infoAdvertise with us Next Article Bootstrap 5 Button group Nesting R rohansinghhada15 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Similar Reads Accordion ComponentBootstrap 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 Accordion FlushBootstrap 5 Accordion Flush is a type of accordion who are more edge-to-edge with the parent container. Also, it reduces the rounding of the corners and removes the borders & background color. This setting makes the accordion blend into its parent container. Bootstrap 5 Accordion Flush Class: accord 3 min read Bootstrap 5 Accordion Always OpenBootstrap 5 Accordion Always open is used to change the default value of Accordion and change it to always-open accordion where if a tab of it is open then it will stay open until it is toggled to close by eliminating the data-bs-parent attribute with each accordion tab with the .accordion-collapse 4 min read Bootstrap 5 Accordion SASSBootstrap 5 Accordion SASS can be used to change the default values provided for the accordion by customizing scss file of bootstrap5.SASS variables of Accordion:$accordion-padding-y: This variable provides the top padding and bottom padding of the accordion body and accordion button. By default, it 7 min read Badges ComponentBootstrap 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 5 Badge HeadingsBadge headings can be used to label the latest information about the headings. The size of badges scales in accordance with the heading size. It just matches the size of the parent element (uses relative units). So, you can directly use the badge class inside any tag (like span) whose parent is the 2 min read Bootstrap 5 Badges ButtonsBootstrap 5 comes with a Badges component which shows the additional, latest information and labels to any element. Along with the normal sentences, Badges can be implemented inside the button element also, to show any link or notification counter. In this article, we will see the use of Badges on B 2 min read Bootstrap 5 Badges Background colorsBootstrap 5 Badges Background colors provide different utility classes for backgrounds that help to enhance the appearance of a badge. The default background of any badge is ".bg-light", which can be used with text color utility, like .text-dark class, which helps to enhance its styling. Badges Back 3 min read Bootstrap 5 Badges Pill BadgesBootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component. This is used to give the badges a rounded corner shape. Bootstrap 5 Badges Pill badge Class: rounded-pill: This class is used with the badge class to make badges pill-shaped. Syntax: <span class="ro 2 min read Bootstrap 5 Badges SASSBootstrap5 Badges SASS is used to change the default value of badge's font size, font color, padding, border radius, and font-weight. SASS variables of Badge:$badge-font-size: This variable provides the font size of the badge. By default, it is 0.75em.$badge-font-weight: The variable provides the fo 3 min read Breadcrumb ComponentBootstrap 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 Breadcrumb DividersBootstrap 5 Breadcrumb Dividers are created using the content property of the "::before" element. To customize the bootstrap 5 breadcrumb divider, the --bs-breadcrumb-divider custom CSS property or the $breadcrumb-divider and $breadcrumb-divider-flipped Sass variables can be used. A custom SVG can a 2 min read Bootstrap 5 Breadcrumb VariablesBootstrap 5 Breadcrumb SASS variables can be used to change the default values provided for the breadcrumb by customizing scss file of Bootstrap5. SASS variables of Breadcrumb: $breadcrumb-font-size: This variable provides the font size of the breadcrumb item. By default, it is null.$breadcrumb-padd 4 min read Button group ComponentBootstrap 5 Button group Mixed stylesBootstrap 5 Button group is a component that helps to combine the buttons in a series in a single line. In button group mixed styles, we can create a button group with different background colors. Button group Mixed styles used Classes: .btn-group: This class is used to group a series of buttons tog 2 min read Bootstrap 5 Button group Outlined stylesButton group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. For the Button group outlined style, we will create a div element with class .btn-group and inside the div element, we will create button elements. Bootstrap 5 provides a series of cl 3 min read Bootstrap 5 Checkbox and radio button groupsBootstrap5 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.Checkbox and Radio Button Group Classes:.btn-group: This class is used to combine buttons..btn-check: This class is used to crea 2 min read Bootstrap 5 Button Group Buttons toolbarButton Group Buttons toolbar components are used to create a toolbar of Button groups. It combines the sets of buttons in a group of button toolbars for complex components. Pre-requisite: Bootstrap 5 Button Group to create a group of buttons. Button Group Buttons toolbar Class: btn-toolbar: This cla 2 min read Bootstrap 5 Button Group SizingBootstrap 5 provides different classes that allow changing button group sizes. Instead of using button sizing classes to every button element in a group, we can just add .btn-group-* class to set the button size in a button group. Button Group Sizing Classes: .btn-group-lg: This class is used to cre 4 min read Bootstrap 5 Button group NestingBootstrap 5 Button group nesting is used to create a dropdown menu mixed with a series of buttons. To make the button group nesting, we will use .btn-group class. Button group nesting used Class: .btn-group: This class is used to create a button group nesting in a dropdown menu. Syntax: <div clas 2 min read Bootstrap 5 Button group Vertical variationThe vertical group variation is used to stack the button group vertically rather than horizontally. To make the vertical variation of the button group, we will use .btn-group-vertical class. Vertical variation Class: .btn-group-vertical: This class is used to create a button group vertically. Syntax 3 min read Close button ComponentBootstrap 5 Close button Disabled stateBootstrap 5 Close button Disabled state is used to disable the close button for dismissing content like modals and alerts. The disabled close button changes the opacity and removes the pointer cursor on hovering. Close Button Disabled State used Attribute: disabled: The disabled attribute is used to 2 min read Bootstrap 5 Close button White variantBootstrap 5 Close button is used to add more user access and enhance user experience to a website and its components. Generally, the default version of this button is dark/black and it goes universally with all the colors except the dark/black colored background or component which goes well and look 2 min read Bootstrap 5 Close Button SASSBootstrap 5 Close button SASS can be used to change the default values provided for the close button by customizing scss file of bootstrap 5. SASS variables of Close button:$btn-close-width: This variable provides the width of the close button. By default, it is 1em.$btn-close-height: This variable 5 min read Collapse ComponentBootstrap 5 Collapse Multiple TargetsBootstrap 5 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. We can achieve this by assigning the common class in the data-bs-target attribute of the button or link.Bootstrap 3 min read Bootstrap 5 Collapse SASSBootstrap5 Collapse SASS can be used to change the default value of transition duration and transition timing of the height property collapsible component. SASS variables of Collapse:$transition-collapse: This variable provides the transition duration and the transition timing function in which the 3 min read Bootstrap 5 Collapse UsageBootstrap 5 Collapse is a component used to create collapsible content panels. It allows you to hide and show content on demand. Collapse is useful when you have a lot of content on a page and need to display it in a more organized manner.You can refer here for further details about Bootstrap 5 Coll 3 min read Bootstrap 5 Collapse Via data AttributesBootstrap 5 Collapse can also be controlled by using the data attributes. Set the data-bs-toggle attribute of the element to "collapse" and the data-bs-target to the selector of the collapsible element(s). The collapse class must be added to the collapsible element and if you want to keep the collap 3 min read Bootstrap 5 Collapse Via JavaScriptBootstrap 5 Collapse can be triggered using two ways using data attributes and using JavaScript. For using it with JavaScript, a new Bootstrap collapse object needs to be created. The show() and hide() predefined methods to attain basic handling of the collapse element via JavaScript. Prerequisite: 3 min read Bootstrap 5 Collapse OptionsBootstrap5 collapse options are used to group the collapsible elements under a single parent. It can be done by extending the data attributes with the option name along with "data-" for example data-bs-parent="".Bootstrap 5 Collapse Options Attributes:data-bs-parent : If we have a multiple collapses 2 min read Bootstrap 5 Collapse MethodsBootstrap 5 Collapse Methods are used to control the visibility of a Bootstrap 5 Collapse element, manually.Bootstrap 5 Collapse Methods:toggle: It is used to toggle the visibility of a collapsible element. show: It is used to show a collapsible element. hide: It is used to hide a collapsible elemen 3 min read Bootstrap 5 Collapse EventsIn this article, we will learn about the Bootstrap 5 Collapse Events fired when interacting with the Bootstrap 5 Collapse element. Bootstrap 5 Collapse component is useful for toggling the visibility of a particular content on a webpage. Bootstrap 5 Collapse Eventsshow.bs.collapse: It is fired as so 2 min read Offcanvas ComponentBootstrap 5 Offcanvas ComponentsBootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar. The components which 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. 3 min read Bootstrap 5 Offcanvas Live DemoBootstrap 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. JavaScript that toggles the .show class on an element with the .offcanvas class.offcanvas hides the content (default)offcanv 3 min read Bootstrap 5 Offcanvas PlacementBootstrap 5 Offcanvas Placement has four directions from which the carousel can pop out which are left(default), top, bottom, and right. There are helper classes provided that can help us set the direction of the offcanvas. Bootstrap 5 Offcanvas Placement Classes:offcanvas-[start/top/right/bottom]: 3 min read Bootstrap 5 Offcanvas BackdropBootstrap 5 Offcanvas Backdrop is the greyish translucent cover that is all over the background which is shown when the off-canvas opens. There are three settings in which we can use an offcanvas, the default one is the offcanvas with the backdrop and no body scrolling. The two others are the one wi 3 min read Bootstrap 5 Offcanvas SASSBootstrap 5 Offcanvas SASS can be used to change the default values provided for the Offcanvas by customizing scss file of bootstrap5.SASS variables of Offcanvas:$offcanvas-color: This variable provides the color of the text on the offcanvas. By default, it is null.$offcanvas-bg-color: This variable 4 min read Bootstrap 5 Offcanvas Usage OptionsBootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element's display. Bootstrap 5 Offcanvas can be triggered using data attributes and JavaScript. Bootstrap 5 Offcanvas Usage Options Attribute:data-bs-*: Options should be passed as data attributes in the off-canvas 4 min read Bootstrap 5 Offcanvas Usage Via Data AttributesAn Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. The data-attributes approach needs two attributes. These data attributes are added to the anchor link or button which is used to trigger the off-canvas. Offcanvas class is added to the div which is the o 3 min read Bootstrap 5 Offcanvas Usage Via JavaScriptBootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. For using it with JavaScript we need to add a function and use the predefined show() method to trigger the off-canvas from a button or link. PrerequisiteBootstrap 5 Offcanvas UsageBootstrap 5 of 3 min read Bootstrap 5 Offcanvas Usage MethodsBootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually. For example, they can be used to show, hide, or toggle the Offcanvas element manually.Bootstrap 5 Offcanvas Usage Methods:toggle: It is used to toggle an offcanvas element's visibility. show: It is u 2 min read Bootstrap 5 Offcanvas Usage EventsBootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. For example, these events are fired when an off-canvas element is toggled to be visible or hidden.Bootstrap 5 Offcanvas Usage Events:show.bs.offcanvas: It is fired when the show instance method of the dropdown is cal 2 min read Progress ComponentBootstrap 5 Progress HeightBootstrap 5 Progress Height is used to set the height of the progress bar. To set the height of the progress bar, we will set the height property value of .progress class. Progress Height Used Class: .progress: It is the wrapper that indicates the max value of the progress bar..progress-bar: It is u 2 min read Bootstrap 5 Progress BackgroundThe Bootstrap 5 Progress is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. We can use background utility classes to change the appearance of progress bars. Prerequisite: Bootstrap 5 Progress component to create, sta 2 min read Bootstrap 5 Progress Multiple barsBootstrap 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. Bootstrap 5 Progress Multiple bars Class: There is no class to create multiple p 2 min read Bootstrap 5 Progress StripedThe Bootstrap 5 progress bar is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. The Progress Striped is used to change the appearance of the progress bar to striped. Progress Striped Class: .progress-bar-striped: Thi 2 min read Bootstrap 5 Progress Animated stripesBootstrap 5 Progress Animated stripes are used to make the stripes progress bar animated. To make a progress bar you need to use the Progress bar classes and to make it striped use the Progress Bar Striped classes. Pre-requisite: Bootstrap 5 Progress and Bootstrap 5 Striped Progress Bars. Bootstrap 2 min read Bootstrap 5 Progress SASSBootstrap 5 Progress SASS has a set of variables with default values and keyframes which are used to create CSS animations for the progress bars. Bootstrap 5 Progress Sass: Variables: $progress-height, $progress-bg, $progress-border-radius, etc variables are used to customize the progress bars. You 3 min read Scrollspy ComponentBootstrap 5 Scrollspy with nested navBootstrap 5 Scrollspy is one of the features which targets the navigation bar contents automatically on scrolling the area. The navigation highlights the navbar links as the user scrolls the page. Only nav or list groups may be utilized with Scrollspy. Scrollspy can work with a simple navbar and als 4 min read Bootstrap 5 Scrollspy with list-groupBootstrap 5, Bootstrap Scrollspy is a feature that automatically updates navigation links based on scroll position. It's particularly useful for long content-heavy pages where we want to keep the user informed about their current section in the document.Bootstrap 5 Scrollspy with list-group classes: 4 min read Bootstrap 5 Scrollspy Via data AttributesBootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation. This will only work if we add the data-bs-spy attribute to the element that is to spy, along with including the data-bs-target attribute, specifying the id or class name of the parent element of the 6 min read How to use Scrollspy in Bootstrap 5 via JavaScript ?In this article, we will see how to use Scrollspy in Bootstrap 5 via Javascript.Using Scrollspy in Bootstrap 5, the navigation or list group components of Bootstrap update automatically based on where the user is scrolling to indicate which link is currently active in the viewport.There are 2 ways t 6 min read Bootstrap 5 Scrollspy MethodsBootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing, getting or creating the Scrollspy instance, refreshing the element, etc along with finding out useful data about the widget within Javascript.It is used in automa 7 min read Bootstrap 5 Scrollspy refresh() MethodBootstrap 5 Scrollspy provides a refresh() method that is invoked while including or discarding the elements in the DOM tree, i.e., it can be manually called to recalculate the active link based on the current scroll position. This method can be used to update the active link whenever the page conte 5 min read Bootstrap 5 Scrollspy dispose() MethodBootstrap 5 Scrollspy dispose() method is used to remove the ScrollSpy functionality from an element. To use the dispose() method, you will need to select the element that the scrollspy is applied to and call the method on it. For example, if you have applied the scrollspy to a navbar with an ID of 4 min read Bootstrap 5 Scrollspy getInstance() MethodBootstrap5 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, refreshing the element, etc along with finding out useful data about the widget within Javascript.Bootstrap 5 Scrol 5 min read Bootstrap 5 Scrollspy getOrCreateInstance() MethodBootstrap 5 Scrollspy getOrCreateInstance() method is used to obtain the instance of a particular tab of the list group. This method can work even when the instance is not pre-initialized and this method creates an instance.Syntax:var scrollspy-element = document.getElementById("scrollspy-id");var s 5 min read Bootstrap 5 Scrollspy OptionsBootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position. When we click on the link it automatically scrolls down to the currently active element.Bootstrap 5 Scrollspy Options: Scrollspy options can be through data attributes or via JavaScript code. W 3 min read Spinners ComponentBootstrap 5 Spinners Border ColorsBootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS. The Border Spinner is used for a lightweight loading indicator. There are various colors of spinners provided by Bootstrap 5 spinners.Spinner Border Colors Classes:spinner-border: 2 min read Bootstrap 5 Spinners GrowingBootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS. The Growing Spinner does not technically spin like regular spinners, it repeatedly grows. You can easily change its appearance with color utilities. Bootstrap 5 Spinners Growing C 2 min read Bootstrap 5 Spinners AlignmentBootstrap 5 Spinners Alignment is used to set the alignment of the spinner element. The spinner element can easily be resized, recolored, and quickly aligned. Spinners Alignment: Margin Alignment: Spinner margin is used to create spinners in different margins.Spinners Placement: Spinners Placement i 2 min read Bootstrap 5 Spinners MarginBootstrap 5 Spinners Margin is used to create spinners in different margins. For margin spinners, we will use .m class with five different sizes from 0 to 5. Also, auto is used for margin auto. For different sides of the margin, we will use t (for top), b (for bottom), s (for start), e (for end), x 2 min read Bootstrap 5 Spinners PlacementBootstrap 5 Spinners Placement is used to set the position of spinners where you want to place them according to the need. It uses three utilities flexbox utilities, float utilities, or text alignment to place the items. Placement Utilities: Flex: It is used to set the position of spinners using fle 3 min read Bootstrap 5 Spinners Flex PlacementsBootstrap5 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. Spinners Flex Placements Class: d-flex: This is a flexbox helper class and it is used to have the Flex Placement.S 2 min read Bootstrap 5 Spinners Floats PlacementsBootstrap 5 Spinners Float Placements are used to set the position of spinner elements to left, right, or none depending on the requirements. It is mostly used for responsive design. Spinners Floats Placements used Classes: .float-start: It is used to set the position of spinner elements to start..f 2 min read Bootstrap 5 Spinners Text align PlacementsBootstrap 5 Spinners Text align placements are used to set the alignment of the spinner component. To set the text alignment of the spinner element, we will use text alignment classes.Spinners Text Align Placements used Classes:.text-start: It is used to set the alignment of the spinner element to s 2 min read Bootstrap 5 Spinners SizeBootstrap 5 Spinners Size is used to create spinners in different sizes. For small-size spinners, we will use .spinner-border-sm class, and for small-size grow to shrink spinners, we will use .spinner-grow-sm class.Spinners Size used Classes:.spinner-border-sm: It is used to create small-size spinne 2 min read Bootstrap 5 Spinners ButtonsBootstrap 5 Spinners are used to display the loading state of a component or a page. The spinners within buttons are used to represent an action that is currently processing. Spinners Buttons used Classes: .btn: It is used to create a button..spinner-border: It is used to create a spinner with the b 2 min read Bootstrap 5 Spinners SASSBootstrap 5 Spinners SASS has a set of variables with default values and keyframes which are used to create CSS animations for the spinners. Bootstrap 5 Spinners Sass: Variables: $spinner-height, $spinner-width, $spinner-border-width, etc variables are used to customize the spinners. You can find th 3 min read Like