November 15, 2017

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">

</div>

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:

                           
<html>
<head>
<title>Bootstrap Grid</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<style>
.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; }
</style>
<body>
<div class="container">
  <div class="row row-margin-05" style='background:yellow;'>
	  <h1>Row 1</h1>
  </div>
  <div class="row row-margin-05" style='background:skyblue;'>
	   <h1>Row 2</h1>
  </div>
  <div class="row row-margin-05" style='background:gray;'>
	   <h1>Row 3</h1>
  </div>
  <div class="row row-margin-05" style='background:skyblue;'>
	   <h1>Row 4</h1>
  </div>
</div>
</body>
</html>

Try it »

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

Bootstrap Add Space Between Rows

Bootstrap Add Space Between Rows | Margin Example

Bootstrap Add Space Between Rows Css Example:

Bootstrap Add Row Margin Example:

Add Comment

📖 Read More