How to Add Top Space Between Rows in Twitter Bootstrap ?

Last Updated : 07 May, 2023

Twitter Bootstrap is a popular front-end development framework that provides a set of tools and features to help developers create responsive and mobile-first websites quickly and easily. One of the features offered by Bootstrap is the ability to add top space between rows. This allows developers to create better layouts and improve the overall appearance of their web pages.

Syntax: To add top space between rows in Bootstrap, you can use the “mt” class followed by a number to specify the amount of space you want to add. The syntax for adding top space is as follows:

<div class="row mt-3">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    ...
</div>

Approaches: There are several approaches you can use to add top space between rows in Bootstrap, including:

Using the “mt” class: This is the simplest approach and involves adding the “mt” class to the row and specifying the amount of space you want to add using a number (e.g., “mt-3”).
Using custom CSS: You can also add top space between rows by creating your own custom CSS and applying it to the row. This approach gives you more control over the spacing and allows you to create more complex layouts.

Example 1: This example describes adding the top space between rows using Twitter Bootstrap by implementing the “mt” class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Twitter Bootstrap - add top space between rows 
        </h3> 
        <div class="row"> 
            <div class="col border bg-primary"> 
                Column 1 
            </div> 
            <div class="col border bg-danger"> 
                Column 2 
            </div> 
        </div> 
        <div class="row mt-5"> 
            <div class="col border bg-primary"> 
                Column 1 
            </div> 
            <div class="col border bg-danger"> 
                Column 2 
            </div> 
        </div> 
    </div> 
  
</body> 
  
</html>

Output:

Example 2: This is another example that describes adding the top space between rows using custom CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> 
    <style> 
        .custom-spacing { 
            margin-top: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Twitter Bootstrap - add top space between rows 
        </h3> 
  
        <div class="container"> 
            <div class="row"> 
                <div class="col border bg-success"> 
                    Column 1 
                </div> 
                <div class="col border bg-warning"> 
                    Column 2 
                </div> 
            </div> 
            <div class="row custom-spacing"> 
                <div class="col border bg-success"> 
                    Column 1 
                </div> 
                <div class="col border bg-warning"> 
                    Column 2 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>