Menu
I need to use custom container in Bootstrap 3 to 1400px. How can I count grid column width and and @grid-gutter-width?
461
Go to the Customize section on Bootstrap site and choose the size you prefer. You'll have to set @gridColumnWidth and @gridGutterWidth variables. For example: @gridColumnWidth = 65px and @gridGutterWidth = 20px results on a 1000px layout.
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution. Show activity on this post. The default Bootstrap . container class has 15px padding on both left and right sides.
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
A Container is a Div block with pre-defined styles. It comes with a 940-pixel max-width on larger displays that keeps your content centered relative to the browser window. On smaller devices (like phones and tablets), Containers extend across the full width of the screen.
To change the container size from core, you have to declare your bootstrap container variable again, if you use bootstrap scss.
$container-max-widths: ( md: 720px, lg: 960px, xl: 1140px ) ;
52
If you use bootstrap SASS port you can easily do that by changing _bootstrap-variables.scss.
In _bootstrap-variables.scss search for $container-large-desktop and change its value to (1370px + $grid-gutter-width).
Default $grid-gutter-width is 30 px. You can change it also.
If you change $grid-gutter-width then change the $container-large-desktop accordingly to get your container size 1400px.
To know how to work with bootstrap SASS check it out : https://github.com/twbs/bootstrap-sass
38
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
