Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display Property in Bootstrap with Examples
The Display property in Bootstrap is used to set the element’s display property. The Bootstrap utilities provide classes such as "block", "inline", etc., which are used to directly control the display property of an element. These display property classes in Bootstrap allow developers to easily apply CSS display property values to elements without manually writing the corresponding CSS styles.
Following are the display property classes −
.d-block − This class sets the display property of an element to block.
.d-inline − This class sets the display property of an element to inline.
.d-inline-block − This class sets the display property of an element to inline-block.
Syntax
Following is the syntax of "d-inline", "d-block", and "d-inline-block" classes in Bootstrap −
<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
In the following example, we are demonstrating the usage of "d-block" class.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<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>
</head>
<body>
<div class="d-block bg-success"> Tutorialspoint </div>
<div class="d-block bg-success"> Tutorialspoint </div>
</body>
</html>
Example
In the example below, we are using the bootstrap "d-inline" class on HTML <div> elements −
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<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>
</head>
<body>
<div class="d-inline bg-success"> Tutorialspoint </div>
<div class="d-inline bg-success"> Tutorialspoint </div>
</body>
</html>
Example
In the following example, we are demonstrating the usage of "d-inline-block" class.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<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>
</head>
<body>
<div class="d-inline-block bg-success"> Tutorialspoint </div>
<div class="d-inline-block bg-success"> Tutorialspoint </div>
</body>
</html>
135 Views
