CODEWITHSUNDEEP
htmlbootstrap-4
ahmed
ahmed

Reputation: 51

How to add a vertical line between two columns in Bootstrap 4

I have two div columns. I want to display a line between them on the screen.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

Upvotes: 2

Views: 10669

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43604

You can use the following solution using the border-right from utility classes of Bootstrap 4. But there are no breakpoint classes available on the border utilities. So the border is always visible:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 border-right">Column A</div>
    <div class="col-md-9">Column B</div>
  </div>
</div>

In case you only want to show the border on a specific breakpoint you can use something like the following (border is only visible on breakpoint md and higher):

.border-right.border-md {
  border-right-width:0!important;
}
    
@media (min-width: 768px) {
  .border-right.border-md {
    border-right-width:1px!important;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 border-right border-md">Column A</div>
    <div class="col-md-9">Column B</div>
  </div>
</div>

You can also add some custom SCSS code to the Bootstrap SCSS to add the breakpoints to the borders too: https://github.com/twbs/bootstrap/issues/23892

Upvotes: 3

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Try this, I hope it'll help you out. Thanks

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3 col-md-3">
      <label>Left Column</label>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
		<div class="col-sm-9 col-md-9 border-left">
      <label>Right Column</label>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>
	</div>
</div>

Upvotes: 4

Related Questions