bootstrap 3 vertical line in button group

Question

Button group

<button type="button" class="btn btn-default pull-left">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span id="prevBtn">06.02.2014</span>
</button>

<button type="button" class="btn btn-default pull-left">
    <span id="nextBtn">08.08.2014</span>
    <span class="glyphicon glyphicon-chevron-right"></span>
</button>

<button type="button" class="btn btn-default pull-left">
    <span id="toDayBtn">Today</span>
</button>

How create vertical divider with bootstrap 3?

http://jsfiddle.net/gJH6w/

Answer 1

Here is a .btn-separator class to fit your needs :

<div class="container">
    <div class="row">
        <button type="button" class="btn btn-default pull-left">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span id="prevBtn">06.02.2014</span>
        </button>

        <button type="button" class="btn btn-default pull-left">
            <span id="nextBtn">08.08.2014</span>
            <span class="glyphicon glyphicon-chevron-right"></span>
        </button>

        <span class="btn-separator"></span>

        <button type="button" class="btn btn-default pull-left">
            <span id="toDayBtn">Today</span>
        </button>
    </div>
</div>

.btn-separator:after {
    content: ' ';
    display: block;
    float: left;
    background: #ADADAD;
    margin: 0 10px;
    height: 34px;
    width: 1px;
}

JSFiddle