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:
enter image description here

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

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.

What do you mean it doesn't work 'as intended'? Did the styles you apply not look good or did they not overwrite the bootstrap styles correctly? Do you just need the correct CSS that will overwrite the bootstrap styles and get it looking like your picture? — DigTheDoug, Oct 02 '13 at 17:55
My styles did overwrite Bootstrap's defaults, but they don't look good :) I need corrected CSS which will make radio buttons look square and with margins... Will try Bass Jobsen's solution now... — errata, Oct 03 '13 at 07:42

score 27 · Accepted Answer · edited May 23 '17 at 10:31

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:

enter image description here

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:

enter image description here

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()); });

Hm, but this wont't make justified button group, nor it makes my buttons square-shaped, especially when a button has a bit more text in it... — errata, Oct 03 '13 at 07:46
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. — errata, Oct 03 '13 at 07:48
OK, thanks for helping! I thought I'll be able to solve this with CSS only but this is also a good solution. However, I think I'll try few different CSS-only options to achieve what I need... Will accept your answer though =) — errata, Oct 04 '13 at 12:04
If you want to cancel the space around your button group, you can add CSS with a negative margin equal to the space border : `border-spacing: 16px; margin: -16px;` — Flo Develop, Feb 13 '20 at 11:02

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

1 Answers1