Estoy tratando de actualizar mi aplicación de Bootstrap 4 a Bootstrap 5, pero todos los elementos que usaban clases de formulario como form-group , form-row , form-inline están completamente rotos.
Debido a que las clases form-group, form-row y form-inline se eliminaron en Bootstrap 5: recurrí al uso de gy-. por ejemplo (gy-2)
<div class="card"> <div class="card-body"> <div class="row"> <div class="col-lg-2 gy-2"> <select class="form-control"> <option>invoice</option> <option>qoutation</option> </select> </div> <div class="col-lg-2 gy-2"> <select class="form-control product-select" name="state"> <option value="AL">Search Product..</option> </select> </div> </div> </div> </div>El motivo es que las clases form-group , form-row y form-inline se han eliminado en Bootstrap 5:
Cambio importante: se eliminaron las clases de diseño específicas del formulario para nuestro sistema de cuadrícula. Use nuestra cuadrícula y utilidades en lugar de .form-group, .form-row o .form-inline.
https://getbootstrap.com/docs/5.0/migration/#forms
Por lo tanto, se supone que Grid y Utilities deben usarse en su lugar.
... pero si está buscando una solución rápida, así es como funcionaban estas clases en Bootstrap 4:
.form-group { margin-bottom: 1rem; } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } label { margin-bottom: 0.5rem; }