How to make bootstrap btn-group break into half naturally
I've been avoiding finding a real solution to this problem, and often just sacrifice what I initially was aiming for to get around it.
I enjoy using the Bootstrap .btn-group class. It has a lot of nice uses. Unfortunately, it makes centering and responsiveness a pain. Say I built this.
<div id="nav-bar" class="btn-group" role="group"> <a class="nav-btn btn btn-default" >example 1</a> <a class="nav-btn btn btn-default" >example 2</a> <a class="nav-btn btn btn-default" >example 3</a> <a class="nav-btn btn btn-default" >example 4</a> </div>
When the screen gets small, the entire bar might not fit, in which case I would want two nav bars, top one with the first two btns, and the bottom one with the last two btns. Instead what happens is it shows 3 btns on top, and 1 on the bottom until the screen is small enough to force it to be 2 by 2 like I want.
On what is likely a related note, I cannot center btn-groups without specifying a left margin either, making btns with variable width practically impossible.. I've tried every combination of text-align: center, and margin: 0 auto that I could, as well as adding and applying various parents, div and span, and apply those properties as well. I can't use the bootstrap grid property, because it breaks the functionality of the .btn-group class.
It would seem the semantics of the HTML is making what I want impossible, at least without giving certain screen sizes certain HTML documents, but I've always known CSS to be able to solve anything visual. How can I have my navbar respond appropriately to screen size?
The bootstrap resizing system uses row containers classes filled with the "12 sum" rule. using classes
col-xs-x; col-xm-x; col-md-x; col-lg-x
where x is is an integer 1 <= x <= 12
this integer determines the width of a column within the row, as a part of the whole - 12 parts total. The middle characters indicate the size at which the row will convert to a column (from 1x4 to 4x1), i.e. resizes itself for a narrower display. The screen sizes for each are given here: http://getbootstrap.com/css/#grid
I suggest you use this row/column system to create a table that moves from 1x4 to 2x2 once the desired screen size is reached. Here's a skeletal frame:
<div class='row'> 1x4 <div class='col-md-6'> 2x2 anchor1 anchor2 </div> <div class='col-md-6'> anchor3 anchor4 </div> </div>
This would make a button group that starts out as a 1x4 then once the medium screen size is reached converts to a 2x2, medium just an arbitrary choice