Menu
I have the following divs that use Bootstrap 3.0 CSS:
<div class="container"> <div class="row"> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> </div> </div> While this looks and behaves the way I want on XS to medium-sized devices, the expanded columns on large devices (>1200px) ruin my design.
Is there a way to stop bootstrap from expanding column width to 95px on large devices?
774
Bootstrap Grid - Large Devices Tip: Large devices are defined as having a screen width from 1200 pixels and above. For large devices we will use the . col-lg-* classes. Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those.
This is done by adding the class “col-SIZE-SIZE_TO_OCCUPPY”. For example, . col-md-4 which means take 4 columns on the medium-sized screens. If we stack multiple column classes on a single element we can define how we want the layout to look like on other screens and change the columns to rows as we want.
Bootstrap's grid system allows up to 12 columns across the page.
Bootstrap Grid - Small Devices Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels. For small devices we will use the . col-sm-* classes. Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".
Limiting the container width to max container width for medium devices (970px) will do the trick:
<div class="container" style="max-width: 970px;"> <div class="row"> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> <div class="col-md-4"> ... </div> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
