What to Do if Your React and Bootstrap Columns Aren't Working Together

Using native Bootstrap in a React project can often cause errors due to an incorrect initial setup. In this guide, you'll learn how to correctly set up React with Bootstrap so that Bootstrap columns work correctly together.

Nov 10, 2020 • 3 Minute Read

Subscribe to the newsletter

Introduction

Using native Bootstrap in a React project can often cause errors due to an incorrect initial setup. In order to make Bootstrap columns work together, you need to make sure that you have correctly imported and required the CSS file containing styles for row and col classes. Otherwise, your Bootstrap rows and columns will act like regular <div> without the required styles to support their intended structure. In this guide, you'll learn how to correctly set up React with Bootstrap so that Bootstrap columns work correctly together.

Implementation

Create a new React project using the following command:

      npx create-react-app react-bootstrap-columns

Inside the root folder, install Bootstrap via npm using the following command:

      npm i bootstrap

Next, modify the App.js as shown below.

      import './App.css';

function App() {
  return (
    <div className="App">
      <div className="row">
        <div className="col">
          <div className="box">Col 1/3</div>
        </div>
        <div className="col">
          <div className="box">Col 2/3</div>
        </div>
        <div className="col">
          <div className="box">Col 3/3</div>
        </div>
      </div>
    </div>
  );
}

export default App;
    

The App component simply outputs three nested <div> containing display text inside a parent <div>. The parent <div> is a Bootstrap row, aligning all child elements in a row. Since the three children <div> have the col class and are direct children of the row, each is expected to occupy a third of the width of the entire row next to each other as equally spaced columns. Add some simple styles inside App.css as shown below.

      .App{
  max-width: 100vw;
  overflow-x: hidden;
}
.box{
  margin: 10px;
  padding: 20px;
  border: 2px solid salmon;
  text-align: center;
  color: salmon;
}
    

In contrary to the expected outcome, the three bordered boxes appear as regular <div> spanning over an entire row stacked on top of each other instead of being aligned as columns. This is because the default Bootstrap styles for row and col classes are not applied even though Bootstrap is installed in your project. The App component simply loads the JSX without any declared styles for the classes used. These styles are present inside a CSS file inside the node_modules folder where the entire Bootstrap library is installed. Import this file on the top of your App component as shown below.

      import 'bootstrap/dist/css/bootstrap.min.css';

Now the entire styles come back, with the three columns stacked next to each other in a single row. The font-family of the text inside the box also changes. This is because it inherited some styles from Bootstrap's CSS file.

Conclusion

It's important to understand how different UI libraries let you import the required stylesheet for their components. Working with Bootstrap by either downloading the files or using CDNs may not produce the error because the styles are shipped to your components via the <script> or <link> tags. But when using it via npm, you need to import the stylesheet as a module inside every component where you intend to use its native classes. The same pattern can be extended to libraries such as React Bootstrap, Reactstrap, etc.