Bootstrap - Visibility
Bootstrap Visibility Classes
Bootstrap provides visibility classes that allow you to control the visibility of elements on your web page. These classes are useful for creating responsive designs and adapting your content to different screen sizes. Here are the types of visibility classes available in Bootstrap.
Hiding Elements
Bootstrap offers classes to hide elements on all screen sizes or specific screen sizes.
Example: Hiding on All Screen Sizes
<div class="d-none">This element is always hidden.</div>Example: Hiding on Specific Screen Sizes
<div class="d-none d-md-block">This element is hidden on small screens but visible on medium and larger screens.</div>Showing Elements
Similarly, Bootstrap provides classes to show elements on all screen sizes or specific screen sizes.
Example: Showing on All Screen Sizes
<div class="d-block">This element is always visible.</div>Example: Showing on Specific Screen Sizes
<div class="d-lg-none">This element is visible on small and medium screens but hidden on large and larger screens.</div>Printing Classes
Bootstrap also provides classes to control element visibility when printing web pages.
Example: Hiding When Printing
<div class="d-print-none">This element is hidden when printing.</div>Example: Showing When Printing
<div class="d-print-block">This element is visible only when printing.</div>By using these printing classes, you can customize the appearance of your web page when it is printed, ensuring that only the relevant content is included and formatted appropriately.
Combining Visibility Classes
Bootstrap lets you combine visibility classes to create responsive layouts. By using a combination of classes, you can control the visibility of elements based on screen sizes and printing conditions.
Example: Hiding an Element on Small Screens
<div class="d-none d-md-block">
This element is hidden on small screens but visible on medium and larger screens.
</div>You can also use visibility classes to create responsive layouts that adapt to screen sizes. By applying combinations of classes to elements, you can show or hide them based on the available screen space. This helps optimize the user experience and present content in a way that suits the device.
Example: Responsive Layout Using Visibility Classes
<div class="row">
<div class="col-md-4 d-none d-md-block">
Sidebar content (hidden on small screens)
</div>
<div class="col-md-8">
Main content (always visible)
</div>
</div>Real-world scenarios often need more complex visibility control. For example, you might want to show different elements based on the user's device or hide elements when printing. By combining visibility classes with other Bootstrap classes and custom styles, you can create customized and responsive designs.
Example: Complex Visibility Control in a Real-World Scenario
<div class="d-none d-md-block d-print-none">
Desktop-only content (hidden on small screens and when printing)
</div>
<div class="d-block d-md-none">
Mobile-only content (visible only on small screens)
</div>
<div class="d-none d-print-block">
Print-only content (visible only when printing)
</div>By combining visibility classes in creative ways, you can build responsive and adaptive layouts that work for different devices, screen sizes, and printing needs.