bootstrap column to fit width - html

Question

I hope this image can help me describe what I mean. I want to make the arrow and the boxes inline without the vacant space on the right. you can notice that the left most box is alligned on the white box on top, that is also what I want to achieve in the right. I will attach my code so you can see how did I do this.
Note: I updated the image above. There is a white box on top and under this 4 boxes. I need to align the eplay box to the white box above it and under it. also align the slide show demo box on the white box above and below it. Plus evenly space and size. And after eplay demo, theatre script demo, and audio speech demo box I need to put an arrow image in between. like this image below but need the right side box align to the top white box and under it.
<!--===================DEMOS ==================-->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 container-nopads" style="">
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
<a href="/versebuster2/eplay/eplay-demo.php" style="text-decoration:none;">
<h4><strong>ePlay Demo</strong></h4><br><br><br>
<img src="images/hovers/pdf-512.png" >
</a>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-doc">
<h4><strong>Theatre Script Demo</strong></h4><br><br>
<img src="images/hovers/doc-512.png" class="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-mp3">
<h4><strong>Audio Speech Demo</strong></h4><br><br>
<img src="images/hovers/mp3-512.png" class="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
<a href="data/pdf/ePlayPPPDemo.pdf" target="_blank" style="text-decoration:none; ">
<h4><strong>Slide Show Demo</strong></h4><br><br><br>
<img src="images/hovers/pdf-512.png" class="">
</a>
</div>
</div>
</div>
</div>
<!--===================END DEMOS ==================-->

Answer 1

Use a .col-md-3 class for this case:
.col-md-3 .inner {margin: 5px; background: #99f; text-align: center;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-3">
<div class="inner">One</div>
</div>
<div class="col-md-3">
<div class="inner">Two</div>
</div>
<div class="col-md-3">
<div class="inner">Three</div>
</div>
<div class="col-md-3">
<div class="inner">Four</div>
</div>
</div>
</div>
Preview: