vertical divider between two columns in bootstrap

murtaza52 picture murtaza52 · Jan 29, 2013 · Viewed 363.8k times · Source

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

Billy Moat picture Billy Moat · Jan 29, 2013

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;
}