Bootstrap Add Space Between Rows

<html>
<head>
<title>Bootstrap Grid</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<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>