Josh Josh - 12 days ago 6
CSS Question

Adding a margin between two bootstrap columns makes them stack on top of each other

I have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.



#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}

#stimuliContainer {
height: 40%;
}

#stimuli {
width: 100%;
max-height: 100%;
}

#errorMsg {
height: 20%;
width: 100%;
}

#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>

<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>




Answer

I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.

In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.

HTML

<div class="container">
  <div class="row">
      <div class="col-xs-6 padding-2 ">
        <div style="border: 1px black solid; background-color: red;">
          1 col
        </div>
      </div>
      <div class="col-xs-6 padding-2 ">
        <div style="border: 1px black solid;  background-color: blue;">
          2 col
        </div>
      </div>
   </div>
</div>

CSS

.padding-2 {
    padding-left: 2px;
    padding-right: 2px;
}

Demo: http://www.bootply.com/eO033QYCn3

Comments