How to Add Vertical Space Between Rows in Twitter Bootstrap Without Modifying the \'row\' Class?

Adding Vertical Space Between Rows in Twitter Bootstrap

Adding a top margin to "row" elements can enhance the visual appeal of your webpage. However, directly editing the "row" class in the Twitter Bootstrap framework is discouraged, as it's a crucial component of the page structure.

To address this, a more suitable approach involves creating a new CSS class, such as "top-buffer," that provides the desired margin.

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

By applying this class to a specific row, you can add a top margin without affecting the default behavior of the "row" element. For instance, if you want to add a 20-pixel top margin to a particular row, simply use the following markup:

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

This method allows you to add a top margin to individual rows whenever necessary, leaving the core "row" class unmodified.

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