Search code examples
javascripthtmlcsssass

override bootstrap @media breakpoint

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?

Solution

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