CODEWITHSUNDEEP
csstwitter-bootstrap
waitingkuo
waitingkuo

Reputation: 93804

Via Bootstrap, how can I add a vertical divider in a well?

I'm using bootstrap to drawing a well. In this well, I create two span6 and would like to draw a vertical divider between these two column. How can I achieve my goal?

Upvotes: 5

Views: 28184

Answers (3)

Pavlo
Pavlo

Reputation: 44907

Draw the left border on all, but first column:

.well [class^="span"] + [class^="span"] {
    margin-left: -1px; /* compensate border width */
    border-left: 1px solid #e3e3e3;
}

Alternatively, CSS columns can be used (prefixes required):

.well.col {
    columns: 2;
    column-gap: 20px;
    column-rule: 1px solid #e3e3e3;
}

If you have never use it before, you should check my tutorial on CSS columns.

Upvotes: 12

Tom Prats
Tom Prats

Reputation: 7921

The selected answer breaks if your elements take up the entire width because the border adds 1px too many! To combat this you can adjust the margin to account for the border.

.line-right {
  margin-right: -1px;
  border-right: 1px solid black;
}

If you'd like a bigger border, just be sure to account for it in the margin!

Upvotes: 2

Yuval
Yuval

Reputation: 317

You can always use an HTML <hr> tag.

Upvotes: 0

Related Questions