Create React Card UI With Bootstrap


In this tutorial, we will create a react card UI with bootstrap. Till now we have been learned the basic of react. we know how to create a react project from scratch. Now let’s understand how to create react card UI with bootstrap. I am using bootstrap for glorifying the element. We also create a zoom effect on the card image for better user interaction. So let’s head on to the tutorial.

react card UI

In this image, you can see we had three cards with shadow. We added gradient color to the card background so it looks better than the solid background color.

So first to create react card UI project install node.js in your local system. Ones you’ve done that open your favorite editor. I am using VS Code editor to create this project and open the terminal. Just go to View > and select Integrated terminal.

Check the version of node.

Type a command to create react app.

if you have a later node 5.8 or later version you can use the above command. Otherwise, you need to follow the following command to create react application.

to create react app just say

Now, here you can see react-cads is the name of the application and to create the boilerplate of react we use the create-react-app command.

These commands will create a new react application now just change to the working directory.

To execute the application just say.

Your application development server started on localhost:3000. Now let’s create a new component and create react card UI.

To glorify the react component I am using bootstrap. So we need to first install bootstrap in the node package. So just follow the command and install bootstrap in the application.

CardUI.jsx

Now let’s create a new file in the /src directory of the application. You can maintain the files by creating a folder in the /src directory that upon you. Create a file CardUI.jsx in the /src and put this code inside this file.

In this above code, we created a card UI using a functional component. To create a UI we had used functional component. In this code, you can see we had created a couple of properties. So we call the component we will initialize title and images with different properties.

So it is beneficial to change and specify any value to the card UI property and change it any time.

Now ones you have done that we will create a new file and align these cards in a row.

Cards.jsx

Now let’s create a new file Cards.jsx and align use this react card UI component in cards.jsx file and align the card in the row.

In the above code, we just use the react card UI component and align it to the center of the document. We had used bootstrap classes to align them. You can also notice I initialize the properties with text which would display on the card UI.

Now the time is to specify some style to this component.

Make sure all the files should have been created in the same folder. because using the import statement we used that path to link that file. If you place them in a different folder then make sure change the import statement and specify the absolute module path.

style-card.css

To style the component we are using this file. we already link this file to CardUI.jsx file using the import statement.

Now at the last, Just render the cards.jsx component in the ReactDOM reader method. Now let’s render this component in the index.js file.

Index.js

In this file, we will import two files. First is bootstrap and second is the card. Using the absolute path we linked bootstrap.min.css file. Just after that, we imported card.jsx file and render it in the ReactDOM reader method.

Your index.js file would look like this.

We already started the react app so just open the localhost:3000 port. So you can see your react card UI is created. It’s very simple. To change the text of the card just change the property value specified in the cards.jsx file.

So that’s if you have any question ask me any time. I will see you in the next react tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *