bootstrap
  1. bootstrap-spacing
PreviousNext

Bootstrap Spacing

  • Bootstrap provides a collection of CSS classes that can be used to add spacing to your elements.
  • These classes make it easy to create a consistent and visually appealing layout for your website.

Syntax

To add spacing to your elements using Bootstrap, you can use the following CSS classes:

  • mt-*: Adds margin to the top of an element. *
  • mb-*: Adds margin to the bottom of an element. *
  • ml-*: Adds margin to the left of an element. *
  • mr-*: Adds margin to the right of an element. *
  • mx-*: Adds margin to the left and right of an element. *
  • my-*: Adds margin to the top and bottom of an element. *
  • pt-*: Adds padding to the top of an element. *
  • pb-*: Adds padding to the bottom of an element. *
  • pl-*: Adds padding to the left of an element. *
  • pr-*: Adds padding to the right of an element. *
  • px-*: Adds padding to the left and right of an element. *
  • py-*: Adds padding to the top and bottom of an element. *

The * in the syntax represents a number between 0 and 5, where 0 represents no spacing, and 5 represents the maximum spacing.

You can also use the m-auto and mx-auto classes to center your element horizontally.

Example

Here is an example of how to use the mt-5 class to add margin to the top of an element.

<div class="m-5 border">
    <p class="p-3">This element has a margin of 5 and padding 3.
    </p>
</div>
Try Playground

Explanation

By adding the mt-5 class to the element, we are telling Bootstrap to add a margin of 5 to the top of the element.

Use

Bootstrap spacing classes can be used to add spacing to various elements such as headers, paragraphs, buttons, and more. You can also use them to create consistent spacing between elements on your web page.

Important Points

  • Bootstrap provides a collection of CSS classes that can be used to add spacing to your elements.
  • You can use the margin and padding classes to add spacing to your elements.
  • The * in the syntax represents a number between 0 and 5, where 0 represents no spacing, and 5 represents the maximum spacing.

Summary

Bootstrap spacing classes make it easy to create a visually appealing layout for your website. By using these classes, you can add margins and paddings to your elements and create consistent spacing between them.

SizingText Align
Published on: