Listing out items in React/NextJS with bootstrap cards

In this article, we will learn how to list out items in React/NextJS using bootstrap cards. Bootstrap is a popular CSS framework that provides pre-styled components, such as cards, which can be easily used in your React/NextJS projects.

Before we begin, make sure you have a basic understanding of React and NextJS. If you are new to React, it is recommended to go through the official React documentation to get familiar with its concepts.

Step 1: Setting up a React/NextJS project

To get started, let's set up a new React/NextJS project. Open your terminal and run the following commands:


    npx create-next-app my-project

    cd my-project

    npm run dev

This will create a new NextJS project and start the development server. You can access the project by opening http://localhost:3000 in your browser.

Step 2: Installing Bootstrap

Next, we need to install Bootstrap in our project. In your terminal, navigate to the project directory and run the following command:


    npm install bootstrap

This will install Bootstrap and its dependencies in your project.

Step 3: Importing Bootstrap

Now that Bootstrap is installed, we need to import it into our project. Open the pages/_app.js file and add the following import statement at the top:


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

This will import the Bootstrap CSS file into our project, allowing us to use its pre-styled components.

Step 4: Creating a list of items

Let's create a simple list of items using bootstrap cards. Open the pages/index.js file and replace its contents with the following code:


    import React from 'react';

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


    
    const items = [

      { name: 'Item 1', description: 'This is item 1' },

      { name: 'Item 2', description: 'This is item 2' },

      { name: 'Item 3', description: 'This is item 3' },

    ];


    
    const IndexPage = () => {

      return (

        <div className="container">

          <h1>List of Items</h1>

          <div className="row">

            {items.map((item, index) => (

              <div className="col-md-4" key={index}>

                <div className="card">

                  <div className="card-body">

                    <h5 className="card-title">{item.name}</h5>

                    <p className="card-text">{item.description}</p>

                  </div>

                </div>

              </div>

            ))}

          </div>

        </div>

      );

    };


    
    export default IndexPage;

This code defines an array of items and renders them as bootstrap cards. Each card represents an item with a name and description. The map function is used to iterate over the items array and generate the cards dynamically.

Step 5: Testing the application

Save the file and go to your browser. If you have the development server running, you should see a list of items displayed as bootstrap cards.

Conclusion

In this article, we learned how to list out items in React/NextJS using bootstrap cards. We set up a new React/NextJS project, installed Bootstrap, imported it into our project, and created a simple list of items using bootstrap cards. By following these steps, you can easily display a list of items with pre-styled cards in your React/NextJS applications.

References

Resource	Link
React Documentation	https://reactjs.org/
NextJS Documentation	https://nextjs.org/docs
Bootstrap Documentation	https://getbootstrap.com/docs

Listing out items in React/NextJS with bootstrap cards