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 rig

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:

    
Rich Media Ad Production
    
Web Design & Development
    
Mobile Apps Development
    
Creative Design


    
Web Analytics
    
Search Engine Marketing
    
Social Media
    
Quality Assurance

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:

    
Rich Media Ad Production
    
Web Design & Development
    
Mobile Apps Development
    
Creative Design


    
Web Analytics
    
Search Engine Marketing
    
Social Media
    
Quality Assurance

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

---

element to insert a horizontal divider in Bootstrap as well if you'd like.