Month: June 2019

Add .stretched-link to a link to make its containing block clickable

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

References
https://getbootstrap.com/docs/4.3/utilities/stretched-link/

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Examples

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Horizontal centering

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Negative margin

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size

.mt-n1 {
  margin-top: -0.25rem !important;
}

References
https://getbootstrap.com/docs/4.3/utilities/spacing/

<div style="width: 50%" class="border border-dark">
    <div class="bg-primary p-3 w-25">Width 25% relative to the parent</div>
    <div class="bg-primary p-3 w-50">Width 50% relative to the parent</div>
    <div class="bg-primary p-3 w-75">Width 75% relative to the parent</div>
    <div class="bg-primary p-3 w-100">Width 100% relative to the parent</div>
    <div class="bg-primary p-3">Width Auto relative to the parent</div>
    <div class="bg-primary p-3 vw-100">Width 100% relative to viewport</div>
    <div class="bg-primary p-3 min-vw-100">Min-width 100% relative to viewport</div>
</div>

References
https://getbootstrap.com/docs/4.3/utilities/sizing/