I have the following markup.
<div >
<div >
<div >
<label for="Truck_Notes">Notes</label>
<textarea rows="3" id="Truck_Notes" name="Truck.Notes"></textarea>
<span data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div >
<div >
<div >
<input type="submit" value="Submit" >
<a href="/Trucks">Cancel</a>
</div>
</div>
<div >
<div >
</div>
</div>
</div>
It looked fine in Bootstrap 4. But in Bootstrap 5 there is no spacing between the two rows.
Bootstrap has always been good about spacing between rows. What is the preferred way in Bootstrap 5 to have appropriate spacing here?
CodePudding user response:
One solution would be to use the my
class from Bootstrap for the top and bottom margin
. In your example, I added my-3
for 1rem
of top and bottom margin
on your textarea
element.
The reason the spacing is different on B5 is because form-group
, form-row
, and form-inline
classes have been removed in Bootstrap 5: So Grid and Utilities are supposed to be used instead. The updated spacing in B5 is actually really useful in numerous instances. Because of that, many of the default classes used for spacing were removed.
Read more about Bootstrap Spacing here - Bootstrap 5 Spacing
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
<div >
<div >
<label for="Truck_Notes">Notes</label>
<textarea rows="3" id="Truck_Notes" name="Truck.Notes"></textarea>
<span data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div >
<div >
<div >
<input type="submit" value="Submit" >
<a href="/Trucks">Cancel</a>
</div>
</div>
<div >
<div >
</div>
</div>
</div>