Dynamic Responsive Grid System Using React and Bootstrap

Working with data is great, but it’s not very useful if we can’t display it properly. In this tutorial, we will be making a simple and customizable component that takes an array of objects, and renders a responsive grid layout. I remember the frustration I felt when I wanted to achieve something like this, but don’t worry. By the end of this article, all your frustration will turn into joy.

Video Tutorial: YouTube channel.

With a column count of 2, the final result will look something like this:

Steps We Will Go Through

1. Initializing our project
2. Installing react-bootstrap
3. Setting up our folder structure / files
4. Wrapping up

Initializing Our Project

To initialize our project, we will open up our command prompt to create a new react application. If you don’t already have create-react-app, you first have to install node and then run the following command:

npx create-react-app responsive-react-grid

Installing react-bootstrap

After you’ve created the new react application, we will navigate to our folder by running the following command:

cd responsive-react-grid/ && code .

If you are not using vscode as your default IDE, just run the command without && code .

We will now install react-bootstrap and use bootstraps CDN to include all of the necessary css files. Navigate to /public/index.html and put the following code inside the head section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />

Now install react-bootstrap by running the following command:

npm install react-bootstrap bootstrap@4.6.0

You can check your dependencies inside the package.json file to make sure it installed correctly.

Setting Up Our Folder Structure / Files

Before we create our component, we will remove some boilerplate code and set up our folder structure for our project. First, create a new directory /src/css and move App.css inside it. Second, create a new directory /src/components and create a new functional component called GridSystem.js inside it. Lastly, remove the unnecessary boilerplate code inside App.css and App.js. After doing all this, your files should look like this:

App.js

GridSystem.js

App.css

Awesome, we now have our initial project structure set up with all of the necessary files!

picture by memegenerator

For the sake of making this article short, I will include the code explanations as comments posted in the gists below

Wrapping Up!

In this section, we will finish up our App.js and GridSystem.js files.

App.js

The final result for App.js

The final result for GridSystem.js

Important Takeaways

That's it! You now have a responsive grid system to use whenever you want to render a collection of objects. The array inside our grid system doesn’t necessarily need to consist of objects, this would work with plain numbers or primitive data types as well. Lastly, in this example I've only included one bootstrap breakpoint; however, you may include more if you desire. Just pass them as props to our component. You can read more about bootstrap breakpoints here.

Thank you for reading my article and I hope this has helped you! If you have any questions, feel free to send me a message in my YouTube channel.