How can the $spacer variable in Bootstrap be modified?

My attempt to adjust the $spacer variable in SASS to increase margins seems to be failing. Here is my code:

@import url(../node_modules/bootstrap/scss/_functions.scss);
@import url(../node_modules/bootstrap/scss/_variables.scss);
@import url(../node_modules/bootstrap/scss/_utilities);

$spacer: 15rem;

@import url(../node_modules/bootstrap/scss/bootstrap.scss);

:root {
  --bs-body-font-family: 'Inter', Arial;
}

h1 {
  font-size: 5.93rem;
  line-height: 121%;
}

h2 {
  font-size: 2.5rem;
  line-height: 212%;
}

h3 { 
  font-size: 1.5rem;
  line-height: 120%;
}

I placed $spacer: 15rem where I believe it should go, after importing _functions.scss and before bootstrap.scss.

However, the resulting CSS file does not show any changes to the margins. Upon investigation, I realized I was using @import url(./././././.), which I have now corrected to @import "././././". The CSS output is now displaying correctly, but the margins are still unchanged.

htmlcsssassbootstrap-5

Answer №1

According to the official Bootstrap 5 documentation,

You should only make variable overrides after importing our functions, but before any other imports.

For example, if you want to change the $spacer value, you can do it like this:

// necessary
@import "functions";

// custom variable overrides
$spacer: 6rem;

// additional imports or include all of Bootstrap
@import "bootstrap";

Here is a live SASS demo for reference: SASS demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

Issues with Angular HTML failing to load correctly

Greetings, I am seeking assistance with an issue that has been challenging me for quite some time. As a newcomer to Angular JS, I may be overlooking something obvious. Here is the scenario: I am utilizing ng-repeat on a directive in the following manner: ...

htmlangularjs

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Guide on embedding a form component within an iframe using ReactJS

I am trying to figure out how to render my form component inside an iframe, but so far it's only rendering the iframe itself. Any tips on how to accomplish this task? import './App.css'; import ReactDOM from "react-dom/client" impo ...

javascripthtmlreactjs

Out-of-sync movement in animated characters

Looking for some assistance with my page coding. I have a scenario where two stars are moving around a button, simulating an animation by incrementing the CSS properties top and left. Initially, everything appears fine and they move synchronously. However, ...

javascripthtmlcssanimation

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

javascriptjquerycssgoogle-maps

What could be the reason behind a CSS caption overlapping another image within this table?

This is the CSS caption effect I am using: .cell { position: relative; width: 180px; height: 180px; } .caption {} .cell .caption { opacity: 0; text-decoration-color: gray; text-align: center; background: #eaeaea; position: absolute; fo ...

htmlcsshover

Customizing popups and tooltips in Material-UI charts

Has anyone had success with customizing the appearance of the popover/tooltip in mui charts? It seems like it should be a simple task, but despite searching extensively, I have only found information on formatting data and nothing about styling the CSS. ...

cssreactjsmaterial-uimui-xmui-x-charts

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...

javascriptjqueryhtmlcsshover

Define the position of a scrolled area within an HTML document to create a

In my current project, I have a scrollable area that highlights the selected div in gray. The HTML is written using Ember (hbs) and includes code to handle this functionality. Below is an example of how the div looks: https://i.sstatic.net/T2Lur.png Here ...

javascripthtmlcssember.js

What is the best way to eliminate the excess space below the footer on a vuejs page?

I am developing a footer using vuejs along with buefy. In my implementation of App.vue below, I am encountering a white margin under the footer. // App.vue <template> <div id="app"> <main-header /> <router-view/ ...

htmlcssvue.js

A guide on utilizing radio buttons to delete specific rows within a table with the help of AngularJS

My current issue involves using radio buttons to delete rows in a table. The problem I'm encountering is that multiple rows are being deleted at once instead of just one. You can view an image of my table here. As we all know, with radio buttons, onl ...

htmlangularjsradio-buttonangularjs-ng-repeat

Struggling with developing a straightforward application with Angular-Material

My goal is to develop an application that utilizes the Angular Material navigation bar, as showcased in this example. Being relatively new to AngularJS, I'm facing an issue where my app loads but only displays a blank page. Below is the code snippet ...

javascripthtmlangularjstwitter-bootstrapangular-material

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

htmlcsstwitter-bootstrap

BS 5.0.2 - Successfully preventing default behavior of dropdowns - Effective in BS4, however not compatible with BS5

With Bootstrap 4, I could use jQuery to prevent dropdowns from showing based on a condition being met. However, in version 5.0.2, this approach no longer works and the dropdowns still display as usual. It seems like stopPropagation() and preventDefault() a ...

twitter-bootstrapbootstrap-5

Error encountered during SASS compilation with Gulp - issue with importing breakpoints detected

I've been troubleshooting Gulp errors. My setup includes: Mac OS Sierra 10.12.5 Local installation of Drupal 7 using Acquia Dev Desktop Followed instructions in the Readme.txt of the Zen starter theme to install npm and gulpfile.js I've mana ...

node.jssassgulpdrupal-7

Anchor tag remains in fixed location in HTML

Here's a link that I need help with: <a id="readmore" href="#">READ MORE</a> Currently, when the user clicks on this hyperlink, I am using Jquery to toggle the content below it to show/hide the content. However, I have encountered an ...

jqueryhtml

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Steps for changing the background color string in mui?

I have a component where I am trying to dynamically change the color based on the user type. The issue arises when I use gradient colors, as the transition stops working. If I stick to simple colors like blue, red, or green, it works fine. Currently, the c ...

cssreactjsmaterial-ui

Isotope data-filter not working properly following an Ajax callback

I'm looking for a way to create a filter that can be dynamically updated: I have utilized the isotope javascript library in an external script file: var $container = $('.isotope'); // initialize isotope $container.isotope({ ...

javascriptjqueryhtmlajaxjquery-isotope