Divide a column into 2 parts in Bootstrap 3

Question

I'm using a div with class "col-lg-9", inside that div there are two columns with a class of "col-lg-6" for each one. it works good but the issue is that there is no margin between the columns.

To see things visually, I've added a grey background to the main column. Notice how is no margin between the blue and the pink columns.

Please see the issue in this pic:

Live link: https://dl.dropboxusercontent.com/u/35853519/basmaty-website/index.html

The code:

<div class="main col-lg-9">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

Thanks,

possible duplicate of [How do I add a margin between bootstrap columns without wrapping](http://stackoverflow.com/questions/19010845/how-do-i-add-a-margin-between-bootstrap-columns-without-wrapping) — Antrikshy, Sep 21 '14 at 05:24
I'm sorry if I misunderstood, but the question I have marked yours as a duplicate of should help. This answer suggests padding the inner content: http://stackoverflow.com/a/19010988/2005759 — Antrikshy, Sep 21 '14 at 05:25

score 6 · Accepted Answer · answered Sep 21 '14 at 05:45

You have different options, however, I'd recommend you to start with a basic thing for ALL options, which is this:

<div class="main col-lg-9 myHalfCol">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

Now you can target .myHalfCol without worrying about affecting any other .col-lg-6 class

As for approaches, you can use the padding model, leaving everything as is just adding some padding at the sides, like this:

.myHalfCol .col-lg-6{padding:0 10px;}

The margin model: Here you use real margins, so you need to take care of width.

.myHalfCol .col-lg-6{width:48%; margin:0 1% /* or auto */;}

Divide a column into 2 parts in Bootstrap 3

1 Answers1

Linked