CODEWITHSUNDEEP
htmlcsstwitter-bootstraprowtwitter-bootstrap-3
Endless Sidewalk
Endless Sidewalk

Reputation: 13

Bootstrap 3 How to Assign unique gutter widths to Specific row's?

I am using Bootstrap 3 to build my personal website and have been searching for a way to do the following:

I would like to assign unique gutter widths to specific rows in my layout.

The rest of the website will make use of the underlying gutter width. Is it possible? Any help would be much appreciated. Thanks in Advance / Trev

Upvotes: 1

Views: 1033

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362660

The simplest way to change the spacing between columns (gutter) is to use CSS to override the default padding (15px)..

.row .col:not(:first-child),.row .col:not(:last-child) {
  padding-right:5px;
  padding-left:5px;
}

Demo: http://bootply.com/94849

Upvotes: 1

Chandranshu
Chandranshu

Reputation: 3669

Yes. Add a unique CSS class, say my-personalized-row to the row you want to edit. Then in your CSS, add a section for this as following:

.my-personalized-row {
    margin-bottom: 5px !important; //If you want 5px of gutter width.
}

Now, whatever you put between the two braces will apply only to this row and the rest of the site will use the underlying gutter width.

UPDATE:

I have added the style rule you would want to use to reduce the gutter width for a specific row to 5px. The !important is to ensure that specificity rules will not interfere with your declaration. Note that it is not mandatory to use !important since Bootstrap declares styles with a single class as well.

Upvotes: 0

Related Questions