With Bootstrap 5 display tools, you can easily and quickly change the display value of components and more. With the help of Bootstrap 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. You can combine classes for a variety of effects as needed.
-
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. However, a breakpoint abbreviation is present for the remaining breakpoints. As a result, the class names follow this format.
-
Hiding components: Use responsive display classes for showing and hiding items based on the device to speed up the construction of mobile-friendly websites. Instead of making completely distinct versions of the same website, responsively hide elements. Use the .d-none class or one of the .d-{ sm, md, lg, xl, xxl }-none classes for any responsive screen variation to simply hide components. You can combine one to have an element appear only on a specific range of screen sizes.
-
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-*
Example 1: The following code demonstrates Bootstrap display using various classes like d-inline p-2 bg-warning text-dark,d-inline p-2 bg-dark text-white,d-inline p-2 bg-primary text-white,d-inline p-2 bg-dark text-primary.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CDN -->
<link href=
rel="stylesheet" integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src=
integrity=
"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Display
</h2>
<br>
<center>
<div class="d-inline p-2
bg-warning text-dark">
D-Inline
</div>
<div class="d-inline p-2 bg-dark
text-white">
D-Inline
</div>
<div class="d-inline p-2 bg-primary
text-white">
D-Inline
</div>
<div class="d-inline p-2 bg-dark
text-primary">
D-Inline
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following code demonstrates Bootstrap display using various classes like d-block p-2 bg-warning text-dark,d-block p-2 bg-dark text-white,d-block p-2 bg-primary text-white,d-block p-2 bg-dark text-primary.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CDN -->
<link href=
rel="stylesheet" integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src=
integrity=
"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Display
</h2>
<br>
<center>
<span class="d-block p-2
bg-warning text-dark">
d-block
</span>
<span class="d-block p-2
bg-dark text-white">
d-block
</span>
<span class="d-block p-2
bg-primary text-white">
d-block
</span>
<span class="d-block p-2
bg-dark text-primary">
d-block
</span>
</center>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/utilities/display/#display-in-print