Responsive spacers

[ivar-suiteseven]

Hey!

I'd like to have different spacers for mobile and desktop, for example the mobile spacer '1' needs to be 8px, and desktop needs to be 16px. Is this possible in the boostrap variables file or do I need a different solution?

[julien-deramond]

Hey!

The Bootstrap spacing scale ($spacers) is globally defined in the SCSS variables file, ensuring consistent behavior across all breakpoints.

Just to clarify your requirement, are you looking to modify only the spacing utilities (like .m-* or .p-*) to behave differently between mobile and desktop? Or are you aiming to apply this change across the entire codebase, including all components that rely on spacers (e.g., .card, .container, etc.)?

If you're focusing only on utilities, you can leverage the Utilities API alongside Sass overrides to achieve this. However, if your goal is to include components as well, the task becomes more complex. You'd likely need to integrate custom properties in multiple places—some of which might not currently exist or are inconsistently implemented across Bootstrap components.

I haven't looked into the details of how to achieve that, but this is my initial impression based on your question.

[ivar-suiteseven]

Hey @julien-deramond,

Thanks for the quick response!

Let me explain the prefered situation, for example:

We are using utilities like .m-* or .p-*, these values are on every breakpoint the same, so we used to include the breakpoints like my-2 my-lg-0, the situation we are looking for, is to make the mark-up shorter. So we would like to use only my-2, and in the CSS the default is 2 spacers, but on mobile make it half, so on desktop it has to be 16px/1rem, but on mobile 8px/0.5rem. If thats possible we can make our mark-up cleaner and shorter. And make the front-end more consistent.

Hopefully the situation above is clear enough! 🙂

[julien-deramond]

I quickly tested a solution, and one approach could look like this. Hopefully, it helps you find a more suitable solution on your side:

$spacer: 1rem !default;

/* New stuff */
:root {
  --#{$prefix}spacer-0: 0;
  --#{$prefix}spacer-1: calc(#{$spacer} * .25); // stylelint-disable-line function-disallowed-list
  --#{$prefix}spacer-2: calc(#{$spacer} * .5); // stylelint-disable-line function-disallowed-list
  --#{$prefix}spacer-3: #{$spacer};
  --#{$prefix}spacer-4: calc(#{$spacer} * 1.5); // stylelint-disable-line function-disallowed-list
  --#{$prefix}spacer-5: calc(#{$spacer} * 3); // stylelint-disable-line function-disallowed-list

  /* Let's say that under 300px, all the spacings have half the value */
  @media (max-width: 300px) { /* You can probably use the Sass mixins/functions provided by Bootstrap instead to have the real values */
    --#{$prefix}spacer-0: 0;
    --#{$prefix}spacer-1: calc(.5 * #{$spacer} * .25); // stylelint-disable-line function-disallowed-list
    --#{$prefix}spacer-2: calc(.5 * #{$spacer} * .5); // stylelint-disable-line function-disallowed-list
    --#{$prefix}spacer-3: calc(.5 * #{$spacer}); // stylelint-disable-line function-disallowed-list
    --#{$prefix}spacer-4: calc(.5 * #{$spacer} * 1.5); // stylelint-disable-line function-disallowed-list
    --#{$prefix}spacer-5: calc(.5 * #{$spacer} * 3); // stylelint-disable-line function-disallowed-list
  }
}

/* Redefine content of `$spacers` */
$spacers: (
  0: var(--#{$prefix}spacer-0),
  1: var(--#{$prefix}spacer-1),
  2: var(--#{$prefix}spacer-2),
  3: var(--#{$prefix}spacer-3),
  4: var(--#{$prefix}spacer-4),
  5: var(--#{$prefix}spacer-5)
) !default;

In this setup, we define custom properties for breakpoints, and $spacers will reference these variables, which change based on the breakpoints, rather than using fixed values.

I'm not 100% sure because I haven't checked too much, but I think it's kind of safe for components as well because if I remember well, we don't use $spacers but calculations based on $spacer for the components.