I am very new at this stuff, so please bear with me.
I have been messing around views recently and was wondering if it's possible to override the breakpoints stored in the bootstrap.
ie)
:root {
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
}
specifically, I'd like to override the --breakpoint-md setting. I've noticed similar questions have been asked, but the answers weren't clear. from what I see, these become variables that are used in specific instances. I'd like the setting to apply to the entire site. Is this possible?
To explain a bit. When I change the screen size my columns stack at 767px, which is the look I'm going for at 768px, but at 768px the views are squished ugly. I have been reading about scss a bit, is that the only solution?
You can customize anything you'd like to with bootstrap.
To get started, take a look at the documentation on customization here: https://getbootstrap.com/docs/5.0/customize/overview/
Your best bet would be to use sass, as documented here: https://getbootstrap.com/docs/5.0/customize/sass/
Something like this in your custom.scss file.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
:root {
--breakpoint-md: 768px;
}
If you are using bootstrap scss, then use the below.
First You have to install boostrap
npm install bootstrap
And then you can set custom breakpoints.
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
vs: 300px,
sm: 500px,
md: 750px,
lg: 1000px,
vl: 1300px,
xl: 1600px
);
$container-max-widths: (
xs: 299px,
vs: 499px,
sm: 749px,
md: 999px,
lg: 1299px,
vl: 1599px,
xl: 1999px
);
@import '../node_modules/bootstrap/scss/bootstrap.scss';