vertical divider between two columns in bootstrap

Question

I am using twitter bootstrap, and have a row which has two columns (span6). How do I create a vertical divider between both the spans.

Thanks, Murtaza

Answer 1

If your code looks like this:

<div class="row">   <div class="span6">   </div>   <div class="span6">   </div> </div> 

Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...

<div class="row">   <div class="span6">     <div class="mycontent-left">     </div>   </div>   <div class="span6">     <div class="mycontent-right">     </div>   </div> </div> 

So you could simply add some CSS to the "mycontent-left" class to create your divider.

.mycontent-left {   border-right: 1px dashed #333; } 

Answer 2

In Bootstrap 4 there is the utility class border-right which you can use.

So for example you can do:

<div class="row">   <div class="col-6 border-right"></div>   <div class="col-6"></div> </div>