Twitter bootstrap button dropdowns btn-block - html

Question

I want that the dropdown buttons also can go over the whole page like buttons with the class btn-block. Here my current code : http://jsfiddle.net/wLUkx/1/
Here the code:
<div class="btn-group">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
xx
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">xx</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">xx</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">xx</button>
</form>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
yyy
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">yyy</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">yyy</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">yyy</button>
</form>
</ul>
</div>
<form>
<input type="hidden" name="game" value="paint">
<button class="btn btn-large btn-block btn-primary" type="submit">paint</button>
</form>
Can anybody help me?

Answer 1

Add btn-block to <div class="btn-group">

Answer 2

<div class="btn-group btn-group-justified">
<button type="button" style="width:100%;" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">
actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="btn-group-justified">Separated link</li>
<li class="btn-group-justified">Separated link</li>
<li class="btn-group-justified">Separated link</li>
<li class="divider"></li>
<li class="btn-group-justified">Separated link</li>
</ul>
</div>
http://jsfiddle.net/wLUkx/14/ (but for twitter bootstrap 3.x verison)

Answer 3

The class 'btn-group' has a property of display:inline-block. Changing this to display: block should give you the desired effect.

Answer 4

add this to your css .btn-group{display:block;}

Answer 5

The problem isn't the buttons in that fiddle, its the containers. The 'btn-group' class is inline and it is making the buttons the minimum width they can be. You can either remove 'btn-group' from those containers or create a new class that makes them "width:100%;"

Answer 6

What worked for me was adding btn-block to both <div class="btn-group" and <a class="btn">
I discovered the solution here
<div class="btn-group btn-block">
<a class="btn btn-primary btn-block btn-large dropdown-lead dropdown-toggle" data-toggle="dropdown" href="#">
xx
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<form>
<input type="hidden" name="game" value="ttt-play">
<button class="btn btn-link">xx</button>
</form>
<hr>
<form>
<input type="hidden" name="game" value="ttt-newgame">
<button class="btn btn-link">xx</button>
</form>
<form>
<input type="hidden" name="game" value="ttt-joingame">
<button class="btn btn-link">xx</button>
</form>
</ul>
</div>