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>

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:

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
    <div class='col-md-6'>

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 can I instantly stop a CSS animation on hover?

    How to add a style only to certain elements of a list via CSS

    How can I make a wrapper's css not apply to it's contained elements [closed]

    CSS How to center link elements within a div

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    How to align a picture,name and the post with css like facebook does?

    How to dynamically change element alignment?

    CSS: how to create a fixed top header with a fixed width

    How to highlight the table row using jquery in Rails 3?

    c# cassette - how to create different css bundles for different pages

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to center bootstrap navba-nav on scroll when fixed?

    How do I get an object from

    Blueprint CSS - Link showing both URL and text

    How work with degree or start and stop in linear-gradient CSS3

    How to set background image for body tag using css?

    How to fix html border corner slope with css?

    How to change a CSS property dynamically in Angular

    How to make a very simple coloured 1-line text area?

    how to make a stretchable blog header

    how to read value of style[“display”] property of webcontrol

    How to keep text in textfield even after focus and remove on key press?

    CSS/Web design: how to create an oblique/sided button

    How to add css only to options page of a plugin in wordpress?

    How to know when you have received an image in the browser?

    How can I have multiple jQuery button styles on one page?

    how to set primefaces datatable columns padding with CSS padding

    How to center text from following element under an image

    How to change logo in php header when change the header js class and CSS

    How to add hover class to jQuery click(function() accordian divs?