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
- Initializing our project
- Installing react-bootstrap
- Setting up our folder structure / files
- 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
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://email@example.com/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 firstname.lastname@example.org
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:
Awesome, we now have our initial project structure set up with all of the necessary files!
For the sake of making this article short, I will include the code explanations as comments posted in the gists below
In this section, we will finish up our App.js and GridSystem.js files.
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.