CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
rose
rose

Reputation: 197

How to put vertical line between two divs?

I have div where I want to put a vertical line between two other divs with some content. How could I do that?

Here is my code.

#vertical-line {
  float: left;
  height: 100px;
  width: 1px;
  background-color: black;
}
<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">

  <div class="col">
    <div class="row justify-content-center">
      <h4>Most popular ads</h4>
    </div>
    <div class="row" style="margin-left:85px;">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>

  <div id="vertical-line">Here goes vertical line</div>

  <div class="col">
    <div class="row justify-content-center">
      <h4>Latest ads</h4>
    </div>
    <div class="row" style="margin-left:85px;">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
</div>

<hr>

Upvotes: -1

Views: 6519

Answers (2)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

you can use border-right instead of div: here is the updated fiddle: 

.card-body {
  display: flex;
}

.col {
  padding: 10px;
}

.border-line {
  border-right: 1px solid #000;
}
<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">
  <div class="col border-line">
    <div class="row justify-content-center">
      <h4>Most popular ads</h4>
    </div>
    <div class="row">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>



  <div class="col">
    <div class="row justify-content-center">
      <h4>Latest ads</h4>
    </div>
    <div class="row">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
</div>

<hr>

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

add border-right first col class

<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">
    <div class="col border-right">

https://jsfiddle.net/lalji1051/1hucdxeg/1/

Upvotes: 1

Related Questions