CODEWITHSUNDEEP
twitter-bootstrap
ajax20
ajax20

Reputation: 78

how to customize bootstrap columns padding

I am trying to make a customized bootstrap file which has the padding left and right set at 8px instead of the default 15px. The padding relates to the following in bootstrap.css file:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

But I do not know which parameter I should change in the Bootstrap customization page.

Upvotes: 3

Views: 11946

Answers (2)

audrynyonata
audrynyonata

Reputation: 83

For the case where you want to apply custom padding on EVERY row, replace .my-custom-area in solution below from to body.

For anyone who want to customize padding only on certain area of the page,

so you can still use the default bootstrap file and not stuck with only one setting of padding size, you can do the following:

  1. Specify the area where to override the default padding. Here I use .my-custom-area.
  2. For example we column padding to be 8px each on left and right side. Modify the margin of row in area #1 to negative value. .my-custom-area .row { margin-left: -8px; margin-right: -8px;}.

*Here we override the default settings for row, from bootstrap docs we know the row has default margin of negative value (-15px).

  1. Modify the padding of col in area #1 .my-custom-area .row > .col { padding-left: 8px; padding-right: 8px; }

.my-custom-area .row {
  margin-left: -8px;
  margin-right: -8px;
}
.my-custom-area .row > .col {
  padding-left: 8px;
  padding-right: 8px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="default">
  <div class="container">
    <h5>
      Default (col padding: 15px on each side)</h5>
    <div class="row">
      <div class="col col-md-4">
        <div class="card">This is 1st column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 2nd column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 3rd column</div>
      </div>
    </div>
  </div>
</div>
</div>
<br>
<div class="my-custom-area">
  <div class="container">
  <h5>Custom (col padding: 8px  on each side)</h5>
    <div class="row">
      <div class="col col-md-4">
        <div class="card">This is 1st column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 2nd column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 3rd column</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Chris Yongchu
Chris Yongchu

Reputation: 789

I am trying to make a customized bootstrap file which has the padding left and right set at 8px instead of the default 15px.

Notice that the default Gutter width is set to 30px (15px on each side of the column).

http://getbootstrap.com/css/#grid-options

If you want it changed to 8px instead of the 15px, change the @grid-gutter-width (http://getbootstrap.com/customize/#grid-system) value from 30px to 16px.

Hope this helps.

Upvotes: 4

Related Questions