Bootstrap - Display

This chapter discusses about the display property of the Bootstrap.

In Bootstrap, the display property is used to control the visibility and behavior of elements. It allows you to define how an element should be rendered and positioned within the document layout.

Notation

  • Utility classes that are applicable to all breakpoints, ranging from xs to xxl, do not have any abbreviation for breakpoints.

  • These classes are implemented from a min-width: 0; and beyond and not restricted by media query.

  • The remaining breakpoints do contain an abbreviation for the breakpoint.

Following format is used in naming the display classes:

  • .d-{value} for xs, such as .d-none.

  • .d-{breakpoint}-{value} for sm, md, lg, xl and xxl, such as .d-lg-none sets display: none; on lg, xl, and xxl screens.

{value} can be one of the following:

  • none

  • inline

  • inline-block

  • block

  • grid

  • inline-grid

  • table

  • table-cell

  • table-row

  • flex

  • inline-flex

Some of the values display property take, are as follows:

  • .d-none: This value hides the element completely, making it invisible and not taking up any space in the layout.

  • .d-inline: This value makes the element behave like an inline element, allowing other elements to be displayed alongside it on the same line.

  • .d-block: This value makes the element behave like a block-level element, causing it to start on a new line and take up the full available width.

  • .d-inline-block: This value combines the characteristics of both inline and block elements. The element is displayed inline, allowing other elements to be displayed alongside it.

Let us see an example of .d-inline:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
    <head>
       <title>Bootstrap - Display</title>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container m-3 p-5">
        <div class="d-inline m-2 p-4 text-bg-success">d-inline - success</div>
        <div class="d-inline p-4 text-bg-warning">d-inline - warning</div>
      </div>
    </body>
</html>

Let us see an example of .d-block:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
    <head>
       <title>Bootstrap - Display</title>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container mt-3">
        <h4>Display - block</h4>
        <span class="d-block p-4 text-bg-info">d-block used for info</span>
        <span class="d-block p-4 text-bg-primary">d-block used for primary</span>
      </div>
    </body>
</html>

Hide elements

In order to hide elements, use the .d-none class or one of the .d-{sm, md, lg, xl, xxl} classes.

Screen size Class
Hidden on all .d-none
Hidden only on xs .d-none and .d-sm-block
Hidden only on sm .d-sm-none and .d-md-block
Hidden only on md .d-md-none and .d-lg-block
Hidden only on lg .d-lg-none and .d-xl-block
Hidden only on xl .d-xl-none and .d-xxl-block
Hidden only on xxl .d-xxl-none
Visible on all .d-block
Visible on xs .d-block and .d-sm-none
Visible on sm .d-none .d-sm-block .d-md-none
Visible on md .d-none .d-md-block .d-lg-none
Visible on lg .d-none .d-lg-block .d-xl-none
Visible on xl .d-none .d-xl-block .d-xxl-none
Visible on xxl .d-none .d-xxl-block

Let us see an example of hiding the display on screens smaller than lg:

Note: Kindly resize the screen in order to see the changed effect.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Display</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Hide - display</h4>
     <!--Hide display on smaller than lg-->
     <div class="d-lg-none bg-warning">Hide on lg (large) and wider screens</div>
     <div class="d-none d-lg-block bg-info">Visible on screens smaller than xl (extra-large)</div>
    </div>
  </body>
</html>

Display in print

You can modify the display value of elements specifically for printing purposes using our print display utility classes. These classes offer support for the same display values as the responsive .d-* utilities.

Following are the list of utilities available for display in print:

  • .d-print-none

  • .d-print-inline

  • .d-print-inline-block

  • .d-print-block

  • .d-print-grid

  • .d-print-inline-grid

  • .d-print-table

  • .d-print-table-row

  • .d-print-table-cell

  • .d-print-flex

  • .d-print-inline-flex

display and print classes can be combined and used. Let us see an example:

Note: Kindly resize the screen in order to see the changed effect.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Display</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container m-3 p-3">
     <h4>Print - display</h4>
     <!--display on print and hide on screen-->
     <div class="d-none d-print-block bg-primary-subtle p-3">Hide on screen and display on print only</div>
     <!--display on screen and hide on print-->
     <div class="d-print-none bg-warning p-3">Hide on print and display on screen only</div>
     <!--display upto large screen and show always on print-->
     <div class="d-none d-lg-block d-print-inline bg-danger-subtle p-3">Always display on print and hide up to large screen</div>
    </div>
  </body>
</html>
Advertisements