1

I'm working on a project that requires a 16 column grid for any display smaller than the large (lg) media query. The Large version needs to display the website using a 12 column grid.

Is there any easy way to use a 12 column grid for the large view and switch to a 16 column grid for anything below?

Dan
  • 9,391
  • 5
  • 41
  • 73
Daniel
  • 77
  • 1
  • 8
  • Check this out: [How to use bootstrap with 16 or 24 colums](http://stackoverflow.com/questions/11591185/how-to-use-bootstrap-with-16-or-24-colums) – Dan Sep 06 '14 at 01:25
  • Thanks but I know how to use the Customizer to create the new grids but I don't know the best way to switch between the 12 column and the 16 column. – Daniel Sep 06 '14 at 01:37

1 Answers1

2

If you create and download a custom 16-col bootstrap via http://getbootstrap.com/customize/#grid-system, and then put both in your <head> like so;

<link href="bootstrap.min.css" rel="stylesheet" />
<link media="screen and (min-width: 1200px)" href="bootstrap-16.min.css" rel="stylesheet" />

Then the custom one (I called it bootstrap-16.css) will load only when the browser is wider than the lg breakpoint - 1200px.

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39