Open In App

Bootstrap 5 Display

Last Updated : 30 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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.

HTML




<!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



Previous Article
Next Article

Similar Reads

What is the difference between display: inline and display: inline-block in CSS?
The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If we need to display the elements that are laid out a
4 min read
How display: inline is different from display: inline-block in CSS ?
In this article, we will know about the display property in CSS, along with understanding the 2 different property values for display property, i.e., display: inline &amp; display: inline-block properties, &amp; will understand their basic differences &amp; implementation through the examples. The display property facilitates setting the element by
3 min read
What is the difference between display:inline-flex and display:flex in CSS ?
In this article, we will see the display property &amp; its values, i.e. the inline-flex &amp; flex, in order to specify the display behavior of an element, along with understanding their basic differences &amp; will illustrate them through the examples. Both CSS display: inline-flex and display: flex properties are used to create flexible layouts.
3 min read
How to display multiple horizontal images in Bootstrap card ?
Pre-requisite: Bootstrap Cards Bootstrap cards provide a flexible and extensible content container with multiple variants and options such as styling the Tables, stacking multiple images horizontally/vertically, making the stacked contents responsive, etc. Cards include so many options for customizing their backgrounds, borders, Header, footer, col
2 min read
How to display bootstrap carousel with three post in each slide?
A Bootstrap Carousel is a slideshow for rotating through a series of contents. It is built with CSS and Javascript. It works with a series of photos, images, texts, etc. It can be used as an image slider for showcasing a huge amount of content within a small space on the web page, as it works on the principle of dynamic presentations. Syntax: &lt;d
5 min read
How to change column to row on small display in Bootstrap 4 ?
The task is to switch a column of Bootstrap 4 grid layout to a row on small screen sizes. Syntax: &lt;element class="col-md-4 col-sm-6 ..."&gt;...&lt;/element&gt; Approach: To solve the given task we have to use Bootstrap 4's grid layout. The grid layout divides the entire visible row into 12 equally sized columns. Once we are in a row we can easil
3 min read
How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
By default, Bootstrap 4 has various form features for radio buttons with images inline. Here HTML 5 has default validation features, However, for custom validation, we must use JavaScript or jQuery. The following approaches would help in the display validation message for radio buttons with images inline. Approach 1: First wrap the Radio buttons an
5 min read
How to Create a Bootstrap Spinner and Display on Screen till the data from the API loads ?
The task is to display a spinner on the page until the data response from the API comes. We have taken bootstrap spinner to show the example. Pre-requisite: You will need some knowledge about JavaScript fetch API.You will need a mock API for getting data. Approach: Create necessary HTML, CSS, and JavaScript file for the task.In HTML file, link boot
2 min read
How to display title in Bootstrap-Select without empty element ?
In this article, we will cover how to display the title in the Bootstrap-Select without any empty element in the select dropdown menu. Bootstrap Select is a form control that displays a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user. Example 1: Using data-hidden attribute in the
2 min read
How to display code with Bootstrap ?
To display the code in our webpage, bootstrap has some tags that can be used to display the code. Method 1: Inline code using &lt;code&gt; tag to display the code inline. The &lt;code&gt; tag wraps an inline snippet of code. Inline code should be wrapped in &lt;code&gt; tags. The resulting text will be displayed in a fixed-width font and given a re
2 min read