Can container (not container-fluid) be 100% wide when viewport is < XXXpx with Bootstrap 4?

user_4014834 0
Viewed 364

I'm using Bootstrap 4 and noticing that I'm losing precious horizontal real estate at every breakpoint. I'd like for the outermost container to be 100% wide any time the browser is < 1200px.

I added this to my CSS:

@media (max-width: 1199px) {
  body > .container {
    width: 100%;
    max-width: 1140px;
  } 
}

I used 1140px as the width because that's what the documentation said the max width of an element with .contianer can be.

You can see it here.

When I resize the browser, everything adjusts as I intended, but is this just a case of getting lucky and that changing the width from Bootstrap's core values totally jacks up the grid? Is here a "correct" way to do this using .container-fluid?

bootstrap-4 breakpoints css
2 Answers

Here is the exact solution of your question: https://www.beyondjava.net/how-to-add-a-new-breakpoint-in-bootstrap

When you are using Bootstrap 4, you should use it's basic features like media-breakpoints.

In the bootstrap_config and _variables you can specify the point of each breakpoint at how wide the screen should be to trigger it.

NOTE: in this case, the lg stands for your own choise wich breakpoint you want to give the value 1200px

In this case if you config your boostrap to trigger the lg classes at 1200px, then if you add the following code, on every screen which is less wide than 1200px, the container class will be 100% in width.

@include media-breakpoint-down(lg){
    .container{
        width: 100%;
        max-width: 1140px;
    }
}
user_93270500

So you basically want your container to behave the same way as .container-fluid when your viewport is less than 1200px. I think Patrik's answer is the most correct way to do this (by modifying the source file), but if you don't want to do that, then I think your method is OK.

However, I think the CSS you are using in your ruleset could be revised. You could set the max-width property to none which is the default value for that property. This has the effect of unsetting whatever Bootstrap's CSS applies for this property. 

@media (max-width: 1199px) {
    body > .container {
        width: 100%;
        max-width: none;
    } 
}

MDN article showing none as the default value for max-width:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values

user_25182000
Related