Display Bootstrap
Bootstrap 4 is a powerful front-end framework for developing responsive and mobile-first websites. The display utility classes in Bootstrap 4 allow you to control the display property of an element. These classes are particularly useful for quickly toggling the display of elements.
Common display Classes in Bootstrap 4:
d-block: Displays an element as a block element.d-inline: Displays an element as an inline element.d-inline-block: Displays an element as an inline block element.d-none: Hides an element (display: none).
Responsive display Classes:
Bootstrap 4 also provides responsive variants for each display class. You can specify different display values at different breakpoints (sm, md, lg, xl).
d-{breakpoint}-block: Display as block element from the specified breakpoint and up.d-{breakpoint}-inline: Display as inline element from the specified breakpoint and up.d-{breakpoint}-inline-block: Display as inline-block element from the specified breakpoint and up.d-{breakpoint}-none: Hide the element from the specified breakpoint and up.
Examples
Here are some examples demonstrating how to use these classes.
Example 1: Basic d-block and d-inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Display Classes</title>
</head>
<body>
<div class="d-block bg-primary text-white p-3">
I am a block element.
</div>
<span class="d-inline bg-success text-white p-3">
I am an inline element.
</span>
</body>
</html>
Example 2: Using d-none to Hide Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Display Classes</title>
</head>
<body>
<div class="d-none d-md-block bg-warning text-white p-3">
I am hidden on small screens but visible on medium and larger screens.
</div>
</body>
</html>
Example 3: Responsive display Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Display Classes</title>
</head>
<body>
<div class="d-sm-none d-md-inline d-lg-block bg-danger text-white p-3">
I am hidden on extra small screens, inline on medium screens, and block on large screens.
</div>
</body>
</html>
In these examples:
- The first example demonstrates how to use
d-blockandd-inlineto control the display type of elements. - The second example shows how to use
d-nonealong with responsive display classes to hide elements on certain screen sizes. - The third example illustrates using responsive display classes to change the display type based on the screen size.
By leveraging these classes, you can quickly and efficiently manage the visibility and display properties of elements across different screen sizes in your Bootstrap 4 projects.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Copyright 2023-2025 © All rights reserved.