CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Adam
Adam

Reputation: 1242

Using Multiple bootstrap gutter width on a site

i'm using bootstrap 3 grid system and have a design that uses multiple grid gutter widths across different sections of the page.

looking at example themes they all seem to use one gutter width across the whole page

http://wrapbootstrap.com/preview/WB06F57D4

http://wrapbootstrap.com/preview/WB0025522

For example the default download of bootstrap gives you the following css:

@media (min-width: 1200px)
.container {
width: 1140px;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.......col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

so this gives you the default 30px between each column and a max column width of 65px (width padding its 95pc)

if i then want no gutter i get the following

@media (min-width: 1200px)
.container {
width: 1140px;
}

.row {
margin-left: 0px;
margin-right: 0px;
}

....col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 0px;
padding-right: 0px;
}

so this gives you the default 30px between each column and a max column width of 95px.

what is the standard way of combining a page with multiple gutter width for different sections? can this be done?

Upvotes: 0

Views: 1870

Answers (1)

Joe Conlin
Joe Conlin

Reputation: 5994

Yes, just assign a new class to the page and adjust the column padding as desired. 

body.alt-gutter[class^='col-'], body.alt-gutter[class*=' col-'] {
  padding-left: 5px; // or whatever you need
  padding-right: 5px;
}

Upvotes: 1

Related Questions