---
title: "Migrating from Bootstrap 4 to Bootstrap 5"
author: "Yaroslav Shmarov"
date: "2021-06-11"
canonical_url: "https://blog.superails.com/migrate-bootstrap-4-to-5"
markdown_url: "https://blog.superails.com/migrate-bootstrap-4-to-5.md"
description: "Some main changes from my experience: replace badge badge with badge bg replace jumbotron with card bg-light replace card-deck with row row-cols-1 row-cols-md-2…"
tags: ["ruby","rails","ruby-on-rails","markdown"]
license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL."
---

# Migrating from Bootstrap 4 to Bootstrap 5

Some main changes from my experience:

### 1. Quick find and replace

* replace `badge badge` with `badge bg`
* replace `jumbotron` with `card bg-light`
* replace `card-deck` with `row row-cols-1 row-cols-md-2 g-4` or `card-group`
* replace `form-group` with `mb-3`
* replace `font-weight` with `fw`

### 2. Replace all dropdowns with bootstrap 5 dropdown code, **including navbar**

### 3. Margins

`left` and `right` replaced with something like `start` and `end`.
Meaning, we would have `<ul class="navbar-nav me-auto">` and `<ul class="navbar-nav me-auto">` for navbar-end (right) and navbar-start (left)

### Surely, there's more but these are the basics to get it working :)