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.
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()); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With