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/

enter image description here

I think the code is clear enough... Don't really need a fiddle, even if it's better. — BENARD Patrick, Feb 11 '14 at 09:30
You can use this answer, and convert columns to button as you need : http://stackoverflow.com/a/14580505/2454790 — BENARD Patrick, Feb 11 '14 at 09:31

score 26 · Answer 1 · answered Feb 12 '14 at 10:41

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

Change height: 34px; to height: 100%; – Alaa Sadik Jan 13 '23 at 15:36 — Alaa Sadik, Jan 13 '23 at 15:36

score 0 · Accepted Answer · answered Feb 11 '14 at 10:51

0

My result

<div style="border-right: 1px solid #C0C0C0; margin-left: 20px; float: left; height: 34px">
</div>
    <button type="button" class="btn btn-default pull-left" style="margin-left: 20px;">
    <span id="toDayBtn">Today</span>
</button>

answered Feb 11 '14 at 10:51

Alexandr Sulimov

1,894
2
24
48

score 0 · Answer 3 · answered Nov 16 '16 at 22:00

0

If you put your other buttons in their own group on a btn-toolbar, then this works pretty well

<div class="btn-group" role="group">|</div>

answered Nov 16 '16 at 22:00

Josh Petitt

9,371
12
56
104

bootstrap 3 vertical line in button group

3 Answers3