CODEWITHSUNDEEP
csstwitter-bootstrap-4
Zymotik
Zymotik

Reputation: 7337

Boostrap 4 spacing, why doesn't button have vertical space as in version 3?

Version 3 layout (https://plnkr.co/edit/XDA9EwMAzH4xDSfZaXvS?p=preview)

Bootstrap 3 layout with margin on the button

<div class="container">
  <h1>Confirm your details</h1>
  <div class="row">
    <div class="col-md-12">
      <div class="panel">
          <h4 class="panel-heading">We need to confirm your current address details and contact information.</h4>
          <p class="panel-body">With supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-right">
      <p>
        <a href="#" class="btn btn-primary">Confirm</a>
      </p>
    </div>
  </div>
</div>

Version 4 layout (https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview)

Bootstrap 4 layout with no margin for the button

<div class="container">
  <h1>Confirm your details</h1>
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-block">
          <h4 class="card-title">We need to confirm your current address details and contact information.</h4>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-right">
      <p>
        <a href="#" class="btn btn-primary">Confirm</a>
      </p>
    </div>
  </div>
</div>

Why doesn't the button have vertical space and how should I add it in Bootstrap v4?

Upvotes: 0

Views: 90

Answers (2)

ajb101
ajb101

Reputation: 161

According to this link "Migrating to v4 - Bootstrap 4" Panels have been dropped, it's the Panel that is providing the pseudo HR and a margin/padding below it.

Because it's now using cards, I'm thinking you've lost that extra css formatting and it's just going to be a case of applying margins around the preceding card.

Be aware: "Avoid margin-top. Vertical margins can collapse, yielding unexpected results." Boostrap Reboot Approach

Upvotes: 0

Zymotik
Zymotik

Reputation: 7337

Found the answer:

https://v4-alpha.getbootstrap.com/utilities/spacing/

Basically, they have added notation for adding margins and padding so that you can add differing amounts depending on the size of the screen. For example, I want to add margin ('m') to the top ('t') of the div for small ('-sm') sized screens. I also want it to be the default spacing ('-3'):

<div class="mt-sm-3"> <!-- footer nav -->
   <a class="btn btn-primary" href="#">Confirm</a>
</div>

Updated plnker: https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview

Upvotes: 1

Related Questions