Bootstrap Add Space Between Rows

Bootstrap Add Space Between Rows Css, Add Margin – Sometimes we require custom space between rows, we can override the default behavior of row.

Bootstrap Add Space Between Rows | Margin Example

For Bootstrap version > 4 you can use the spacer class mt-n, where n can be 1 or 2. Here is simple example-

Bootstrap Add Space Between Rows Css Example:

<div class="row mt-2">


If you are using Bootstrap version < 4, You can create custom class simply as below and add margin as per your requirement.

Bootstrap Add Row Margin Example:

<title>Bootstrap Grid</title>
<link rel="stylesheet" href="">
<script src=""></script>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
.row-margin-20 { margin-top: 2.0em; }
.row-margin-30 { margin-top: 3.0em; }
<div class="container">
  <div class="row row-margin-05" style='background:yellow;'>
	  <h1>Row 1</h1>
  <div class="row row-margin-05" style='background:skyblue;'>
	   <h1>Row 2</h1>
  <div class="row row-margin-05" style='background:gray;'>
	   <h1>Row 3</h1>
  <div class="row row-margin-05" style='background:skyblue;'>
	   <h1>Row 4</h1>

Try it »

If you run the above example it will produce output something like this-

Bootstrap Add Space Between Rows


Add Comment

📖 Read More