Next values for multiplier in spacers bootstrap 4

user_2219158 0
Viewed 97

Bootstrap comes with 0-5 spacers and multiplier is 0.25 to 3. If I want to add spacers up to 15, what would be values of multiplier.

I could see one sequence that is current number is 2x than previous number.

e.g. 3 is double than 1.5, 0.5 is double than .25.

Is this assumption correct? What would be next 6 to 15 ideal multiplier look like?

https://getbootstrap.com/docs/4.5/utilities/spacing/

enter image description here

scss-mixins bootstrap-4 sass html
1 Answers

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>

Run above snippet, go in full page mode, then open Chrome Developer Tools, then click Toggle Device Toolbar` and select Dimensions: Responsive option. Resize the width. You'll notice the element scales for different viewport size i.e. when it hits the breakpoints.

Intention to add more spacing values could be:

  • finer spacing options- if you want more control then you can have values which are multiples of 4px. For example, considering 1rem=16px the values can be 0, 0.25, 0.5, 1, 1.25, 1.5, 1.75, 2,...,4.
  • vertical rhythm- For this you'll have to look at elements on your page and determine what paddings and margins you need for all of them and put the values in $spacers map.

Following SO questions have good discussion about spacing:

What are the rules of thumb for margins in web design?
General rule to calculate padding

user_152739680
Related