Styling Bootstrap's btn-group-justified, adding margins and sizing vertically

Question

I'd like to style the original Bootstrap's btn-group-justified with radio input fields (http://getbootstrap.com/javascript/#buttons-examples).

The original style looks like this:

but I'd like to make every button a square-shaped button and give them all some whitespace between each other. Something like this:

I was trying with a bit modified html markup from Bootstrap examples

[data-toggle="buttons"] .btn>input[type="radio"] {
  display: none;
}

.category-select .btn-container {
  position: relative;
  width: 19%;
  padding-bottom: 19%;
  float: left;
  height: 0;
  margin: 1%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn-container .btn,
.btn-container .btn input {
  max-width: 100%;
}

<div class="btn-group-justified category-select" data-toggle="buttons">
  <div class="btn-container">
    <label class="btn category category-one">
          <input type="radio" name="options" id="option1"> One
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-two">
          <input type="radio" name="options" id="option2"> Two
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-three">
          <input type="radio" name="options" id="option3"> Three
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-four">
          <input type="radio" name="options" id="option4"> Four
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-five">
          <input type="radio" name="options" id="option5"> Five
        </label>
  </div>
</div>

but of course this CSS doesn't style my buttons as I want to...
The functionality I'd like to achieve is to have 5 buttons, horizontally justified, responsive (square-shaped in all browser sizes) and to act like a radio-buttons group.

Answer 1

html

<div class="container"> 
<div class="btn-group blocks" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

css

.blocks .btn-primary 
{
    padding: 24px 12px;
    margin: 0 5px;  
    border-radius: 0;
}

will looks like:

If I apply btn-group-justified class instead of just btn-group, they became justified but still not square-shaped, nor they have margin between them

I don't think the btn-group-justified class will be intent to use without the btn-group. Although it don't seems to make a difference when you don't use btn-group.

btn-group-justified set the display to table. To add a margin between two cell you will need border-spacing in stead of margin (see: Why is a div with "display: table-cell;" not affected by margin?)

now you have html:

<div class="container"> 
<div class="btn-group btn-group-justified blocks" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

css:

.blocks .btn-primary 
{
    padding: 24px 12px;
    border-radius: 0;

}
.blocks {border-spacing:5px;}

Which will look like:

Note you have rectangles instead of squares. btn-group-justified set the total with of the group to 100% of it's parent. To make squares you will need jQuery to set the height based on the (inner)width of your buttons. (see: CSS scale height to match width - possibly with a formfactor)

$(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth());
$(window).resize(function(){ $(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth()); });