Menu
I'm trying to add space between the two card decks. I'm using bootstrap 4 alpha 6. I've no idea why using mt-20 on the second card deck wont do it. I've tried wrapping them in rows and doing it, but doesn't do it either:
<div> <div class="container"> <div class="card-deck"> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">Permits</h4> <p class="card-text"> Apply for parking permit<br /> View existing permit requests<br /> Activate Visitor permits<br /> </p> </div> <div class="card-footer"> @Html.ActionLink("Permits", "Index", "Home", new { Area = "Permit" }, new { @class = "btn btn-primary" }) </div> </div> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">Vehicles</h4> <p class="card-text"> View and manage your vehicles </p> </div> <div class="card-footer"> @Html.ActionLink("My Vehicles", "Index", "Vehicle", null, new { @class = "btn btn-primary" }) </div> </div> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">Parking Tickets</h4> <p class="card-text"> View your parking ticket history </p> </div> <div class="card-footer"> @Html.ActionLink("My Tickets", "Index", "ParkingTicket", null, new { @class = "btn btn-primary" }) </div> </div> </div> <div class="card-deck mt-20"> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">Funding Options</h4> <p class="card-text"> Add credit/debit card<br /> Top up Account<br /> Manage cards </p> </div> <div class="card-footer"> @Html.ActionLink("Funding Options", "Index", "Funding", null, new { @class = "btn btn-primary" }) </div> </div> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">Account History</h4> <p class="card-text"> View all financial transactions on my account </p> </div> <div class="card-footer"> @Html.ActionLink("Account transactions", "Index", "Activity", null, new { @class = "btn btn-primary" }) </div> </div> <div class="card text-center"> <div class="card-block"> <h4 class="card-title">User Settings</h4> <p class="card-text"> Edit personal details<br /> Change top-up settings<br /> Change password </p> </div> <div class="card-footer"> @Html.ActionLink("Personal details", "Update", "Account", null, new { @class = "btn btn-primary" }) </div> </div> </div> </div> 
990
It inside a how to add space between two cards in bootstrap within col-md-6 that has the extra padding that you may use easily in various elements manage... Add 1rem padding is up to you if you want it sets the height of card. ; set the padding and margin bearings ( the part that goes inside the box component make.
Spacing in Bootstrap with Examples 1 m: This property defines the margin. Margin provides an edge or border. 2 p: This property defines the padding. Padding properties are used to generate space around the content. More ...
A basic card is created with the .card class, and content inside the card has a .card-body class: If you are familiar with Bootstrap 3, cards replace old panels, wells, and thumbnails. The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card:
Property: There are two ways of adding spacing to the elements. m: This property defines the margin. Margin provides an edge or border. p: This property defines the padding. Padding properties are used to generate space around the content. Sides: This allows users to add spacing in content to a specific side wherever required.
There is no mt-20 in Bootstrap 4. The Bootstrap 4 margin classes are...
m{sides}-{size}
Where size is from 0-5, and size is a portion of the default spacer unit of 1rem
.25rem .5rem 1rem 1.5rem 3rem So you can use mt-3, mt-4, mt-5 etc..
http://www.codeply.com/go/29IGJHkqVd
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
