Examples of Bootstrap Display Property
Example 1: In this example we uses Bootstrap’s d-block class to display two divs as block elements with a blue background color.
<!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" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<title>Webpage</title>
</head>
<body>
<div class="d-block bg-primary">
w3wiki
</div>
<div class="d-block bg-primary">
w3wiki
</div>
</body>
</html>
Output: Example 2: In this example we use Bootstrap’s d-inline class to display two divs as inline elements with a green background color.
<!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">
w3wiki
</div>
<div class="d-inline bg-success">
w3wiki
</div>
</body>
</html>
Output: Example 3: In this example we use Bootstrap’s d-inline-block class to display two divs as inline-block elements with a yellow background color.
<!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">
w3wiki
</div>
<div class="d-inline-block bg-warning">
w3wiki
</div>
</body>
</html>
Output:
Display Property in Bootstrap with Examples
In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation.
The available classes are:
Class Name | Description |
---|---|
.d-block | Sets the display property of an element to block, making it a block-level element. |
.d-inline | Sets the display property of an element to inline, allowing it to flow inline with text. |
.d-inline-block | Sets the display property of an element to inline-block, combining inline and block. |
.d-flex | Displays content in a box format using the Flexbox layout model. |
.d-grid | Displays content in a grid format using the CSS grid layout model. |
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
Contact Us