CODEWITHSUNDEEP
htmlcsstwitter-bootstrapspacing
senty
senty

Reputation: 12857

Bootstrap - Giving Small Spacing Between Columns

I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear: 

<div class="container">
    <div class="col-md-12 banner"></div>

    <div class="row">
        <div class="col-md-8">
            <div class="col-md-12 leftSide">

            </div>
            <div class="col-md-12 leftSide">

            </div>
        </div>

        <div class="col-md-4 rightSide">
            <div class="col-md-12">

            </div>
        </div>
    </div>

</div>

Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.

It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C

The problem is the 'rightSide' panel.

How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?

Upvotes: 0

Views: 3141

Answers (2)

user4332766
user4332766

Reputation:

this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:

http://www.bootply.com/PEIiDnp9VD

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="banner"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="block"></div>
    </div>
    <div class="col-md-4">
      <div class="block"></div>
    </div>
  </div>
</div>

if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.

Upvotes: 4

Serg Chernata
Serg Chernata

Reputation: 12400

First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.

<div class="row">
    <div class="col-md-8 leftSide">
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>

    <div class="col-md-4 rightSide">
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>
</div>

Then apply custom margins and styling to elements inside of the columns, not columns themselves.

http://www.bootply.com/g6eLHRd1tH

Upvotes: 0

Related Questions