In bootstrap how to add borders to rows without adding up

Question

I m using bootstrap version 3 0 1 to make a grid and when I add a border to the rows of the grid I can see that the rows that are together add up there borders  I get a thicker border   This is my code    lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt title gt My Test lt  title gt       lt  -- Bootstrap -- gt       lt link href  css bootstrap min css  rel  stylesheet  media  screen  gt        lt style type  text css  gt        body           padding-top  20px          padding-bottom  40px                  container           width  420px                 div row           border  1px solid                lt  style gt     lt  head gt     lt body gt       lt div class  container  gt          lt div class  row heading  gt           lt div class  col-md-12  gt Header lt  div gt         lt  div gt         lt div class  row subheading  gt           lt div class  col-md-12  gt Some text lt  div gt         lt  div gt         lt div class  row footer  gt           lt div class  col-md-12  gt Footer lt  div gt         lt  div gt       lt  div gt     lt  body gt   lt  html gt    And this is what I get   How can I use the border without the adjoining rows adding up their borders   ie  I want all rows with a border of 1px   Thank you

User · Answer

You can simply use the border class from bootstrap   lt div class  quot row border border-dark quot  gt       lt  div gt   For more details visit the following link  Borders

User · Answer

you can add the 1px border to just the sides and bottom of each row   the first value is the top border  the second is the right border  the third is the bottom border  and the fourth is the left border   div row     border  0px 1px 1px 1px solid

User · Answer

Here is one solution   div row      border  1px solid    border-bottom  0px     container div row last-child     border-bottom  1px solid      I m not 100  its the most effiecent  but it works  D  http   jsfiddle net aaronmallen 7cb3Y 2

User · Answer

On my projects i give all rows the class  borders  which I want it to display more like a table with even borders  Giving each child element a border on the bottom and right and the first element of each row a left border will make all of your boxes have an even border   First give all of the rows children a border on the right and bottom   borders div      border-right 1px solid  999      border-bottom 1px solid  999      Next give the first child of each or a left border   borders div first-child      border-left      1px solid  999      Last make sure to clear the borders for their child elements   borders div  gt  div      border 0      HTML    lt div class  row borders  gt       lt div class  col-xs-5 col-md-2  gt Email lt  div gt       lt div class  col-xs-7 col-md-4  gt my email com lt  div gt       lt div class  col-xs-5 col-md-2  gt Phone lt  div gt       lt div class  col-xs-7 col-md-4  gt 555-123-4567 lt  div gt   lt  div gt

User · Answer

You can remove the border from  top if the element is sibling of the row   Add this to css     row    row      border-top 0      Here is the link to the fiddle http   jsfiddle net 7cb3Y 3

[css] In bootstrap how to add borders to rows without adding up?

Examples related to css

Examples related to twitter-bootstrap

Examples related to border