Bootstrap 5 Utilities
Last Updated :
22 Dec, 2022
Bootstrap 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 display properties for setting the display. Some display properties like set to display responsive and display toggling, etc. It can be mixed with a grid system, content, or component for a responsive output.
- Flexbox options: The Flexible Box Layout Module in bootstrap5 is used for designing the flexible and responsive layout structure. Most of the components are made with flexbox enabled.
- Margin and padding: In Bootstrap 5, we use the margin and padding (spacing) utility to set the space and size of an element. It includes a six-level scale for spacing utilities, based on a 1rem value. We can choose values for viewports or choose specific viewports.
- Toggle visibility: Bootstrap 5 regulates element visibility without changing display content. Invisible elements still affect the page layout but are hidden from display.
Example 1: Let us see an example.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< h1 class = "text-success" > GeeksforGeeks </ h1 >
< h3 >Bootstrap5 Layout Utilities</ h3 >
< br >
< section class = "d-inline p-2 bg-primary text-white" >
GFG inline element
</ section >
< br >
< br >
< section class = "d-block p-2 bg-dark text-white" >
GFG block element
</ section >
</ body >
</ html >
|
Output:
Example 2: Let us see an example of display utility.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< h1 class = "text-success" > GeeksforGeeks </ h1 >
< h3 >Bootstrap5 Layout Utilities</ h3 >
< br >
< p >< b >normal form of rows</ b ></ p >
< section >
< div class = "p-2 border" >GFG 1</ div >
< div class = "p-2 border" >GFG 2</ div >
< div class = "p-2 border" >GFG 3</ div >
</ section >
< br >
< p >< b >When we applied display property in rows</ b ></ p >
< section class = "d-flex " >
< div class = "p-2 border" >GFG 1</ div >
< div class = "p-2 border" >GFG 2</ div >
< div class = "p-2 border" >GFG 3</ div >
</ section >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/utilities/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...