Bootstrap - Display: A Comprehensive Guide for Beginners
Hello there, aspiring web developers! Today, we're going to dive into one of Bootstrap's most useful features: Display utilities. As your friendly neighborhood computer teacher, I'm here to guide you through this topic with clear explanations and plenty of examples. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!
What is Bootstrap Display?
Before we jump into the nitty-gritty, let's understand what we mean by "display" in Bootstrap. In web development, "display" refers to how an element is shown on a web page. Bootstrap provides a set of classes that allow you to easily control the display behavior of elements.
Think of it like arranging furniture in a room. Sometimes you want a piece to be visible, sometimes you want to hide it, and sometimes you want it to behave differently depending on the size of the room (or in our case, the screen).
Notation
Bootstrap uses a simple and intuitive notation for its display classes. The general format is:
.d-{value}Where {value} can be one of the following:
| Value | Description |
|---|---|
| none | Hides the element |
| inline | Displays the element as an inline element |
| inline-block | Displays the element as an inline-level block container |
| block | Displays the element as a block element |
| table | Displays the element as a table |
| table-cell | Displays the element as a table cell |
| table-row | Displays the element as a table row |
| flex | Displays the element as a block-level flex container |
| inline-flex | Displays the element as an inline-level flex container |
Let's look at some examples:
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>In this example, we're using d-inline to make two div elements display inline. They'll appear side by side instead of stacking vertically.
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>Here, we're using d-block to make span elements (which are normally inline) display as blocks. They'll stack vertically.
Responsive Variations
Now, here's where it gets really interesting! Bootstrap allows you to apply different display properties based on screen size. The format for this is:
.d-{breakpoint}-{value}Where {breakpoint} can be:
| Breakpoint | Description |
|---|---|
| sm | Small devices (≥576px) |
| md | Medium devices (≥768px) |
| lg | Large devices (≥992px) |
| xl | Extra large devices (≥1200px) |
For example:
<div class="d-none d-md-block">
This text will be hidden on small screens but visible on medium and larger screens.
</div>This div will be hidden (d-none) by default, but will display as a block (d-md-block) on medium-sized screens and larger.
Hide Elements
Hiding elements is a common task in responsive design. Bootstrap makes this easy with the d-none class:
<div class="d-none">You can't see me!</div>This element will be completely hidden, regardless of screen size.
But what if you want to hide an element only on certain screen sizes? That's where responsive variations come in handy:
<div class="d-lg-none">I'm visible on all screens smaller than large.</div>
<div class="d-none d-lg-block">I only appear on large screens and up.</div>Display in Print
Bootstrap even lets you control how elements display when the page is printed! Use the d-print-{value} classes for this:
<div class="d-none d-print-block">I only show up when you print the page!</div>
<div class="d-print-none">I disappear when you print the page!</div>This is particularly useful for creating print-friendly versions of your web pages without needing separate stylesheets.
Putting It All Together
Let's create a small example that uses multiple display utilities:
<div class="container">
<h1 class="d-none d-md-block">Welcome to My Website</h1>
<h2 class="d-md-none">Welcome</h2>
<p class="d-inline-block bg-light p-2">I'm always inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-2">I appear inline on large screens.</p>
<div class="d-flex justify-content-between">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div class="d-none d-xl-block">I only show on extra large screens</div>
</div>
<footer class="d-print-none">This footer won't appear when printed.</footer>
</div>In this example:
- We have a large heading for medium screens and up, and a smaller one for smaller screens.
- We have two paragraphs, one of which only appears on large screens.
- We're using flexbox, with a third item that only appears on extra large screens.
- The footer won't be printed.
Conclusion
And there you have it, folks! We've explored the ins and outs of Bootstrap's display utilities. Remember, the key to mastering these is practice. Try creating your own layouts, experiment with different screen sizes, and don't be afraid to mix and match these classes.
As your old computer teacher, I can't stress enough how valuable these utilities are in real-world web development. They'll save you countless hours of writing custom CSS and debugging layout issues.
Now, go forth and create responsive, adaptive layouts with confidence! And remember, in the world of web development, as in life, sometimes the most powerful tool is knowing when to make something disappear. Happy coding!
Credits: Image by storyset