bootstrap
  1. bootstrap-displays
PreviousNext

Bootstrap Displays

  • Bootstrap provides various classes to control the display of elements on different screen sizes.
  • These classes make it easy to create responsive designs that adapt to different devices.

Syntax

To use Bootstrap display classes, you need to add them to your HTML elements. Here are some commonly used classes:

  • .d-none: this class hides an element on all screen sizes.
  • .d-sm-none: this class hides an element on screens smaller than 576px.
  • .d-md-none: this class hides an element on screens smaller than 768px.
  • .d-lg-none: this class hides an element on screens smaller than 992px.
  • .d-xl-none: this class hides an element on screens smaller than 1200px.
  • .d-block: this class displays an element as a block-level element.
  • .d-inline: this class displays an element as an inline-level element.
  • .d-inline-block: this class displays an element as an inline-level block element.
  • .d-flex: this class displays an element as a flex container.

Example

Here is an example of how to use Bootstrap display classes

<div class="d-none d-sm-block">
  This will be hidden on screens smaller than 576px.
</div>

<div class="d-none d-md-block">
  This will be hidden on screens smaller than 768px.
</div>

<div class="d-none d-lg-block">
  This will be hidden on screens smaller than 992px.
</div>

<div class="d-none d-xl-block">
  This will be hidden on screens smaller than 1200px.
</div>

<div class="d-block d-md-none">
  This will be displayed as a block-level element on screens smaller than 768px.
</div>

<div class="d-inline-block">
  This will be displayed as an inline-level block element.
</div>

<div class="d-flex">
  This will be displayed as a flex container.
</div>
Try Playground

Explanation

In the code above, we used different display classes to control how elements are displayed on different screen sizes. Using these classes will help you create responsive designs that automatically adapt to different devices.

Use

Bootstrap display classes can be used to control the visibility and layout of elements based on different screen sizes. These classes are especially useful for creating responsive designs that work well on all devices.

Important Points

  • Bootstrap provides various display classes to control the visibility and layout of elements on different screen sizes.
  • You can use display classes to hide or show elements on different devices, or to change the layout of elements based on screen size.
  • Display classes can help you create responsive designs that adapt to different devices.

Summary

Bootstrap display classes make it easy to create responsive designs that work well on all devices. By using display classes, you can control the visibility and layout of elements based on different screen sizes. It's a powerful tool that will help you build better websites.

HeadingsOther Typography
Published on: