CODEWITHSUNDEEP
htmltwitter-bootstrap-3
MithrilEdge
MithrilEdge

Reputation: 11

height issue with bootstrap button groups of differing rows sizes

How can I get the button heights to align when using button groups with buttons of differing row lengths for example:

http://www.bootply.com/ld5v1kvGKb

Upvotes: 1

Views: 380

Answers (1)

Richard Duerr
Richard Duerr

Reputation: 596

Honestly, I would not apply the bootstrap column classes to the buttons. I would create a div, and put the buttons in that. To ensure they "fill" their heights, you can set the parent div of the buttons to 100%, and then specify heights for the row that contains the div (that contain the buttons themselves).

Bootstrap classes are meant for layouts, and not meant to style elements. In this case, you used the columns to specify the width of the buttons. This is not easily maintainable (what happens if you want to add another button, or you have more than 12 elements needing to be side-by-side).

It also looks like you're trying to create an element that will be "stamped" on the page, to represent items in a list, images, favorites, etc. If this is the case, try and "encapsulate" the elements in their own structure of divs / css separate from bootstrap. This way, if need be, you can easily update bootstrap, and then fix any small issues using their own css, instead of having to add a bunch of classes and such. Plus, making these kind of elements "encapsulated" makes them very easily reused, and allows for easier debugging for cross-browser support.

Upvotes: 1

Related Questions