CODEWITHSUNDEEP
twitter-bootstrap-3responsive-designgrid-layout
Pascal Klein
Pascal Klein

Reputation: 24883

Create custom grid system width defined column widths

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

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:

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.

Upvotes: 1

Views: 1705

Answers (2)

Syed
Syed

Reputation: 16513

This is for the Bootstrap 4 users, who are using SCSS and like to create their own grid system using bootstrap mixins and variables.

@import '../../../bower_components/bootstrap/scss/variables';
@import '../../../bower_components/bootstrap/scss/mixins';

// Create custom variables to supply it for bootstrap's mixins
$grid-gutter-width-10: 10px;
$grid-gutter-widths-10: (
  xs: $grid-gutter-width-10,
  sm: $grid-gutter-width-10,
  md: $grid-gutter-width-10,
  lg: $grid-gutter-width-10,
  xl: $grid-gutter-width-10
);

.row-xs {
  @include make-row($gutters: $grid-gutter-widths-10);
  @include make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths-10, $breakpoints: $grid-breakpoints)
}

Upvotes: 0

MattD
MattD

Reputation: 4420

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.

Upvotes: 1

Related Questions