I have the following code in Bootstrap:
<form action="contactoGracias.html">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" class="form-control w-50" id="name" required>
</div>
<div class="form-group">
<label for="surname">Apellidos:</label>
<input type="text" class="form-control w-50" id="surname" required>
</div>
</form>
If I don't put anything else, the inputs occupy 100% of the parent element. Is there a class that specifies that I want them to be 100% full when the screen size is small and 50% full when the screen size is large? Thank you
Even if you already have an accepted answer (or comment...), you don't exactly need
@media queries
, since these are already in Bootstrap's grid classes.One of them, little known, is
.form-row
, available from version4.0.0
. Thanks to the following properties,You can create forms, more or less complex, or at least, it allows you to do what you need using the grid. It all depends on how you want to play.
Knowing this, it is enough to use the classic classes for columns,
.col-sm-12
(so that theyinputs
occupy the full width in small resolutions) and.col-md-6
(so that they occupy 50% of the width in the following resolutions).Modify your css as follows