Making button go full-width?
Advertisement
Making button go full-width?
Question
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?
2012/08/21
Popular Answer
Bootstrap v3 & v4
Use btn-block
class on your button/element
Bootstrap v2
Use input-block-level
class on your button/element
2018/04/19
Read more... Read less...
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.
2014/03/07
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>
2018/06/19
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"/>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-success col-12">
class="col-12"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-primary w-100">
class="w-100"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-success form-control">
class="form-control"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
</div>
</div>
2020/08/02
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
2016/05/26
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.
2012/08/22
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]