Bootstrap 3 extra large (xl) columns

twitter-bootstrap twitter-bootstrap-3 less
dubloons picture dubloons · Apr 24, 2014 · Viewed 58.5k times · Source

In Bootstrap's LESS build can someone please tell me how to add a fifth device size, extra large (col-xl-#)?

Answer

Marc van Nieuwenhuijzen picture Marc van Nieuwenhuijzen · Oct 16, 2014

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.

Related questions

Fluid Container in Bootstrap 3

How to make fluid container in bootstrap 3? In bootstrap 2.3.2 .container-fluid class is there. But now in bootstrap 3 it is missing and there is only .container class. Please help me.

Read More
Styling Twitter's Bootstrap 3.x Buttons

Twitter's Bootstrap 3 buttons are limited in colors. By default there will be 5 7 colors (default primary, error, warning, info, success and link) See: Every button got 3 state (default, active and disabled) How to add more colors or create custom buttons? This …

Read More
Bootstrap 3: adding a new set of columns

I've been using Bootstrap 3 for a while and now I need to make a new set of extra small columns for horizontal mobiles (e.g. 384px screen width) and after this use it as follows: col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs, etc. …

Read More