CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
InitLipton
InitLipton

Reputation: 2453

How can I add space between Bootstrap card elements?

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:

enter image description here

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

Upvotes: 43

Views: 181285

Answers (5)

Eskias Yilma
Eskias Yilma

Reputation: 1

Use <br> at the end on the first (only the first) card </div>.

Upvotes: -2

Ojas Mahajan
Ojas Mahajan

Reputation: 42

Another answer here explains the use of mt- in a very well manner.

I just want to add a point that you can use bootstrap grids to better structure the code using container, row and col.

See the example below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  
  <div class="container text-center">
    <div class="row">
      <div class="col">
        card element 1
      </div>
      <div class="col">
        card element 2
      </div>
      <div class="col">
        card element 3
      </div>
    </div>
    <div class="row mt-2">
      <div class="col">
        card element 4
      </div>
      <div class="col">
        card element 5
      </div>
      <div class="col">
        card element 6
      </div>
    </div>
  </div>

Here adding mt-2 for second-row top margin

Upvotes: 1

Roberto Cannella
Roberto Cannella

Reputation: 11

I found that when using row or columns (in grid format) to layout cards, you need to set the margin on the columns for vertical spacing :

            <div class="col  mb-2">
               <div class="card h-100">
                  ...
               </div>
            </div>

Upvotes: 0

Tony
Tony

Reputation: 3068

You could put a bottom margin under the card class:

.card{
    margin-bottom: 10px;
}

Upvotes: 14

Carol Skelly
Carol Skelly

Reputation: 362760

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

  • 0 - eliminate the margin
  • 1 - set the margin to .25rem
  • 2 - set the margin to .5rem
  • 3 - set the margin to 1rem
  • 4 - set the margin to 1.5rem
  • 5 - set the margin to 3rem

So you can use mt-3, mt-4, mt-5 etc..

http://www.codeply.com/go/29IGJHkqVd

Upvotes: 67

Related Questions