How can I add a line between two columns using Twitter Bootstraps grid system

user_1314189 0
Viewed 84210

Two column layout with a line in the middle. 

[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
twitter-bootstrap grid
7 Answers

Bootstrap 4 now comes with border utility classes. So if you are using Bootstrap 4, you can just use these classes on the columns that need them. For example, If you want a border between column A and column B, you would add the border-right class on column A.

Here is a demo:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col border-right">
      Column A
    </div>
    <div class="col">
      Column B
      <br>
      <br>
      <br>
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    </div>
  </div>
</div>

user_25182000
Related