Why is this Bootstrap column acting up? - css

Question

Why is the content nesting itself inside of each list item? The content should all be on the same line. I've tried floating and changing the position, but nothing is working. How do I fix this?
.icon-left{
float:left;
padding: 12px 25px 60px 15px;
color:#4ECABE;
}
.text{
text-align:left;
padding:0 0 0 15px;
}
.text h4{
padding-bottom:5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="icon-left">
<i class="fa fa-ticket fa-3x"></i>
</div>
<div class="text">
<h4>Get Free Books</h4>
<p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
</div> <br>
<div class="icon-left" id='smile'>
<i class="fa fa-smile-o fa-3x"></i>
</div>
<div class="text2">
<h4>New Books Every 6 Hours</h4>
<p>That's right, you only have 6 hours to get entries for a book.</p>
</div> <br>
<div class="icon-left">
<i class="fa fa-truck fa-3x"></i>
</div>
<div class="text">
<h4>Absolutely free!</h4>
<p>We even pay shipping.</p>
</div>
</div>

Answer 1

You need to clear the floats. You can either apply br { clear: both; } with your existing markup, or a better way to do it with bootstrap is to wrap the .icon-left and .text elements in an element with the .clearfix class.
.icon-left{
float:left;
padding: 12px 25px 60px 15px;
color:#4ECABE;
}
.text{
text-align:left;
padding:0 0 0 15px;
}
.text h4{
padding-bottom:5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="clearfix">
<div class="icon-left">
<i class="fa fa-ticket fa-3x"></i>
</div>
<div class="text">
<h4>Get Free Books</h4>
<p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
</div>
</div>
<div class="clearfix">
<div class="icon-left" id='smile'>
<i class="fa fa-smile-o fa-3x"></i>
</div>
<div class="text2">
<h4>New Books Every 6 Hours</h4>
<p>That's right, you only have 6 hours to get entries for a book.</p>
</div>
</div>
<div class="clearfix">
<div class="icon-left">
<i class="fa fa-truck fa-3x"></i>
</div>
<div class="text">
<h4>Absolutely free!</h4>
<p>We even pay shipping.</p>
</div>
</div>
</div>

Answer 2

Give your .icon-left divs a coloured background (e.g. background: gold) and it should become evident. The bottom padding extends past the non-float elements on the right, which is pushing the next row along.
Reducing the padding on .icon-left (for example to padding: 12px 25px 24px 15px;) should allow everything to snap back into line.
Slightly unrelated tip: add the class fa-fw to your FA icons to use fixed width icons, which will allow your text to line up perfectly.

Answer 3

you have extra padding icon-left
try padding: 12px 25px 25px 15px;
Also I would wrap every section with a div and a grid class col-lg-3 so you dont have to use this big padding, and will give you a better control on your UI.