CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dragon
dragon

Reputation: 1264

Divider right 1px for bootstrap cols

I'm new to bootstrap 4 and I got in a problem. I wanted to put a 1px divider to the right side of each col.

The problem is that the divider doesn't have the whole card height, because all the code is in a card. I tried many times but doesn't work. If I put a height: 100px, for ex, works, but I guess this is an ugly solution.

Can someone please tell me how to do this?

jsfiddle

.divider-right {
    border-right: 1px solid white;
  }
 .fa {
   color: white;
   height: 10px;
 }
 .fa.fa-qrcode {
    float: left;
  }
  .fa.fa-bars {
    float: right;
  }
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/b86d1e2e04.js"></script>
<div class="card card-block" style="background-color: #333; border-color: #333;">
  <div class="row">
    <div class="col-1 divider-right">
      <div class="add-event">
        <i class="fa fa-plus-circle" aria-hidden="true"></i>
      </div>
    </div>
    <div class="col-2 divider-right">
      <div class="arrange-events">
        <i class="fa fa-qrcode" aria-hidden="true"></i>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </div>
    </div>
    <div class="col-4 divider-right">
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Event Status
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 60

Answers (1)

Samuil Petrov
Samuil Petrov

Reputation: 553

Remove the top and bottom paddings from the card (pref give it id before you do it so you don't do it for all cards):

.card {
  padding-top:0; /* you may need !important here if you don't use an id or other more concrete selector */
  padding-bottom:0; /* same here */
}

and then add the padding to your columns instead (whatever size fits you):

.divider-right {
  border-right: 1px solid white;
  padding-top: 10px;
  padding-bottom: 10px;
}

consider having another class name for the paddings to be more semantical

Updated working fiddle

Upvotes: 1

Related Questions