Menu
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?
353
Creating a full-width button is very simple and easy, just take an <button> element and make it a block element with display: block property and add width: 100% to it.
Add .btn-lg or .btn-sm for additional sizes. Create block level buttons—those that span the full width of a parent—by adding .btn-block .
To increase the height and width of a button, use padding, and then overwrite default value buttons like border and background if you wish by overwriteing the appropriate border values as well as the applicable background values.In addition, to make buttons responsive, you can add a percentage to the width value.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Use btn-block class on your button/element
Use input-block-level class on your button/element
92
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
