CODEWITHSUNDEEP
twitter-bootstrapbutton
Zast
Zast

Reputation: 502

bootstrap justify split buttons

I am trying to do a vertical group of bootstrap buttons, a mix of both split and normal styles. I can do it with normal style, but because the text of the buttons differs, the split buttons are different widths!

Is there a way to make them full justification so they are all the same width?

I have removed a lot of the contents of the dropdowns to save space. The first one is a normal button dropdown, fully justified. The second dropdown is a split style, which needs to be justified, but if I do, it makes both the button the the click on part, that same width!

<div class="btn-group  btn-group-justified">
<div class="btn-group" role="group">
<button type="button" class="btn  btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-apple"></span>  Activities <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu  list-group">
<li class=" btn-sm"><a href='index.php?a=menus&amp;b=Archery' >Archery</a></li>
</ul>
</div></div>

<div class="btn-group ">
<div class="btn-group" role="group">
<button type="button" class="btn  btn-success"> Accommodation <span class="glyphicon glyphicon-home"></span> </button><button type="button" class="btn  btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
<ul class="dropdown-menu btn-info list-group">
<li class="list-group-item alert-info btn-sm"><a href='index.php?a=menus&amp;b=HUTS' >HUTS</a></li>
</ul>
</div></div>

Upvotes: 0

Views: 972

Answers (2)

Srinivasan Lakshmanan
Srinivasan Lakshmanan

Reputation: 433

HTML:

<div class="btn-group btn_grp">
  <button type="button" class="btn btn-danger center_text">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle toggle_width" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group btn_grp">
  <button type="button" class="btn btn-danger center_text">Action Testing Button</button>
  <button type="button" class="btn btn-danger dropdown-toggle toggle_width" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS:

.center_text{
  width:95%
}
.toggle_width{
  width:5%;
}
.btn_grp{
  width:100%;
}

Demo Sample Code : http://jsfiddle.net/hellosrini/52VtD/13510/

Upvotes: 1

Srinivasan Lakshmanan
Srinivasan Lakshmanan

Reputation: 433

HTML : 

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">Shimla</button>
    <button type="button" class="btn btn-default">Srinagar (Summer)</button>
    <button type="button" class="btn btn-default">Uttarakhand</button>
    <button type="button" class="btn btn-default">Kerala</button>
    <button type="button" class="btn btn-default">Goa</button>
    <button type="button" class="btn btn-default">Dadra and Nagar Haveli union territory</button>
    <button type="button" class="btn btn-default">Arunachal Pradesh</button>
</div>

CSS:

.btn-group-vertical > button{
    margin-bottom:5px;
    border-radius:5px !important;
}

Sample Demo : http://jsfiddle.net/hellosrini/52VtD/13491/

Upvotes: 0

Related Questions