CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Brent
Brent

Reputation: 2485

Bootstrap 3.2 Col Margins

I have been hitting a area which I dont belive is coverd in the bootstrap documentation which is to add margins to col in bootstrap.

To fix this I used the following code but the issue is the centre box is always smaller then the outer two.

Does anyone have a fix to this? enter image description here

HTML

    <div class="row">
    <div  class="col-lg-4">
        <div id="lightBlueFix" class="marginBoxes noMarginLeft"> 
            <div class="clearBoth"></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightGrey" class="marginBoxes"> 
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightYellow" class="marginBoxes noMarginRight"> 
        </div>
    </div>     
  </div>

CSS

.marginBoxes {
    margin-left: 20px;
    margin-right: 20px;
} 
.noMarginLeft{
    margin-left:0 !important;   
}
.noMarginRight{
    margin-right:0 !important;  

}

Live Preview #

Upvotes: 0

Views: 723

Answers (1)

DavidG
DavidG

Reputation: 118937

As suggested in the comments, I'd leave Bootstrap alone and make the boxes separate, possibly something along these lines:

#lightBlueFix { background-color: blue; }
#lightGrey { background-color: grey; }
#lightYellow { background-color: yellow; }

.bannerBox {
    margin-left: 20px;
    margin-right: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="row">
    <div  class="col-lg-4">
    	<div id="lightBlueFix" class="bannerBox"> 
            Blue
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightGrey" class="bannerBox"> 
            Grey
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightYellow" class="bannerBox"> 
            Yellow
        </div>
    </div>     
</div>

Upvotes: 3

Related Questions