How to set line spacing in bootstrap

For example, the following HTML code based on Bootstrap framework layout needs to add spacing (padding or margin) between each line. What methods can be achieved?

<div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>

Related recommendations: "bootstrap Getting Started Tutorial"

Option 1

Add a new style class and define margin -top style, such as:

.top-buffer { margin-top:20px; }

Then, add the style class on the div element where row is located, such as:

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

Option 2

Define some common top margin style classes, such as:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

Then, add a suitable CSS style class to the div element where the row is located, such as:

<div class="row top7"></div>

Option 3

In Bootstrap 4, you can use the built-in spacing style class (see here for details), such as:

<div class="row mt-3"></div>

The above is the detailed content of How to set line spacing in bootstrap. For more information, please follow other related articles on the PHP Chinese website!