Search code examples
csstwitter-bootstrapborder

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

Solution

  • 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/