BootStrap 5 Utilities Changing Display
Last Updated :
14 Feb, 2023
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 Changing Display 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.
BootStrap 5 Utilities Changing Display Class: There is no predefined class for this, but you need to have knowledge of Bootstrap 5 Display Utilities.
Example 1: The following example shows the changing display utilities of Bootstrap5.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "container" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Utilities Changing display</ h3 >
< br >
< div class = "container" >
< div class = "d-inline p-2 bg-danger border" >
GFG display inline
</ div >
< div class = "d-inline p-2 bg-info" >
GFG display inline</ div >
< div class = "d-inline p-2 bg-primary" >
GFG display inline</ div >
< div class = "d-inline p-2 bg-secondary" >
GFG display inline</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Utilities Changing Display
Example 2: In this example, we will use Display utility classes.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "container" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Utilities Changing display</ h3 >
< br >
< div class = "container" >
< div class="d-block p-2 col-8
bg-danger border">
GeeksforGeeks display block
</ div >
< div class = "d-block p-2 col-8 bg-info" >
GeeksforGeeks display block
</ div >
< div class = "d-block p-2 col-8 bg-primary" >
GeeksforGeeks display block
</ div >
< div class = "d-block p-2 col-8 bg-secondary" >
GeeksforGeeks display block
</ div >
</ div >
</ body >
</ html >
|
Output:
BootStrap 5 Utilities Changing Display
Reference: https://getbootstrap.com/docs/5.2/layout/utilities/#changing-display
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...