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>
<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>
<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>
<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: 
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Nov, 2022
Like Article
Save Article