Search code examples
twitter-bootstrap-3responsive-designgrid-layout

Create custom grid system width defined column widths

The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:

  • Large / col-lg (>= 1200px width)
  • Medium / col-md (992px - 1199px)
  • Small / col-sm (768px - 991px)
  • Extra Small / col-xs (<768px)

I find that these resolutions do not represent the user group of my webapp. For example Medium and Small combined is used by less than 5 % of my user base (meaning less than 5 % of my users have a screen resolution width of 768px to 1199px).

I would rather target the following 4 different resolutions:

  • ExtraLarge (>= 1600px width)
  • Large (1200px - 1599px)
  • SmallMedium (600 - 1199px)
  • MobileSmall (<= 599px)

So I not only like to add an extra large set but also change / replace the medium, small and extra small one.

Has anybody run into similiar issues? I would love to use a grid generator where I input my custom grid widths and get out the CSS code.

Solution

  • You can customize pretty much every aspect of Bootstrap using the customization section of the official site.

    http://getbootstrap.com/customize/#grid-system

    That link takes you directly to the grid system items.

    Enter your values, and download your custom version of Bootstrap. Even includes a JSON file with your settings so you can re-import them later and make adjustments.