Bootstrap 3 extra large (xl) columns

Question

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

Solution 1

You can create a other less file (for instance bootstrapxl.less), containing the following code and compile that file:

@import "bootstrap.less";

// XLarge screen
@screen-xlg:                  1600px;
@screen-xlg-min:              @screen-xlg;
@screen-xlg-hughdesktop:      @screen-xlg-min;

// So media queries don't overlap when required, provide a maximum
@screen-lg-max:              (@screen-xlg-min - 1);

//== Container sizes
// Large screen / wide desktop
@container-xlarge-desktop:      ((1540px + @grid-gutter-width));
@container-xlg:                 @container-xlarge-desktop;

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  @media (min-width: @screen-xlg-min) {
    width: @container-xlg;
  }
}

.make-grid-xlgcolumns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xlg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xlg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}
.make-grid-xlgcolumns();
.make-grid(xlg);

// Generate the large columns
.make-xlg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-xlg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-xlg-column-offset(@columns) {
  @media (min-width: @screen-xlg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-xlg-column-push(@columns) {
  @media (min-width: @screen-xlg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-xlg-column-pull(@columns) {
  @media (min-width: @screen-xlg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Notice that instead of the .make-grid-xlgcolumns mixin in the above code you could also modify the .make-grid-columns() mixin in the less/minins/grid-framework.less file by adding the .col-xlg- class prefix.

Since BS 3.2.0 you should use the autoprefixer to make sure that your new compiled version has the same browser support as the original compiled version, see also: https://github.com/twbs/bootstrap/issues/13620 To run the autofixer for your new code replace the bootstrap.less file reference with a reference to your new bootstrapxl.less in Gruntfile.js and run grunt dist after your changes.

update

Please notice that the above solution only works when you add column classes for a larger grid. See https://stackoverflow.com/a/26963773/1596547 to add columns or grids that overlap the default grids.

Solution 2

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.

Solution 3

Twitter Bootstrap has listened You #V4 Support for Extra Large Devices Now --> http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Solution 4

https://github.com/shenders13/bootstrap-grid-100cols-with-xl-and-xxl

A CSS file that contains the bootstrap grid with additional xlg ( > 1500px width ) and xxlg ( > 2000 px width) classes. The grid is split into columns with 1/100 width of the parent div.

View more solutions

Comments

[kspearrin]

Thanks for this. Slight correction though. .make-grid(xlg); needs to be wrapped in a media query for @screen-xlg-min. @media (min-width: @screen-xlg-min) { .make-grid(xlg); }

[Mattis]

This works well. Thanks Marc! 1600px wasn't suitable for my needs so I modified it a bit. Your github is linked in the code.

[Tom]

Very helpful answer, I've converted it for use with bootstrap-sass

[Marc van Nieuwenhuijzen]

Just updated the file because of a missing css entry that caused "visible-xl" to function differently than the other "visible" classes.

[Admin]

What's up with Hugh Desktop? I didn't see that variable going anywhere.

[Bass Jobsen]

it's equal to @screen-xlg-min not all variables are use but only declared to be consistent with the way BS has defined the grid variables.

[Harry]

No you can --> v4-alpha.getbootstrap.com/getting-started/introduction/…

[Edward]

Perfect! If you need just .xl functionality this works like a charm! Also note bootstrap 4 is out soon which includes .xl classes as default v4-alpha.getbootstrap.com/layout/grid/#grid-options

[Jacob van Lingen]

Note col-xl BS4 is equal to col-lg BS3!

[Reaction21]

This was perfect! Exactly what I needed! Thanks for the suggestion!

[brasileric]

Works perfect in Bootstrap 3.3.7, exactly what I was searching for. Thanks Marc!

[bovender]

The .xl columns in v4 replace the .lg columns in v3, so it's not really for wider screens. Both are for viewports > 1200 px. (I read this in the alpha-stage documentation. It may change.)

[superphonic]

Like @bovender says, the xl in v4 is still 1200px like v3 lg. Given the size and resolution of today's monitors and laptops, saying 1200px is extra large is a joke....

[Rudey]

@BassJobsen Then you must've meant "huge" desktop.

[DanteTheSmith]

This is awesome. You should mention that one should link this after bootstrap AND any bootstrap themes he might be using. Took me 2 minutes to find that out but someone less experienced might miss it

[Marc van Nieuwenhuijzen]

It already says that? Is it not clear enough and should I change my text?

[hackel]

Thank you @MarcvanNieuwenhuijzen that CSS grid video was great. I encourage everyone landing on this page to watch it!