Making button go full-width?

Question

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

    

        
                      

              相关标签:
       
      

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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.

Answer 5

Bootstrap v3 & v4

Use btn-block class on your button/element

Bootstrap v2

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

Answer 6

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>