Override default Bootstrap breakpoints

Bootstrap Studio Help
1

Hello everyone,

I’m trying to figure out where and how I can add the following breakpoints so that my Bootstrap stylesheet can use these instead of the default ones.

I’ve added these breakpoints to my style.css file:

:root {

–bs-breakpoint-xs: 0;

–bs-breakpoint-sm: 576px;

–bs-breakpoint-md: 768px;

–bs-breakpoint-lg: 1024px;

–bs-breakpoint-xl: 1280px;

–bs-breakpoint-xxl: 1536px;
}

I can see that the default Bootstrap values are set, but when I preview my page, the default breakpoints are still displayed. Additionally, the devices icon on the bar above for changing the viewports also shows the default values.

Could anyone please help me with this?

Filipp

2

The best way to change this behaviour would be to go to Bootstrap, and download the original Bootstrap.css file and edit that with your break points, then import that as a theme file.

I don’t know if this will change the breakpoints the application uses on the buttons above the canvas however.

Let me know if you have any trouble setting this up!

3

Thank you for your prompt response! :folded_hands:t2:

I tried to apply the updated breakpoints values to the CSS, but unfortunately, the website keeps getting stuck on the default settings. I can see the CSS with the new breakpoints values, but previewing the website doesn’t seem to work.

4

Could you publish it and I’ll have a look?

5

I’ll try to find a way to do that. Thank you

6

I have discovered the issue, white there are variables in the CSS file, the compiled version of Bootstrap does not always use these variables and instead most of the breakpoint behaviour is hard coded.

I will see if I can prepare a file with the breakpoints you are looking for.

7

CSS custom properties --variables can’t replace Sass variables used in media queries. To truly override Bootstrap breakpoints, you must recompile the Sass source or manually write your own CSS media queries.

8

Any suggestion on how I could do that on BSS?