CODEWITHSUNDEEP
responsive-designtwitter-bootstrap-3
Daniel
Daniel

Reputation: 77

Twitter bootstrap - Different Number of Grid Columns Based on Screen Size

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?

Upvotes: 1

Views: 174

Answers (1)

Shawn Taylor
Shawn Taylor

Reputation: 15760

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.

Upvotes: 2

Related Questions