Open In App

Display Property in Bootstrap with Examples

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

The display property in Bootstrap is used to set an element’s display property. The utilities such as block, inline etc are to set the element’s display property. The display property classes of bootstrap help to directly set the CSS display property for an element. The available classes are:

  • .d-block: This class when used with an element, sets it display property to block. Using this class with an element is equivalent to the below styling:
style = "display: block;"
  • .d-inline: This class when used with an element, sets it display property to inline. Using this class with an element is equivalent to the below styling:
style = "display: inline;"
  • .d-inline-block: This class when used with an element, sets it display property to inline-block. Using this class with an element is equivalent to the below styling:
style = "display: inline-block;"
  •   .d- flex : This class is used with an element , to display content of web page in box format.

   style  = ” display: flex;”

  •  .d – grid :  This class is used with an element , to display content of web page in grid format.

  style  = ” display: grid;”

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

Below examples illustrate the use of the display properties classes of bootstrap: Example 1: 

html




<!DOCTYPE html>
<html>
      
<head>
    <style>
        div{ font-size: 30px; }
    </style>
      
    <!-- Include Bootstrap CSS and JS -->
      
    <title>Webpage</title>
</head>
  
<body>
    <div class="d-block bg-primary">
        GeeksforGeeks
    </div
     
    <div class="d-block bg-primary">
        GeeksforGeeks
    </div
</body>
</html>


Output: Example 2: 

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: Example 3: 

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>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads