Display Property in Bootstrap with Examples

Last Updated : 25 Apr, 2024

In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation.

The available classes are:

Class Name	Description
.d-block	Sets the display property of an element to block, making it a block-level element.
.d-inline	Sets the display property of an element to inline, allowing it to flow inline with text.
.d-inline-block	Sets the display property of an element to inline-block, combining inline and block.
.d-flex	Displays content in a box format using the Flexbox layout model.
.d-grid	Displays content in a grid format using the CSS grid layout model.

Syntax:

<div class=”d-inline”> Inline </div> // for inline display
<div class=”d-block”> Block </div> // for block display
<div class=”d-inline-block”> Inline Block </div> // for inline-block display
<div class=”d-flex”> flex box </div> // for flex-box display
<div class=”d-grid”> grid </div> // for grid display

Examples of Bootstrap Display Property

Example 1: In this example we uses Bootstrap’s d-block class to display two divs as block elements with a blue background color.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            font-size: 30px;
        }
    </style>

    <!-- Include Bootstrap CSS and JS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

    </script>

    <title>Webpage</title>
</head>

<body>
    <div class="d-block bg-primary">
        GeeksforGeeks
    </div>

    <div class="d-block bg-primary">
        GeeksforGeeks
    </div>
</body>

</html>

Output: Bootstrap Display Property Example 2: In this example we use Bootstrap’s d-inline class to display two divs as inline elements with a green background color.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            font-size: 30px;
        }
    </style>

    <!-- Add Bootstrap CSS and JS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
        crossorigin="anonymous" />

    <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>Webpage</title>
</head>

<body>
    <div class="d-inline bg-success">
        GeeksforGeeks
    </div>

    <div class="d-inline bg-success">
        GeeksforGeeks
    </div>
</body>

</html>

Output: Bootstrap Display Property Example 3: In this example we use Bootstrap’s d-inline-block class to display two divs as inline-block elements with a yellow background color.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-size: 75px;
        }
    </style>

    <!-- Add Bootstrap CSS and JS -->
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous" />

    <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>Webpage</title>
</head>

<body>
    <div class="d-inline-block bg-warning">
        GeeksforGeeks
    </div>

    <div class="d-inline-block bg-warning">
        GeeksforGeeks
    </div>
</body>

</html>