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