Display Property in Bootstrap with Examples
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 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <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: 
Please Login to comment...