Do you have to use Bootstrap for this? Here's a basic HTML/CSS example for obtaining this look that doesn't use any Bootstrap:
HTML:
<div class="bottom">
<div class="box-content right">Rich Media Ad Production</div>
<div class="box-content right">Web Design & Development</div>
<div class="box-content right">Mobile Apps Development</div>
<div class="box-content">Creative Design</div>
</div>
<div>
<div class="box-content right">Web Analytics</div>
<div class="box-content right">Search Engine Marketing</div>
<div class="box-content right">Social Media</div>
<div class="box-content">Quality Assurance</div>
</div>
CSS:
.box-content {
display: inline-block;
width: 200px;
padding: 10px;
}
.bottom {
border-bottom: 1px solid #ccc;
}
.right {
border-right: 1px solid #ccc;
}
Here is the working Fiddle.
If you must use Bootstrap, here is a semi-responsive example that achieves the same effect, although you may need to write a few additional media queries.
HTML:
<div class="row">
<div class="col-xs-3">Rich Media Ad Production</div>
<div class="col-xs-3">Web Design & Development</div>
<div class="col-xs-3">Mobile Apps Development</div>
<div class="col-xs-3">Creative Design</div>
</div>
<div class="row">
<div class="col-xs-3">Web Analytics</div>
<div class="col-xs-3">Search Engine Marketing</div>
<div class="col-xs-3">Social Media</div>
<div class="col-xs-3">Quality Assurance</div>
</div>
CSS:
.row:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.col-xs-3:not(:last-child) {
border-right: 1px solid #ccc;
}
Here is another working Fiddle.
Note:
Note that you may also use the <hr>
element to insert a horizontal divider in Bootstrap as well if you'd like.