If you’ve ever used Bootstrap in a project you’ve likely run into the issue where the library doesn’t have all the features you need. One issue in particular I’ve found myself running into routinely is the spacing utility topping out at 3rem. In this article I show you how to extend it to give you more options for spacing.

In Bootstrap 5.3, the availability to customize things like the spacing utility is made pretty simple. To get an idea of how to customize Sass for your project go to Bootstrap’s customize Sass documentation. In this article, I’m following their recommendation to include Sass customization by adding this to a custom.scss file.

Add custom Sass file to your project

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Add customization

Now that you’ve included this in your project map some custom Sass under section 4. In my case I’m naming my Sass map $custom-spacers.

// 4. Include any default map overrides here

// Map Custom Spacers
$custom-spacers: (
    6: $spacer * 4.5,
    7: $spacer * 6,
);

// Merge the maps
$spacers: map-merge($spacers, $custom-spacers);

Compile and your done

Now all you need to do is compile your Sass and voila! You have more than 5 spacing utilities. So if you want to have padding that goes beyond 3rem like this:

<div class="p-5">Some content</div>

You can now write a p-6 or p-7 class like this…

<div class="p-6">Some content</div>

There you have it… simple and easy custom Bootstrap spacing utilities.