How to Add Vertical Spacing Between Rows in Bootstrap Without Modifying the Row Class?

Adding Vertical Spacing Between Rows in Twitter Bootstrap

Bootstrap's row class is essential for page structure. However, in situations where you require additional top margin between rows, it's unwise to modify the row class itself.

Solution: Create a Custom Class

Instead, create a custom class, such as "top-buffer," to achieve this effect. This approach avoids interfering with the core Bootstrap framework and allows for flexibility in adding top margin only where necessary.

CSS Declaration:

<code class="css">.top-buffer {
  margin-top: 20px;
}</code>

HTML Implementation:

Apply the "top-buffer" class to the specific rows that require top margin spacing.

<code class="html"><div class="row top-buffer">...</div></code>

This solution provides a cleaner and more targeted approach to adding vertical spacing between rows while preserving the integrity of the Bootstrap grid system.

The above is the detailed content of How to Add Vertical Spacing Between Rows in Bootstrap Without Modifying the Row Class?. For more information, please follow other related articles on the PHP Chinese website!