Bootstrap Dropdown Button with Block Level?

15
votes

I'm trying to make a bootstrap 3 dropdown button accept the full width (.btn-block class) properties. It doesn't seem to work the same way with the drop down button as it does with regular buttons. Here is my current code:

<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-6">
    <!-- Single button -->
    <div class="btn-group">
      <button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-cog"></span> Dealer Tools  <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
         <li class="divider"></li>
         <li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>   
      </ul>
    </div>
    <!-- Single button -->
  </div>
  <div class="col-md-6 col-sm-6 col-xs-6">
    <a href="http://www.agrigro.com/testarea/contact-us/">
      <button type="button" class="btn btn-primary btn-block">
        <span class="glyphicon glyphicon-envelope"></span>  CONTACT US
      </button>
    </a>
  </div>
</div>

How can I get this to work right so the dropdown button takes up the full col-6?

5
csstwitter-bootstraptwitter-bootstrap-3
I see you've got a <button> inside an <a>. You shouldn't do that. Never nest interactive elements. - Mr Lister
Oh? really? what would be better? applying the button class to the a element? - streetfire
That depends on what you want. If you want the user to click the button, don't put it in an <a>. And vice versa. If you want a link, but have it look like a <button>, use only an <a> and apply some styles to it. - Mr Lister

5 Answers

38
votes

Apply btn-block to both the btn-group and btn

<div class="btn-group btn-block">
  <button type="button" class="btn btn-block btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Dealer Tools  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
 <li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
        <li class="divider"></li>
         <li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>   
  </ul>
</div>

Demo: http://bootply.com/101166

22
votes

When using a drop down, apply btn-block to btn-group first, then you can add col-?-? in the button's class to control the width of the button sections. Handy little trick.

 <!-- Split button -->
    <div class="btn-group btn-block">
      <button type="button" class="btn col-lg-10 btn-lg btn-danger">Action</button>
      <button type="button" class="btn col-lg-2 btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu col-lg-12" 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>
9
votes

enter image description here

<div class="btn-group btn-block">
    <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
        <span class="col-lg-10">
            Button dropdown
        </span> 
        <span class="col-lg-2">
            <span class="caret"></span>
        </span>
    </button>
    <ul class="dropdown-menu btn-block" 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>
5
votes

For single button dropdown @Skelly answer works. For the split button dropdown, I got the answer from Dave Ward's Using btn-block with Bootstrap 3 dropdown button groups.

He uses col-*-* for split buttons

<div class="col-sm-6">
  <button class="btn btn-block btn-lg btn-success">Approve</button>
</div>

<div class="col-sm-6">
  <div class="btn-group btn-block">
    <button class="col-sm-10 btn btn-lg btn-danger">Deny</button>

    <button class="col-sm-2 btn btn-lg btn-danger dropdown-toggle"
            data-toggle="dropdown">
      <span class="caret"></span>
    </button>

    <ul class="dropdown-menu btn-block">
      <li><a href="#">Reason 1</a></li>
      <li><a href="#">Reason 2</a></li>
      <li><a href="#">Reason 3</a></li>
    </ul>
  </div>
</div>
0
votes

I have a different setup, but what worked for me using Javascript, React Bootstrap 1.3.0, and React 16.9.0, was to apply block parameter to both the Dropdown and the Dropdown.Toggle:

import Dropdown from 'react-bootstrap/Dropdown';
import 'bootstrap/dist/css/bootstrap.min.css';

<Dropdown block>
  <Dropdown.Toggle block> Label for the button when collapsed </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Option 1</Dropdown.Item>
    <Dropdown.Item>Option 2</Dropdown.Item>
    <Dropdown.Item>Option 3</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>