CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
David
David

Reputation: 10738

adding consistent 1px borders around bootstrap cols

Is there a clean, css-only way of adding a consistent 1px border around cols where when two are side by side you don't have a 2px border? Notice how the outside edges have a 1px border while the inner borders are double width because they're side by side. Basically, I want the table cell borders but with the responsiveness of the grid. 

#example {
  padding: 20px;
}

#example .col {
  border: 1px solid #c9c9c9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>


<div id="example">
  <div class="row">
    <div class="col">
      1st col
    </div>
    <div class="col">
      2nd col
    </div>
    <div class="col">
      3rd col
    </div>
  </div>
  <div class="row">
    <div class="col">
      4th col
    </div>
    <div class="col">
      5th col
    </div>
  </div>
</div>

Upvotes: 2

Views: 1758

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

You just need to select the appropriate cols, and remove the border-right and border-bottom as needed...

https://www.codeply.com/go/9S36zcuDGM

/* remove from last col in each row */
#example .col:not(:last-child) {
  border-right-width: 0;
}

/* remove from cols in last row */
#example .row:not(:last-child) .col {
  border-bottom-width: 0;
}

Or, you can use the border utils in the HTML markup (not ideal)...

  <div class="row">
    <div class="col border border-right-0">
      1st col
    </div>
    <div class="col border border-right-0">
      2nd col
    </div>
    <div class="col border">
      3rd col
    </div>
  </div>

Upvotes: 2

Related Questions