§  Installing Bootstrap 5

You can install on your React project with npm install bootstrap@5.

I normally recommend using the customization feature, so I would have a SCSS folder where you include a file called bootstrap-custom.scss and include the features you want (this is important, as sometimes the entire Boostrap library can be included on every page.) As always, import the Bootstrap file to your main component.

@import 'styles/dominant/bootstrap-custom.scss';

§  BreakPoints

The most useful feature is its breakpoint functions. While creating responsive designs, your CSS files could be littered with breakpoint code like @media only screen and (min-width: 768px) and (max-width: 959px). Unfortunately, if you have several developers, you could find each developer using different breakpoints, which makes debugging CSS a lot harder for your testers.

Bootstrap immediately gives you six default breakpoints. The good news is you can customize them with the source Sass files like so:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

The next time you want to separate out CSS responsively, just use Bootstraps @include functions throughout the entire project.

.homemade-container-sm {
  padding: 0 12px;
  @include media-breakpoint-up(sm) {
    max-width: 540px;
  }
  @include media-breakpoint-up(md) {
    max-width: 720px;
  }
  @include media-breakpoint-up(lg) {
    max-width: 960px;
  }
  @include media-breakpoint-up(xl) {
    max-width: 1140px;
  }
  @include media-breakpoint-up(xxl) {
    max-width: 1320px;
  }
}

§  Creating Easy Flexboxes

Wireframing in Figma or Sketch is great, but what if you can create the skeleton in real HTML and throw real functionality in later?

<div className="mt-5">
  <div className="border border-5 d-flex w-75 justify-content-center">
    <div className="m-2" style={blueBox}></div>
  </div>
</div>

So with the sample code here, I used border and border-5 to construct a quick border box and w-75 to extend it to 75% of its parent container and d-flex and justify-content-center to center whatever content vertically.

§  Built-in Colors

This is something easy, but I can't tell you how relieving it is to know these are automatically in my CSS arsenel. The ability to just throw around $gray-800 or $blue is quite nice. It also reminds you to standardize your functional color-coding.

$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;

// greys
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

// functional-color-coding
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;

§  Bootstrap Utilities

Bootstrap's utilities also lets you creat multiple classes based on a give property, such as opacity. So the code below will create multiple classes opacity-0 and opacity-25 and so forth.

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );