Modified row spacing in Bootstrap 5-CodePudding

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>