1

Before I get completely shot down in flames on here, I can't think of any other way of wording or phrasing this question other than how I'm doing as follows....

I would like to set 2 additional breakpoints in Bootstrap 4 for 1366px and 1920px as Bootstrap's xl is very limited at just 1200px.

My page references bootstrap.min.css and bootstrap.bundle.min.js.

I have added --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; directly after --breakpoint-xl:1200px; in the boostrap.min.css file and I've then created two columns as follows:

<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 1 Content
</div>
<div class="col-xxxl-6 col-xxl-6 col-xl-12 col-lg-6 col-md-6 col-sm-6">
     Column 2 Content
</div>

When I preview this in the browser at 1366 and 1920 the columns are not adjusting to 50%/50%.

Have I misunderstood how to do this? Thank you. NJ

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
NathonJones
  • 919
  • 4
  • 13
  • 28

1 Answers1

5

Your question is very similar to How to create new breakpoints in bootstrap 4 using CDN?

"Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?"

Yes, but it would require adding a lot of CSS to support the new breakpoints. Each breakpoint is referenced more than 280 times in the Bootstrap CSS. Therefore, adding 2 new breakpoints would add more than 500 new classes to the CSS. Remember that the breakpoints aren't just used for the grid col-*, the breakpoints are also used for many other responsive features like the flexbox, alignment & display utilities.

"I have added --breakpoint-xxl:1366px;--breakpoint-xxxl:1920px; directly after --breakpoint-xl:1200px; in the boostrap.min.css file"

These are CSS variables. The CSS variables can used if you want to reference them in a @media query, but they're not going to magically add new classes for the new breakpoints.

"I would like to set 2 additional breakpoints in Bootstrap 4 for 1366px and 1920px"

This would be done using SASS as explained here. The SASS gets compiled to CSS. You would just add the grid-breakpoints. The generated CSS would contain all of the new col-xxl-*, col-xxxl-*, etc.. and all of the other responsive classes and media queries as explained above.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1366px,
  xxxl: 1920px
);

Demo: https://codeply.com/go/vC6Ocuw1zo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624