override bootstrap @media breakpoint-CodePudding

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?

CodePudding user response：

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;
}

CodePudding user response：

If you are using angular and bootstrap scss, then use the below.

@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';