Bootstrap 5 Released

Seems I’m late to the party and it was released about two weeks ago. I’ve already been using the betas for a while though.

Switching from using l/r (left/right) to s/e (start/end) for all the margin and padding utilities was a somewhat painful change.

Bootstrap 4 → 5 Compatibility Shim

I created this SCSS file to help me transition a lot of the other changes:

.form-group {
  @extend .mb-3;
  label {
    @extend .form-label;
  }
}

.badge-pill {
  @extend .rounded-pill;
}

.rounded-sm {
  @extend .rounded-1;
}

.rounded-lg {
  @extend .rounded-3;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  color: $dark;
  background-color: $light;
  @include border-radius($border-radius-lg);
  @include media-breakpoint-up(sm) {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  @include border-radius(0);
}

.bg-gradient-primary     { @extend .bg-primary,    .bg-gradient; }
.bg-gradient-secondary   { @extend .bg-secondary,  .bg-gradient; }
.bg-gradient-dark        { @extend .bg-dark,       .bg-gradient; }
.bg-gradient-light       { @extend .bg-light,      .bg-gradient; }

.navbar { background-image: none }

.float-left  { @extend .float-start; }
.float-right { @extend .float-end; }

Are those the only changes in Bootstrap 5? No, there’s lots. But based on my own personal usage of Bootstrap 4, those were the parts of Bootstrap 4 I wanted some backwards compatibility for.