In this post, we’ll look at how to get started with Bootstrap 5 and how we can use the new version in a React project.

A few weeks ago the Bootstrap team released the alpha version of Bootstrap 5. A major version that comes with amazing announcements like:

1. Dropped support for jQuery
2. Dropped support for internet explorer
3. Improved documentation
4. Support for custom CSS properties
5. Expanded color palette
6. Custom icons
7. Customizable utilities API
8. and more …

While you might be excited to jump on it, it is worth noting that this release is not stable yet and as such is not recommended to use in production.

In this post, I intend to share my understanding of what is new, and how to quickly get started with it. We’ll take things a step further and look at how we can use the new version in a React project.

Getting started with Bootstrap 5

To get started, first install Bootstrap into your React project. At this point, you should have set up a React project to work with. If you need instructions on how to do that, check out how to create a React app here.

Installing Bootstrap

Here are a few ways to do this, you can:

• Download the source files and run it locally,
• Download the minified CSS and JS files and drop them directly into your project
• Use the CDN (this approach is not very customizable)
• Use package managers (it is published as a pre-release to npm, yarn, RubyGems, etc.)

If you use a package manager, you will be required to set up a workflow to compile Sass. In this tutorial, we’ll use Yarn. In your React project’s root directory, run the following command:

yarn add install bootstrap@5.0.0-alpha1

This will install Bootstrap 5 and the icons package in your React project. If you check your project’s package.json file, you should have this new package added in the dependencies object:

"dependencies": {
  //...
  "bootstrap": "5.0.0-alpha1",
  //...
},

#bootstrap #react #javascript #css #web-development