CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user2567536
user2567536

Reputation: 237

Bootstrap Responsive Button Group Justified

In twitter bootstrap 3, there is a component prepared name button group justified. URL: http://getbootstrap.com/components/#btn-groups-justified

Is there any way we could make .btn-group.btn-group-justified responsive friendly if we have more buttons? Maybe we can put it to 2 rows without using display: block and retaining its display: table-cell so that it could stay vertically align middle?

enter image description here

Is there built in classes that bootstrap prepared? since they prepared this Button Group Justified css component, dont they have anything to make it responsive friendly if there are many buttons with longer words as text?

Here's my fiddle: http://jsfiddle.net/kHW3V/

Upvotes: 7

Views: 11109

Answers (3)

kmg
kmg

Reputation: 519

You can add this style for all .btn inside .btn-group-justified.

.btn-group-justified > .btn {
  width: auto;
  display: inline-block;
}

Upvotes: 0

krinklesaurus
krinklesaurus

Reputation: 1686

Using https://getbootstrap.com/components/#nav-justified worked for me

<ul class="nav nav-pills nav-justified">
   <li><a role="button" class="btn btn-default" href="/mypage1"><img src="/images/myimage1.png" height="32" alt="myimage1"></a></li>
   <li><a role="button" class="btn btn-default" href="/mypage2"><img src="/images/myimage2.png" height="32" alt="myimage2"></a></li>
   <li><a role="button" class="btn btn-default" href="/mypage3"><img src="/images/myimage3.png" height="32" alt="myimage3"></a></li>
</ul>

Upvotes: 0

nolawi
nolawi

Reputation: 4649

well yes if you used regular button groups like this its already responsive

<div class="btn-group">
    <button type="button" class="btn btn-default">Text</button>
</div>

Updated Fiddle

if you must have the justified one let me know!

Upvotes: 2

Related Questions