Menu
I want my bootstrap buttons to take up full screen width(well, almost) for smaller screens. btn-block does make the button extend, but for all types of screen.
Can this btn-block be customized using CSS (for example using @media) so that it is activated only for smaller screens? Or is there any other way of doing it?
My HTML button code lines are mentioned below:
<button type="submit" class="btn btn-lg btn-success">
Submit
</button>
<button type="reset" class="btn btn-lg btn-warning">
Reset
</button>
Thanks
AB
582
How can set full width button in Bootstrap? Create block level buttons—those that span the full width of a parent—by adding . btn-block .
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. You can use other CSS properties to customize it.
How do I get my bootstrap buttons the same size or width ? Use btn-block, (other optional elements below are: btn-lg for large and btn-primary for blue primary buttons. Use col-sm-4 for narrow and col-sm-12 or entire row for full length buttons.
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6 .
<div class="row">
<div class="col-md-4">
<button type="submit" class="btn btn-lg btn-success btn-block">Submit</button>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-lg btn-success btn-block">Submit</button>
</div>
</div>
Use the grid system
57
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
