[css] 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

This question is related to css twitter-bootstrap border

The answer is


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/


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;
}

You can simply use the border class from bootstrap:

<div class="row border border-dark">
...
</div>

For more details visit the following link: Borders


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 > div{
    border:0;
}

HTML:

<div class="row borders">
    <div class="col-xs-5 col-md-2">Email</div>
    <div class="col-xs-7 col-md-4">[email protected]</div>
    <div class="col-xs-5 col-md-2">Phone</div>
    <div class="col-xs-7 col-md-4">555-123-4567</div>
</div>

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to border

How to create a inner border for a box in html? Android LinearLayout : Add border with shadow around a LinearLayout Giving a border to an HTML table row, <tr> In bootstrap how to add borders to rows without adding up? Double border with different color How to make a transparent border using CSS? How to add a border just on the top side of a UIView Remove all stylings (border, glow) from textarea How can I set a css border on one side only? Change input text border color without changing its height