Reactstrap Utilities

Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code.

Bootstrap Classes

Bootstrap 4 Cheat Sheet is an online tool that helps you easily find the differences between Bootstrap 3 and Bootstrap 4. Beautiful and easy-to-use, this should be your go-to page if you are looking to upgrade your Bootstrap 3 project or start a new Bootstrap 4 project.

Visit page here: Bootstrap 4 Cheat Sheet

Bootstrap Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

I'm a flexbox container!

import React from "react";


function Example(){
  return (
    <>
      <div className="d-flex p-2">I'm a flexbox container!</div>
    </>
  );
}

export default Example;

I'm an inline flexbox container!

import React from "react";


function Example(){
  return (
    <>
      <div className="d-inline-flex p-2">I'm an inline flexbox container!</div>
    </>
  );
}

export default Example;

Responsive variations also exist for .d-flex and .d-inline-flex.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

Bootstrap Align Left

Flex item

import React from "react";


function Example(){
  return (
    <>
      <div className="d-flex justify-content-start mb-3">
        <div className="p-2">Flex item</div>
        <div className="p-2">Flex item</div>
        <div className="p-2">Flex item</div>
      </div>
    </>
  );
}

export default Example;

Bootstrap Align Center

Flex item

import React from "react";


function Example(){
  return (
    <>
      <div className="d-flex justify-content-center mb-3">
        <div className="p-2">Flex item</div>
        <div className="p-2">Flex item</div>
        <div className="p-2">Flex item</div>
      </div>
    </>
  );
}

export default Example;

Bootstrap Align Right

Flex item

import React from "react";


function Example(){
  return (
    <>
    <div className="d-flex justify-content-end mb-3">
      <div className="p-2">Flex item</div>
      <div className="p-2">Flex item</div>
      <div className="p-2">Flex item</div>
    </div>
    </>
  );
}

export default Example;

Bootstrap Text Alignment

Easily realign text to components with text alignment classes.

Bootstrap Text Left

Left aligned text.

import React from "react";


function Example(){
  return (
    <>
      <p className="text-left">Left aligned text.</p>
    </>
  );
}

export default Example;

Bootstrap Text Center

Center aligned text.

import React from "react";


function Example(){
  return (
    <>
      <p className="text-center">Center aligned text.</p>
    </>
  );
}

export default Example;

Bootstrap Text Right

Right aligned text.

import React from "react";


function Example(){
  return (
    <>
      <p className="text-right">Right aligned text.</p>
    </>
  );
}

export default Example;

Bootstrap Responsive Image

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

import React from "react";


function Example(){
  return (
    <>
      <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg" className="img-fluid" alt="Responsive image">
    </>
  );
}

export default Example;