Bootstrap 3 Horizontal and Vertical Divider

Question

I am having trouble to put in horizontal and vertical lines on my website. Not sure what's wrong with this.

I tried using borders but I am not sure if I am doing it right.

I would like to achieve a criss-cross dividers just like the below image:

Here's what my code looks like:

<div class="container-liquid" style="margin:0px; padding: 0px">     <div class="row">         <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>         <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>                        <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>         <div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>         <div class="col-xs-12"><hr></div>         <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>         <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>         <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>         <div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>          <hr>     </div> </div> 

Answer 1

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.

---

UPDATE

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.