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 to create a vertical divider with bootstrap 3?

http://jsfiddle.net/gJH6w/

Answer 1

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> 

Answer 2

Here is the .btn-separator class that suits 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

Answer 3

If you put your other buttons in your group on the btn toolbar, it will be very good

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