Check out my code on CodePen: http://codepen.io/auble220/pen/rOPBKP. I added media queries in this version: http://codepen.io/auble220/pen/avyZZE. Although it's not too bad, I'm sure there's a more efficient way to achieve this. I attempted to use Bootstrap's clearfix class, but it didn't make a difference. Here is the code snippet for that section:
html:
<div id="brkSesDiv" class="row">
<div id="breakDiv" class="col-md-6 text-right">
<button class="plusMinus" id="plus1">+</button>
<h1 id="breakLen">05</h1>
<button id="minus1" class="plusMinus">-</button>
<h4>break length</h4>
</div>
<div id="sesDiv" class="col-md-6 text-left">
<button id="plus2" class="plusMinus">+</button>
<h1 id="sesLen">25</h1>
<button id="minus2" class="plusMinus">-</button>
<h4>session length</h4>
</div>
</div>
css:
#brkSesDiv {
margin: 30px 0 0 0;
height: 100px;
width: 350px;
margin: auto;
}
#breakDiv {
display: inline;
}
#breakLen {
display: inline;
}
#sesDiv {
float: left;
}
#sesLen {
display: inline;
}