How to make bootstrap btn-group break into half naturally


Tags: html,css,twitter-bootstrap

Problem :

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?



Solution :

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


    CSS Howto..

    How to add CSS to CKEDITOR?

    how to stop CSS hyphenation, no dash between words

    How to define alternative font-family corresponding to font-size CSS

    How to fix layout to browser window without scroll

    How much time should I put into validating my HTML and CSS?

    How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

    Javascript slideshow that gradually zooms on image [closed]

    how to get fixed header with css?

    How to queue CSS3 animations when shown after page scroll (JSFiddle provided)

    How to read all numeric values from within a file in php?

    How to make a smooth transition for css controlled by jQuery?

    How make to flow around a triangular block?

    How to keep links and hover effects on my icon-fonts isolated with CSS

    How to remove property from a child element?

    Dropdown container not showing right padding

    Tizen - how to change button font-size - fixed

    Javascript jQuery only shows Image element once in IE. FF works

    How to make Block Container with Inline-Block Child in CSS

    how to put css in selected row in angular js?

    How do I create html/css elements in a shape of a circle?

    How to call a CSS file from the right place

    How to apply CSS to 2x2 classes?

    How to wrap a div vertically and then horizontally

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    Issue with Hide / Show Jquery on fixed positioned div

    Using css modules how do I define a global class

    jQuery: How to check if an element exists and change css property

    how to overide css class with an underlying class

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How to get Jsfiddles working on a website? [duplicate]