Gersee Gersee - 3 months ago 57
CSS Question

Bootstrap btn-group with same height

I'm using Bootstrap3 and I have some buttons in a

row
. For having the same width depending to the screen size I use
btn-group-justified
and it works well. But the labels of my buttons have some words and glyphicons and I set a possibility for line-breaks by
white-space:normal
.
But in this case the buttons have some times the wrong
height
. How can I force all buttons to have the same
height
?

<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Button one</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Button Two</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Button Three and Breaky</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Button Four</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Button Five</button>
</div>
</div>


And my Style:

button {
white-space: normal !important;
}


Here is a jsfiddle-Link to show the challenge.

Edit: Added evidence of responsive design.

Answer

Please try this, hopefully it'll work. This will keep consistency among the button's height in any screen size

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.btn-group-justified .btn').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.btn-group-justified .btn').height(highestBox);

});
</script>