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,

Answer 1

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 */;}