Boostrap not creating 4 columns - html

Question

This is probably an easy one, but I'm new to bootstrap and aren't quite familiar with how it works. I have the following code to create 4 even-width columns in a row. But it keeps showing up as 4 vertically stacked columns on my laptop (1920x1080) and I'm not quite sure where I'm doing it wrong.
<div class="container">
<div class="row-fluid">
<div class="col-md-3"><!--about us feature 1st -->
<div class="about-block">
<div class="heading">
<h6>AVAILABILITY</h6>
<p>Fast Response Time<br> 15 Minutes Setup</p>
</div>
</div>
</div><!--about us feature 1st closed -->
<div class="col-md-3"><!--about us feature 2nd -->
<div class="about-block">
<div class="heading">
<h6>SPEED</h6>
<p>Average 7x Faster<br> Complete Data Coverage</p>
</div>
</div>
</div> <!--about us feature 2nd closed -->
<div class="col-md-3"><!--about us feature 3rd -->
<div class="about-block">
<div class="heading">
<h6>SAFETY</h6>
<p>Reduce Human Risk<br> No Scaffolding</p>
</div>
</div>
</div><!--about us feature 3rd closed -->
<div class="col-md-3"><!--about us feature 4th -->
<div class="about-block">
<div class="heading">
<h6>COST SAVINGS</h6>
<p>Targeted Repairs<br> Less Outage Time</p>
</div>
</div>
</div><!--about us feature 4th closed -->
</div>
</div>
UPDATE Added screenshot:

Answer 1

Use col-sm-3 instead, or make your <div> element wider. If you are using a container directly inside body, you shouldn't have any problem. If you are using inside another element, make sure it is wide enough.

Answer 2

First, try changing row-fluid class to style="float: left". Second, it is true that (in theory) the screen is divided into 12, but 3*4 might be more than 12 (margin, border, etc.). If the first part renders three columns and the 4th underneath, try reducing the size of the columns by setting, for instance, width=24%.