Bootstrap Button Full Width for Smaller Screen Sizes - html

Question

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

Answer 1

Create this new CSS class:
#media(max-width: 768px) {
button.full-width {
width: 100%;
}
}
And then apply it to your buttons:
<button type="submit" class="btn btn-lg btn-success full-width">
Submit
</button>
<button type="reset" class="btn btn-lg btn-warning full-width">
Reset
</button>
In my opinion, it is a better idea than editing Bootstrap classes as Claudio B suggested.

Answer 2

<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

Answer 3

Unfortunately there aren't a 'class' of bootstrap to apply this 'effect'. The only thing you can do, is using #media on CSS. You can use it:
#media (max-width: 768px) {
.btn, .btn-group {
width:100%;
}
}
You can apply one of the 'col' classes on the button, but the 'box' of the button will not follow the size of it content.
I hope it can help you. :)

Answer 4

Add form-control class
<button type="submit" class="btn btn-lg btn-success form-control">
Submit
</button>
<button type="reset" class="btn btn-lg btn-warning form-control">
Reset
</button>