CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Steve Bals
Steve Bals

Reputation: 1979

bootstrap 3 increase the margin between grids

I need to add space between grids, without changing .col-md-4 and .col-md-8 style

<div class="row" >
    <div class="col-md-4" style="height:250px;">grid1</div>
    <div class="col-md-8" style="height:250px;">grid2</div>
</div>

Upvotes: 3

Views: 126

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362440

Another option is to create a special CSS class and apply it to the rows where you want the wider spacing..

.row.wide-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:20px;
  padding-left:20px;
}

Demo: http://bootply.com/110509

Upvotes: 2

Muhammad Reda
Muhammad Reda

Reputation: 27033

I'd suggest you add a new div element inside any of the .col-md-* and give it a padding (or a margin) (Because you can't edit the default Bootstrap files).

    <div class="row" >
            <div class="col-md-4" style="height:250px;">grid1</div>
            <div class="col-md-8" style="height:250px;">
                <div style="padding-left: 20px;">grid2</div> <!-- The added div -->
            </div>
    </div>

Upvotes: 3

Related Questions