CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
bier hier
bier hier

Reputation: 22580

How can I show border with css?

I am using bootstrap 3 for my layout , trying to show a border at the bottom of the div:

<div class="row small headerheight borderbottom hidden-xs">
    <div class="col-md-8 headerheight vcenteritems paditems">Items</div>
    <div class="col-md-2 headerheight vcenteritems light-grey hcenteritems borderright">One-off</div>
    <div class="col-md-2 headerheight vcenteritems light-grey hcenteritems">Monthly</div>
</div>

The borderbottom is only showing a border for the first column:

.borderbottom
{
  border-bottom: solid 1px #b3b3b3 ;
}

How can I display an border for the one off and monthly column too?

Codepen here

Upvotes: 0

Views: 243

Answers (2)

Ryan Wheale
Ryan Wheale

Reputation: 28440

I just got done having this same discussion with our team. Don't set height unless you absolutely need to. Remember that. What you are not seeing is that the grey boxes are covering up the border which is in fact spanning the entire width. The reason this is happening is because the grey boxes have a fixed height set to them when they don't need to. Again:

Do not set the height of something unless there is absolutely no other way.

Instead, let the padding-top, padding-bottom, font-size, and line-height determine the height. Play with those numbers until you reach a satisfactory height.

I found that padding top and bottom of 20px did the trick (as well as removing the 60px fixed height). Here's a basic example:

<div class="header-row">
    <div>Items</div>
    <div>One-off</div>
    <div>Monthly</div>
</div>

.header-row > * {
  padding-top: 20px;
  padding-bottom: 20px;
}

Upvotes: 1

Dekel
Dekel

Reputation: 62676

You can set the border to any div that is inside .borderbottom:

.borderbottom div
{
    border-bottom: solid 1px #b3b3b3 ;
}

Upvotes: 2

Related Questions