Bootstrap Class "mb-3" - CSS

mb-3 is a pre-defined class in Bootstrap that controls the margin-bottom property. This class is used to create space between two elements on the page. In this article, we will discuss in detail about Bootstrap Class "mb-3" - CSS.

Syntax

<div class="mb-3">Content Goes Here</div>

Usage

To use mb-3, you need to apply this class to any element where you want to add margin-bottom. The mb-3 class adds a margin of 1rem (16px) to the bottom of the element. You can use this class on various HTML elements, including <p>, <div>, <section>, <header>, <footer>, etc.

<section class="mb-3">
   <h2>Heading</h2>
   <p>Text goes here...</p>
</section>

Combining with Other Margin Classes

You can also combine the mb-3 class with other margin classes, such as mt-2, ml-4, mx-5, and others, to add margin to different sides of an element.

<section class="mb-3 mt-2 mx-5">
   <h2>Heading</h2>
   <p>Text goes here...</p>
</section>

Modifying Margin Sizes

Bootstrap provides various margin classes, such as mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-auto. These margin classes control the margin-bottom property with a different value. You can modify the margin size by changing the class name.

<section class="mb-5">
   <h2>Heading</h2>
   <p>Text goes here...</p>
</section>

Conclusion

In conclusion, mb-3 is a useful class in Bootstrap that provides a pre-defined value for margin-bottom property. You can use the mb-3 class to create space between two elements on your web page. It's also easy to modify the margin size by changing the class name. Combining with other margin classes is also possible to add margin to different sides of an element.