title: How can I add space between Bootstrap card elements?
body: <p>I'm trying to add space between the two card decks. I'm using bootstrap 4 alpha 6. I've no idea why using <code>mt-20</code> on the second card deck wont do it. I've tried wrapping them in rows and doing it, but doesn't do it either:</p>
  
  <p><a href="https://i.stack.imgur.com/yV6OV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yV6OV.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="container"&gt;
              &lt;div class="card-deck"&gt;
                  &lt;div class="card text-center"&gt;
                      &lt;div class="card-block"&gt;
                          &lt;h4 class="card-title"&gt;Permits&lt;/h4&gt;
                          &lt;p class="card-text"&gt;
                              Apply for parking permit&lt;br /&gt;
                              View existing permit requests&lt;br /&gt;
                              Activate Visitor permits&lt;br /&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="card-footer"&gt;
                          @Html.ActionLink("Permits", "Index", "Home", new { Area = "Permit" }, new { @class = "btn btn-primary" })
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="card text-center"&gt;
                      &lt;div class="card-block"&gt;
                          &lt;h4 class="card-title"&gt;Vehicles&lt;/h4&gt;
                          &lt;p class="card-text"&gt;
                              View and manage your vehicles
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="card-footer"&gt;
                          @Html.ActionLink("My Vehicles", "Index", "Vehicle", null, new { @class = "btn btn-primary" })
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="card text-center"&gt;
                      &lt;div class="card-block"&gt;
                          &lt;h4 class="card-title"&gt;Parking Tickets&lt;/h4&gt;
                          &lt;p class="card-text"&gt;
                              View your parking ticket history
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="card-footer"&gt;
                          @Html.ActionLink("My Tickets", "Index", "ParkingTicket", null, new { @class = "btn btn-primary" })
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;div class="card-deck mt-20"&gt;
          &lt;div class="card text-center"&gt;
              &lt;div class="card-block"&gt;
                  &lt;h4 class="card-title"&gt;Funding Options&lt;/h4&gt;
                  &lt;p class="card-text"&gt;
                      Add credit/debit card&lt;br /&gt;
                      Top up Account&lt;br /&gt;
                      Manage cards
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="card-footer"&gt;
                  @Html.ActionLink("Funding Options", "Index", "Funding", null, new { @class = "btn btn-primary" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="card text-center"&gt;
              &lt;div class="card-block"&gt;
                  &lt;h4 class="card-title"&gt;Account History&lt;/h4&gt;
                  &lt;p class="card-text"&gt;
                      View all financial transactions on my account
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="card-footer"&gt;
                  @Html.ActionLink("Account transactions", "Index", "Activity", null, new { @class = "btn btn-primary" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card text-center"&gt;
              &lt;div class="card-block"&gt;
                  &lt;h4 class="card-title"&gt;User Settings&lt;/h4&gt;
                  &lt;p class="card-text"&gt;
                      Edit personal details&lt;br /&gt;
                      Change top-up settings&lt;br /&gt;
                      Change password
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="card-footer"&gt;
                  @Html.ActionLink("Personal details", "Update", "Account", null, new { @class = "btn btn-primary" })
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>