Bootstrap Display Utilities Tutorial

View more Tutorials:

1- Bootstrap Display Utility

Display Utility is part of  Bootstrap. It builds a system of classes that helps you control the display (or hiding) of elements. Controls how the elements will display and react to the size changes of parent element. These classes are named in the following format:

.d-{breakpoint}-{value}

Of which:
  • {breakpoint}: Not mandatory
  • {value}: Mandatory

{breakpoint}:

{breakpoint} Description
sm (Small). works when the element width is >= 567px
md (Medium). works when the element width is >= 768px
lg (Large). works when the element width is >= 992px
xl (Extra Large). works when the element width is >= 1200px
print related to printing

{value}:

{value} Description
none makes elements be hidden.
inline is the same as {display: inline}.
block is the same as  {display: block}.
inline-block is the same as  {display: inline-block}.
table is the same as  {display: table}. It makes elements have the same acts as the <table> element.
table-row is the same as  {display: tabled-row}. It makes elements have the same acts as the <tr> element.
table-cell is the same as  {display: table-cell}. It makes elements have the same acts as the <td> element.
flex is the same as {display: flex}. For details, see the Bootstrap Flex lesson
inline-flex is the same as  {display: inline-flex}. For details, see the ​​​​​​​ Flex Utility lesson

2- Class .d-inline, .d-block, .d-inline-block

If you have learned CSS, surely, you are familiar with:   {display: inline}, {display: block}, {display: inline-block}Bootstrap uses the .d-inline, .d-block, .d-inline-block classes instead of the above CSS properties. Both above approaches work similarly.

.d-block

The element applied the  .d-block class is a rectangular block. It breaks a line in front of and behind it, so they will be located on different rows. If this element is not assigned a fixed width, it will have width of 100%.
Example with .d-block:
d-block-example
<div class="container-fluid">
   <h3 class="mb-3">.d-block example</h3>
   <div class="d-block border" style="width:150px;">
      .d-block (width:150px)
   </div>
   <div class="d-block border">
      .d-block
   </div>
   <div class="d-block border" style="height:90px;">
      .d-block (height:90px)
   </div>
</div>

.d-inline

The elements applied the .d-inline class is not be a rectangular block, therefore, you can not set width and height for them. They are usually in the same row. But if the width of parent element is too small, some elements may be pushed down to lower row. The content of an element may be on one or more lines.
Example with  .d-inline:
d-inline-example
<h3 class="mb-3">.d-inline example</h3>

<div class="container-fluid">
   <div class="d-inline border border-primary" style="width:100px;">
      I am a .d-inline (width:100px not worked!)
   </div>
   <div class="d-inline border border-info">
      I am a .d-inline
   </div>
   <div class="d-inline border border-danger" style="height:90px;">
      I am a .d-inline (height:90px not worked!)
   </div>
</div>

.d-inline-block

The element applied the .d-inline-block class is a rectangular block. They may be on the same row. But if the width of parent element is too small, some elements may be pushed down to lower rows. If this element is not assigned a fixed width, its width will depend on the content.
Example with .d-inline-block:
d-inline-block-example
<h3 class="mb-3">.d-inline-block example</h3>

<div class="container-fluid">
   <div class="d-inline-block border border-primary" style="width:100px;">
      .d-inline (width:100px)
   </div>
   <div class="d-inline-block border border-info">
      .d-inline (no width, no height)
   </div>
   <div class="d-inline-block border border-danger" style="height:90px;">
      .d-inline (height:90px)
   </div>
</div>

3- Class .d-flex, .d-inline-flex

Flex ( .d-flex, .d-inline-flex) is the most important utility in the  Bootstrap, because of this importance it should be introduced in a separate lesson:

4- Class .d-table, .d-table-row, .d-table-cell

Class Description
.d-table is the same as {display: table}. It makes elements have the same acts as the <table> element.
.d-table-row is the same as {display: table-row}. It makes elements have the same acts as the <tr> element.
.d-table-cell is the same as {display: tabled-cell}. It makes elements have the same acts as the​​​​​​​ <td> element.

.d-table-row

The element applied the .d-table-row class have to be the child element of  ".d-table" element. It can not appear independently. You can not set up  margin, padding, height, width for it. These  properties are decided by its  ".d-table-cell" child element.
The  ".d-table-row" element can only establish a  border if it is child element of  ".d-table {border-collapse: collapse}" element.
d-table-row-example
<div class="container-fluid">
   <h3 class="mb-3 text-danger">.d-table + .d-table-row</h3>

   <h4>.d-table {border-collapse: collapse}</h4>
   <div class="d-table" style="border-collapse: collapse;">
      <div class="d-table-row border border-primary">
         .d-table-row .border .border-primary
      </div>
      <div class="d-table-row border border-success" >
         .d-table-row .border .border-success
      </div>
   </div>

   <h4 class="mt-3">.d-table {border-collapse: collapse} + width: 100% </h4>
   <div class="d-table w-100" style="border-collapse: collapse;">
      <div class="d-table-row border border-primary">
         .d-table-row .border .border-primary
      </div>
      <div class="d-table-row border border-success" >
         .d-table-row .border .border-success
      </div>
   </div>

</div>

.table-cell

The elements applied the  .d-table-cell class will have act like the  <td> element. You can set up  padding, width, height, border for it but  margin can not be set up. The  ".d-table-cell" elements can be the direct child elements of   ".d-table-row" or  ".d-table".
d-table-cell-example
<div class="container-fluid">
   <h3 class="mb-3 text-danger">.d-table-cell</h3>

   <div class="d-table">
      <div class="d-table-row">
         <div class="d-table-cell border p-4" style="width:200px;height:50px;">
            .d-table-cell .border .p-4 (padding)
            {width:200px;height:50px;}
         </div>
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
      </div>
      <div class="d-table-row">
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
      </div>
   </div>

</div>

5- Hide the (.d-none) element

The .d-none class applies to an element, which hides this element. It is like you use the Css property {display: none}. Conversely, if you apply one of the .d-inline, .d-inline-block, .d-block classes, this element will display.
The  .d-inline, .d-inline-block, .d-block classes have been mentioned in the above section.
Other classes apply to the  "Responsive" situation:
  • .d-none
  • .d-sm-none
  • .d-md-none
  • .d-lg-none
  • .d-xl-none
Below are some situations applying the above classes to an element and explaining their activities:
Class Interpretation
.d-none Elements will be hidden with all screen sizes.
.d-none .d-sm-block Elements will be hidden with the screen size of xs (Extra Small) (<567px).
.d-sm-none .d-md-block Elements will be hidden with the screen size of  [567px-768px).
.d-md-none .d-lg-block Elements will be hidden with the screen size of  [768px-992px).
.d-lg-none .d-xl-block Elements will be hidden with the screen size of  [992px-1200px).
.d-xl-none Elements will be hidden with the screen size of  xl (Extra Large) (>=1200px).
.d-block Elements always display with all screen size.
.d-block .d-sm-none Elements will be hidden with the screen size of  xs (Extra Small) (<567px).
.d-none .d-sm-block .d-md-none Elements will be hidden with the screen size of  [567px,768px).
.d-none .d-md-block .d-lg-none Elements will be hidden with the screen size of  [768px,992px).
.d-none .d-lg-block .d-xl-none Elements will be hidden with the screen size of  [992px,1200px).
.d-none .d-xl-block Elements will be hidden with the screen size of  xl (Extra Large) (>=1200px).
d-none-responsive-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Display</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-danger p-2">
         <h3 class="mb-3 text-danger">.d-none</h3>

         <div class="d-none d-sm-block bg-info">
            .d-none .d-sm-block
         </div>
         
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

6- Display when printing (.d-print-*)

Sometimes an user wants to print the content of a page. But actually there are contents unnecessary to print on the page, which costs papers for users. The  Bootstrap provides some classes to help you hide or display areas when printing.
Below is the list of classes related to displaying or hiding elements when printing:
  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex
Ví dụ:
d-print-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Display</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid">
         <h3 class="d-print-none">Print Example</h3>

         <div class="d-print-block border bg-info mb-2 p-2">
             <p>.d-print-block</p>
             <p>Print this Content.</p>
             <p>Print this Content.</p>
             <p>Print this Content.</p>
         </div>
         <div class="d-print-none border bg-danger p-2">
             <p>.d-print-none</p>
             <p>Do not print this Content.</p>
             <p>Do not print this Content.</p>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

View more Tutorials: