Bootstrap 5 Utility Reference
Last Updated :
01 Dec, 2023
Bootstrap 5 Utility facilitates various types of utilities to make a stylish, mobile-friendly, and responsive front-end website. The utility layout is used for showing, hiding, aligning, and spacing content.
The complete list of Utilities is listed below with their brief description:
API
Bootstrap 5 API facilitates Sass-based tool that helps to create the utility classes. Various Utility API with their descriptions are given below:
|
| Custom class prefix | The Custom class prefix utilizes the class option to modify the class prefix. |
| States | The state option can be used to create pseudo-class variations. Example pseudo-classes are :hover and :focus. |
| Responsive utilities | Include the responsive boolean to produce responsive utilities (such as .opacity-md-25) that function across all breakpoints. |
| Changing utilities | In Changing utilities Replace current utilities by employing the same key. |
| Print utilities | The print option will produce utility classes for print, applied within the media query. |
| Add utilities | In the add utilities the new utilities can be integrate to the default $utilities map along a map-merge. |
| Modify utilities | Modify the current utilities in the default $utilities. |
| Enable responsive | Enable responsive enables responsive classes for the current utilities. |
| Remove utilities | Bootstrap 5 provides a set of utility classes for various use cases and with them Bootstrap also provides a utility API to modify, add or remove these utility classes by using Sass. |
| Remove utility in RTL | Sometimes RTL styling may be difficult to use for some edge cases therefore Bootstrap 5 provides us this facility to drop the utilities from RTL output by setting the RTL option to false. |
Background
Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light.
|
| Background color | The background color of the elements is set to contextual class like .bg-primary, .bg-success, and so on. |
| Background gradient | A linear gradient is applied to the backgrounds by adding color value and the .bg-gradient class to it. |
| Sass | This involves the Sass map and spacing utilities that are declared in Utility API. |
Borders
Bootstrap 5 Borders Helps to create or delete borders from an element, use border utilities. Select all borders at once or all at once.
|
| Border | Borders can be classified into 2 different types that are additive and subtractive. |
| Additive | Bootstrap5 Borders Additive classes are mainly used to display an outline around a box and it provides style, color, and radius of an element border on the side we want. |
| Subtractive | Borders Subtractive is used to remove borders from the box by defining which side the border is to be removed or we can remove the border from all sides at once. |
| Border color | Border color utilize utilities created using our theme colors to change the border’s color. |
| Border-width | Border width is used to increase or decrease the width of the border as per requirements. |
| Border-radius | Border radius uses the rounded classes, giving an element rounded corners. |
| Borders Sizes | Border Sizes are used to set the border-radius rounded corners larger or smaller. The range of border sizes varies from 0 to 3 |
| Sass | It supports the various extension of Languages such as variables, utility API, and mixins. |
Colors
Bootstrap 5 Colors utility is used to set the text colors, into green as a success, and blue as a primary. There are lots of other informative colors that we need like danger, warning, and so on.
|
| Colors Specificity | To color the text with color utilities like .text-primary for blue color similarly there are many different utilities for different colors. |
| Sass | This involves the utilities that are declared in Utility API. |
Display
Bootstrap 5 Display faciliates responsive display utility classes, you may modify the value of the display property. For presentation purposes, we purposefully only support a portion of all potential values.
|
| Notation |
There is no breakpoint abbreviation in the display utility classes that apply to all breakpoints, from xs to xxl. A media query is not applied to those classes since they are applied from min-width: 0; and above. |
| Hiding elements | Use responsive display classes for showing and hiding items based on the device to speed up the construction of mobile-friendly websites. |
| Display in print | Our print display utility classes let you alter an element’s display value while printing. The same display values as our responsive are supported by utility d-* |
| Sass | This involves the utilities that are declared in Utility API. |
Flex
With Bootstrap 5 Flex, you can create layouts that are both responsive and visually appealing. To use Bootstrap 5 Flex, you first need to wrap the elements that you want to make flex items in a flex container.
|
| Enable flex behaviors | Utilize display utilities to make a flexbox container that can be customizeable with other flex properties. |
| Direction | Bootstrap 5 flex-direction is a property that controls the direction in which flex items are arranged. The default direction is row, which means that flex items are arranged in a horizontal row. |
| Justify content | Bootstrap 5 flex justify-content is a property that controls the alignment of flex items on the main axis. |
| Align items | Bootstrap 5 flex align-items utilities allow you to change the alignment of flex items on the cross-axis. |
| Align self | Bootstrap 5 flex align-self utilities allow you to change the alignment of a flex item on the cross-axis, independently of the other flex items in the container. |
| Fill | The Bootstrap 5 flex fill utility allows you to force flex items into equal widths while taking up all available horizontal space. |
| Grow and shrink | Flex grow determines how much a flex item grows relative to the other flex items in the container when there is extra space whereas Flex shrink determines how much a flex item shrinks relative to the other flex items in the container when there is not enough space for all of the flex items to fit at their natural size. |
| Auto margins | Bootstrap 5 flex auto margins are a set of utility classes that can be used to add auto margins to flex items. |
| Wrap | Bootstrap 5 flex-wrap is a CSS utility class that allows you to change how flex items wrap in a flex container. |
| Order | Bootstrap 5 flex order is a utility class that can be used to change the visual order of specific flex items. |
| Align content | Bootstrap 5 Flex Align Content is a set of utilities that allow you to control how flex items are aligned on the cross-axis. |
| Media object | Bootstrap 5 Flex Media Object is a combination of two Bootstrap classes, .media and .media-body, to create a flexible layout for media objects. |
| Sass | Bootstrap 5 Flex SaaS is a software as a service (SaaS) solution that provides a framework for building responsive web applications using Bootstrap 5. |
Float
Bootstrap 5 Float classes use the current viewport size to float an element to the left, right, or deactivate floating. !Important is mentioned to prevent issues with specificity
|
| Responsive | Bootstrap 5 provides support classes like float-sm-start, float-lg-end, etc, to give responsive variations to each float value. |
| Sass | It involves all float utilities in utility API. |
Interactions
Bootstrap 5 Interactions help us to interact with the contents of the website. Utility classes like text selection and pointer events help us to interact with the website. The utilities classes include text selection and pointer events
|
| Text Selection | We can change the way in which the content is selected when the user interacts with it. .user-select-* class is used to format the selection of text |
| Pointer Events | Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions. If a parent class contains .pe-none class then the child will inherit that property from the parent. To ensure that they are completely neutralized even for keyboard users, you may need to add tabindex=”-1″. |
| Sass | Interaction are declared in bootstrap API in scss/_utilities.scss. We can use our custom scss to modify the default values |
Overflow
Bootstrap 5 Overflow can be enbled when the content exceeds an element’s box, the overflow attribute indicates what should happen.If the content of an element is too large to fit within the defined region, this property indicates whether to clip the content or add scrollbars.
- Sass: The Sass variables provides the customization of the overflow utilities by changing the $overflows variable in the _variables.scss.
Position
Bootstrap 5 Position is used to set an element’s Position, Bootstrap 5 offers a variety of classes. Although they are available, quick positioning classes are not responsive.
|
| Position values | These are quick positioning classes that are not responsive. |
| Arrange elements | Arrange elements with edge positioning utilities with format {property-position}. |
| Center elements | The transform utility class allows you to center the pieces using class .translate-middle. When used with the edge positioning tools, this class’s application of the transformations translateX (-50%) and translateY (-50%) to the element enables absolute element centering. |
| Sass | In Maps, the default position utility values are declared. The position utilities are declared in our utility API. |
Shadows
Bootstrap 5 Shadows utilities are used to add or remove shadows to bootstrap components or any HTML element in general. There are a total of four shadow utility classes, three for adding the shadows and one for removing any pre-applied shadow from the element.
- Sass: It is a collection of variables and utilities to tweak the values of the shadow by changing the variables in bootstrap’s source code.
Sizing
Bootstrap 5 Sizing is a set of utility classes used to set the height and width of the element. Height and width can be set relative to the viewport of the device as well as relative to the parent element.
|
| Relative to the parent | These classes are used to set the height and width of the element relative to the parent element. |
| Relative to the viewport | These classes are used to set the height and the width of the element relative to the viewport. |
| Sass | This involves the Sass sizing utilities that are declared in Utility API. |
Spacing
Bootstrap5 spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an element or container.
|
| Margin and padding | Bootstrap provides several short-hand utility classes to add margin and padding between two elements or a subgroup of an element’s sides to modify its appearance. It allows spacing ranging from .25rem to 3rem. |
| Horizontal centering | There are mx-auto utility for center horizontally. |
| Negative margin | Bootstrap has negative margin classes that can be used to add negative margins to elements as well. These classes have a similar syntax to general spacing classes but with an n just before the size. |
| Gap | When the display is set to grid, you can make use of gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual grid items. |
| Sass | This involves the Sass map and spacing utilities that are declared in Utility API. |
Text
Bootstrap5 Text defines how to change the alignment, weight, line height, wrapping, font size of the text, and more with the help of Bootstrap 5 utilities.
|
| Text alignment | We can use text alignment classes to align the text in different positions in different viewports. |
| Text wrapping and overflow | To wrap a text we need to use the .text-wrap class and to prevent a text from wrapping we need to use the .text-nowrap class. |
| Word break | The word break utilities are used to avoid breaking components due to long strings of text. |
| Text transform | It is used to convert a given text into lower case or upper case. It can also transform the first letter of every word into an uppercase which is called capitalized text. |
| Font size | To change the size of the font instead of using heading classes(e.g., .h1-.h6) we can use .fs classes to change the size of the font. |
| Font weight and italics | These utilities are used to change the weight and style of the text abbreviated as .fw-* and to change the style of the text we can use utilities that are abbreviated as .fst-* |
| Line height | To change the height of the line we can use utilities that are abbreviated as .lh-*. |
| Monospace | Use utility .font-monospace to modify the selection to the monospace. |
| Reset color | It is used the utility text-reset to reset the color of link or the text |
| Text decoration | These classes can be used to decorate the text in different ways. eg. underline. |
| Sass | This involves the Sass map and spacing utilities that are declared in Utility API. |
Vertical align
Bootstrap 5 Vertical Alignment utilities only affects inline(Present in one Line), inline-block(Present as blocks in one line), inline-table, and table cell(Elements in a cell of a table) elements.
- Sass: This involves the utilities that are declared in Utility API.
Visibility
Bootstrap5 visibility utilities do not change the display value and hide information from most users while retaining it for screen readers. It helps to appear and disappear required content as per format.
- Sass: This involves the utilities that are declared in Utility API.
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