Display Property In Bootstrap With Examples

Posted By Bajarangi soft , Posted On 09-10-2020

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;"

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

Example-1

<!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">
   Bajarangi Soft
</div>

<div class="d-inline bg-success">
 Bajarangi Soft
</div>
</body>
</html>

Example-2

<!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">
  Bajarangi Soft
</div>

<div class="d-inline-block bg-warning">
 Bajarangi Soft
</div>
</body>
</html>

Example-3

<!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">
    Bajarangi Soft
</div>

<div class="d-block bg-primary">
    Bajarangi Soft
</div>
</body>
</html>

Related Post

How To Change The Position Of Modal Close Button In Bootstrap
How To Get Circular Buttons In Bootstrap 4
Gradient Borders IN Bootstrap 4
How To Place Table Text Into Center Using Bootstrap
Display Property In Bootstrap With Examples
How To Create a Radio Button Similar To Toggle Button Using Bootstrap
How To Create Notification Alert On Top Right Corner In Bootstrap
How To Place Button In Top Right Corner Using Bootstrap
How To Enable Bootstrap Tooltip On Disabled Button