bootstrap button: Stretch to fill its container space

css twitter-bootstrap stretching
Murhaf Sousli picture Murhaf Sousli · Jun 15, 2014 · Viewed 62k times · Source

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?

Answer

Milad picture Milad · Jun 15, 2014

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%">

Related questions

Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More