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

Question

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?

Answer 1

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.

Answer 2

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!