Modified row spacing in Bootstrap 5

Question

I have the following markup.

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="Truck_Notes">Notes</label>
            <textarea rows="3" class="form-control" id="Truck_Notes" name="Truck.Notes"></textarea>
            <span class="text-danger field-validation-valid" data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-primary">
            <a class="btn btn-secondary" href="/Trucks">Cancel</a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group text-end">
        </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?

Answer 1

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 class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="Truck_Notes">Notes</label>
            <textarea rows="3" class="form-control my-3" id="Truck_Notes" name="Truck.Notes"></textarea>
            <span class="text-danger field-validation-valid" data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-primary">
            <a class="btn btn-secondary" href="/Trucks">Cancel</a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group text-end">
        </div>
    </div>
</div>