Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In bootstrap how to add borders to rows without adding up?

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:

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>My Test</title>     <!-- Bootstrap -->     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">      <style type="text/css">       body {         padding-top: 20px;         padding-bottom: 40px;       }        .container {         width: 420px;       }        div.row {         border: 1px solid;       }      </style>   </head>   <body>     <div class="container">        <div class="row heading">         <div class="col-md-12">Header</div>       </div>       <div class="row subheading">         <div class="col-md-12">Some text</div>       </div>       <div class="row footer">         <div class="col-md-12">Footer</div>       </div>     </div>   </body> </html> 

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

like image 750
PerseP Avatar asked Nov 03 '13 20:11

PerseP


People also ask

How do you put a border on a row in Bootstrap?

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. That would leave the top div w/o a top border. It would be nice to specify color.

How do I add a bottom border in Bootstrap?

. border-right : This class adds a border on the right of the element. . border-bottom : This class adds a border on the bottom of the element.

What is Col MD 6 in Bootstrap?

col-sm- (small devices - screen width equal to or greater than 576px) . col-md- (medium devices - screen width equal to or greater than 768px) . col-lg- (large devices - screen width equal to or greater than 992px)


2 Answers

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/

like image 194
Siddharth Sharma Avatar answered Sep 21 '22 07:09

Siddharth Sharma


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/

like image 42
aaronmallen Avatar answered Sep 20 '22 07:09

aaronmallen