0

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>
1
  • can you provide sample code you have implemented so far or can create fiddle on bootply.com...
    – Nimmi
    Jan 5, 2016 at 6:29

2 Answers 2

1

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/

1
  • Thanks, had to tweek it a little to suit my purposes, but got it working!
    – Zast
    Jan 5, 2016 at 9:54
0

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/

2
  • Is there a way to mix some split style buttons in there?
    – Zast
    Jan 5, 2016 at 7:19
  • Sorry, I should have said, I am using dropdown buttons!
    – Zast
    Jan 5, 2016 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.