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

User · Answer

I know this is an  older  post  This question and the provided answers helped me get ideas for my own problem  I think this solution addresses the OP question  intersecting borders with 4 and 2 columns depending on display   Fiddle  https   jsfiddle net tqmfpwhv 1     css based on OP information  media query at end is for med  amp  lg view    vr-all       padding 0px      border-right 1px solid  CC0000     vr-xs       padding 0px     vr-md       padding 0px     hrspacing   padding 0px     hrcolor       border-color   CC0000      border-style  solid      border-bottom  1px      margin 0px      padding 0px       for medium and up     media min-width 992px        vr-xs           border-right 1px solid  CC0000                html adjustments to OP provided code  Red border and Img links for example    lt div class  container  gt     lt div class  row  gt           lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-all  id  one  gt               lt h5 gt Rich Media Ad Production lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png    gt           lt  div gt           lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-xs  id  two  gt               lt h5 gt Web Design  amp  Development lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt            lt  -- hr for only x-small small viewports -- gt           lt div class  col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing  gt  lt hr class  hrcolor  gt  lt  div gt            lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-all  id  three  gt               lt h5 gt Mobile Apps Development lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt           lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-md  id  four  gt               lt h5 gt Creative Design lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt            lt  -- hr for for all viewports -- gt           lt div class  col-xs-12 hrspacing  gt  lt hr class  hrcolor  gt  lt  div gt            lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-all  id  five  gt               lt h5 gt Web Analytics lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt           lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-xs  id  six  gt               lt h5 gt Search Engine Marketing lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt            lt  -- hr for only x-small small viewports -- gt           lt div class  col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing  gt  lt hr class  hrcolor  gt  lt  div gt            lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-all  id  seven  gt               lt h5 gt Mobile Apps Development lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt           lt div class  col-xs-6 col-sm-6 col-md-3 text-center vr-md  id  eight  gt               lt h5 gt Quality Assurance lt  h5 gt               lt img src  http   png-1 findicons com files icons 2338 reflection 128 mobile phone png   gt           lt  div gt         lt  div gt   lt  div gt

User · Answer

You can achieve this by adding border class of bootstrap  like for border left  you can use border-left   working code    lt div class  row  gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom  id  one  gt  lt h5 gt Rich Media Ad Production lt  h5 gt  lt img src  images richmedia png  gt  lt  div gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom  id  two  gt  lt h5 gt Web Design  amp  Development lt  h5 gt   lt img src  images web png   gt  lt  div gt                      lt div class  col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom  id  three  gt  lt h5 gt Mobile Apps Development lt  h5 gt   lt img src  images mobile png  gt  lt  div gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center rightspan  border-bottom  id  four  gt  lt h5 gt Creative Design lt  h5 gt   lt img src  images mobile png  gt   lt  div gt       lt div class  col-xs-12  gt  lt hr gt  lt  div gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right  id  five  gt  lt h5 gt Web Analytics lt  h5 gt   lt img src  images analytics png  gt  lt  div gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right  id  six  gt  lt h5 gt Search Engine Marketing lt  h5 gt   lt img src  images searchengine png  gt  lt  div gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right   id  seven  gt  lt h5 gt Mobile Apps Development lt  h5 gt   lt img src  images socialmedia png  gt  lt  div gt       lt div class  col-xs-6 col-sm-6 col-md-3 text-center rightspan  id  eight  gt  lt h5 gt Quality Assurance lt  h5 gt   lt img src  images qa png  gt  lt  div gt        lt hr gt   lt  div gt    for more refrence al bootstrap classes all classes  search for border

User · Answer

Add the right lines this way and and the horizontal borders using HR or border-bottom or  col-right-line after  Don t forget media queries to get rid of the lines on small devices    col-right-line before     position  absolute    content         top  0    right  0    height  100     width  1px    background-color   color-neutral

User · Answer

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    lt div class  bottom  gt       lt div class  box-content right  gt Rich Media Ad Production lt  div gt       lt div class  box-content right  gt Web Design  amp  Development lt  div gt       lt div class  box-content right  gt Mobile Apps Development lt  div gt       lt div class  box-content  gt Creative Design lt  div gt   lt  div gt   lt div gt       lt div class  box-content right  gt Web Analytics lt  div gt       lt div class  box-content right  gt Search Engine Marketing lt  div gt       lt div class  box-content right  gt Social Media lt  div gt       lt div class  box-content  gt Quality Assurance lt  div gt   lt  div gt    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    lt div class  row  gt       lt div class  col-xs-3  gt Rich Media Ad Production lt  div gt       lt div class  col-xs-3  gt Web Design  amp  Development lt  div gt       lt div class  col-xs-3  gt Mobile Apps Development lt  div gt       lt div class  col-xs-3  gt Creative Design lt  div gt   lt  div gt   lt div class  row  gt       lt div class  col-xs-3  gt Web Analytics lt  div gt       lt div class  col-xs-3  gt Search Engine Marketing lt  div gt       lt div class  col-xs-3  gt Social Media lt  div gt       lt div class  col-xs-3  gt Quality Assurance lt  div gt   lt  div gt    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  lt hr gt  element to insert a horizontal divider in Bootstrap as well if you d like

User · Answer

CSS   vr      border-right  1px solid  ccc  important      HTML   lt div class  row  gt      lt div class  col-md-6 vr  gt          lt p gt Column 1 lt  p gt      lt  div gt      lt div class  col-md-6  gt          lt p gt Column 2 lt  p gt      lt  div gt   lt  div   Now  we can use class vr wherever we need to have a vertical-divider kind of appearance   Hope it helps

User · Answer

The  lt hr gt  should be placed inside a  lt div gt  for proper functioning   Place it like this to get desired width                   lt div class  row  gt           lt div class  col-lg-8 col-lg-offset-2  gt           lt hr gt          lt  div gt          lt  div gt       Hope this helps a future reader

User · Answer

I made the following little scss mixin to build for all the bootstrap breakpoints     With it I get  col-xs-divider-left or col-lg-divider-right etc       Note  this uses v4-alpha bootstrap syntax       import  variables     divider-height  100     mixin make-column-dividers  breakpoints   grid-breakpoints           Common properties for all breakpoints      col-divider           position  absolute          content               top   100  -  divider-height  2          height   divider-height          width   hr-border-width          background-color   hr-border-color             each  breakpoint in map-keys  breakpoints             col-   breakpoint -divider-right before                include media-breakpoint-up  breakpoint                     extend  col-divider                  right  0                                   col-   breakpoint -divider-left before                include media-breakpoint-up  breakpoint                     extend  col-divider                  left  0

[html] Bootstrap 3 Horizontal and Vertical Divider

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3