Bootstrap 4 Add More Sizes Spacing

Next values for multiplier in spacers bootstrap 4

The spacer values are not a sequence/series. They are put on scale 1-5 to provide consistent responsiveness across the breakpoints.

Following breakpoints xs, sm, md, lg were available when these values were introduced:

// Media queries breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.

// Grid system
//
// Define your custom responsive grid.
$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,
  // Medium screen / tablet
  md: 48em,
  // Large screen / desktop
  lg: 62em,
  // Extra large screen / wide desktop
  xl: 75em
) !default;

If you look at the code when first time these values were introduced the classes were defined like these:

 .m-t-0  { margin-top:  0; }
 .m-t    { margin-top:  $spacer-y; }
 .m-t-md { margin-top: ($spacer-y * 1.5); }
 .m-t-lg { margin-top: ($spacer-y * 3); }

They added values .25 and .5 to the scale later on.

I think they want to provide way to scale element sizes according to size of the viewport like this:

<body class="col-7 mx-auto" style="border: 2px dashed gray;">
  <div class="fs-6 
              p-0 p-sm-3 p-md-4 p-lg-5 
              m-0 m-sm-3 m-md-4 m-lg-5 
              border border-4 border-info">
    <div class="bg-warning">Lorem ipsum dolor sit amet consectetur.</div>
  </div>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
</body>

Unable to undertstand usage of $spacer in Bootstrap 4

If the variable wasn't set then it wouldn't be possible… but since it is set (right here), that doesn't matter.

Is it possible to add more than mt-5 to my top margin?

There is no higher value in Bootstrap but you could make your own classes. The documentation says "You can add more sizes by adding entries to the $spacers Sass map variable.", but if you don't want to recompile the SASS you can make you own class like this:

.mt-6 {
    margin-top: 4rem; // or the value you want
}

The Bootstrap classes already use rem for the margin classes so it is better to stay with the same unit. The existing classes use these values (it could help you decide what you want to use for your value):

.mt-5 is set to 3rem so this is 1rem unit higher.
.mt-4 is 1.5rem (so you might want to use 1.5rem higher for your class)
.mt-3 is 1rem
.mt-2 is 0.5rem
.mt-1 is 0.25rem

If you use it consistently on the top of all elements in the row, it will not affect the responsiveness. But if you use it left or right also, then it can affect responsiveness because it affects the width.

Does bootstrap have builtin padding and margin classes?

There are built in classes, namely:

.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }

.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }

.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }

.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }

.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }

.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }

.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }

.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }

.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }

.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }

.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }

.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }

.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }

.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }

Bootstrap 4 Add More Sizes Spacing

Next values for multiplier in spacers bootstrap 4

Unable to undertstand usage of $spacer in Bootstrap 4

Is it possible to add more than mt-5 to my top margin?

Does bootstrap have builtin padding and margin classes?

Related Topics

Leave a reply