308
votes

I want a button to take up the full width of the column, but having difficulties...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

How do I make the button as wide as the column?

14
What column? Where is the CSS?JJJ
So I'm using Twitter-bootstrapuser1438003
Have you tried style="width:100%"? Or putting that in one of your classes?Lee Taylor
That's maybe because it has some margin or the column has some padding.Ohad
The btn-block class works for me as you expect in BS3fguillen

14 Answers

880
votes

Bootstrap v3 & v4

Use btn-block class on your button/element

Bootstrap v2

Use input-block-level class on your button/element

40
votes

Why not use the Bootstrap predefined class input-block-level that does the job?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

Learn more here in the Control Sizing^ section.

29
votes

I simply used this:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
26
votes

Bootstrap / CSS

Use col-12, btn-block, w-100, form-control or width:100%

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

         <button class="btn btn-success col-12">
             class="col-12"
         </button>
    
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>

         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
         
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
         
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
12
votes

use

<div class="btn-group btn-group-justified">
  ...
</div>

but it only works for <a> elements and not <button> elements.

see: http://getbootstrap.com/components/#btn-groups-justified

10
votes

You should add these styles to a CSS sheet

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Then change add the classes to your code

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.

6
votes

I would have thought this would be the most bootstrap-esque way of doing things:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

All I'm doing is adding the class col-xs-12 to the button.

5
votes
<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.

2
votes

In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row"><div class=" col-5 ">
            <a class="btn btn-outline-primary w-100  " href="# "><span>Button 1</span></a> 
</div><div class="col-5 ">

            <a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a> 
</div></div>
1
votes

The question was raised years ago, with the older version it was a little hard to get...but now this question has a very easy answer.

<div class="btn btn-outline-primary btn-block">Button text here</div>
1
votes

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

         <button class="btn btn-success col-12">
             class="col-12"
         </button>
    
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>

         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
         
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
         
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
1
votes

In case some are noticing btn-block not working anymore in bootstrap 5.1+:

btn-block was dropped in bootstrap 5.1 (changelog):

Breaking Dropped .btn-block for utilities. Instead of using .btn-block on the .btn, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples.

To make block buttons for bootstrap 5.1+ example taken from the official docs:

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons

0
votes

The width of the button is defined by the button text. So if you want to define the width of the button you can use a defined width by using pixel in the css or if you want to by responsive use a percentage value.

0
votes
  1. We can Use a Block Level Full-Width Button

  2. Create block level buttons—those that span the full width of a parent—by adding .btn-block.

    <button type="button" class="btn btn-primary btn-lg btn-block">
       Block level button
    </button>
    
    <button type="button" class="btn btn-secondary btn-lg btn-block">
       Block level button
    </button>