48

I'm using bootstrap buttons, I would like to stretch the dropdown button in the middle to fill the rest of the toolbar space.

enter image description here

HTML (shortened code):

<div class="gallery-toolbar">
    <ul style="padding:0">
   <li><a>Back</a></li>

   <li id="gallery_title">
   <div class="btn-group">
     <a class="btn btn-default"><?php echo $gallery->title ?></a>
     <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
     <ul class="dropdown-menu">some php</ul>
   </div></li>

  <li><a>Slideshow</a></li>

css:

.gallery-toolbar li { list-style:none; display: inline }
.gallery-toolbar li:last-child { float:right }
#gallery-title { ?? }

I have tried the class "btn-group-jastified" but it didn't work at all.

any ideas?

jgillich
  • 71,459
  • 6
  • 57
  • 85
Murhaf Sousli
  • 12,622
  • 20
  • 119
  • 185

2 Answers2

109

Have you tried btn-block? 

<a class="btn btn-default btn-block"></a>

And try width:100% on 

<div class="btn-group" style="width:100%">
Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Milad
  • 27,506
  • 11
  • 76
  • 85
1

For bootstrap 5 this will not work. Need to add w-100 class

<a class="btn btn-default btn-block w-100"></a>
vimuth
  • 5,064
  • 33
  • 79
  • 116