Menu
In Bootstrap's LESS build can someone please tell me how to add a fifth device size, extra large (col-xl-#)?
710
col-xxl-* and only use the . col-xxl class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width. If the screen size is less than 1400px, the columns will stack horizontally: <!--
The Bootstrap grid has only 12 columns, so you should never have more than 12 columns in a row. You should have only 3 col-md-4 in each .
Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.
Bootstrap's grid system allows up to 12 columns across the page.
You can download a simple small CSS file from GitHub using this link: https://github.com/marcvannieuwenhuijzen/BootstrapXL
If you add this CSS file to the HTML after the Bootstrap CSS file you will be able to use col-xl-{size}, col-xl-push, hidden-xl, etc. The media-query breakpoint is 1600px;
Update The alpha release for Bootstrap 4 is available now with native support for extra large screens. http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ but it's breakpoint for extra large is still 1200px.
Update 2 (july 2017) Stop using bootstrap and start using standard CSS grids, TODAY. You can find an introduction here.
110
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
