Bootstrap with React (react-bootstrap) - Mini Project: Build & Apply

Create a Responsive Card List with React-Bootstrap

📖 Scenario: You are building a simple React app that shows a list of products as cards. Each card will have a title and a description. You will use React-Bootstrap components to style the cards and make them responsive.

🎯 Goal: Build a React component that displays a list of product cards using React-Bootstrap's Card and Container components. The cards should be arranged nicely and adapt to different screen sizes.

📋 What You'll Learn

Use React functional components

Use React-Bootstrap components: Container, Card, and Row

Create a list of products as data

Map over the product list to create cards

Make the layout responsive

💡 Why This Matters

🌍 Real World

React-Bootstrap is widely used to quickly build responsive and accessible UI components in React apps without writing custom CSS.

💼 Career

Knowing how to use React-Bootstrap helps you build professional React interfaces faster, a valuable skill for frontend developer roles.

1

Set up the product data array

Create a constant array called products with these exact objects: { id: 1, title: 'Coffee Mug', description: 'A mug for coffee lovers' }, { id: 2, title: 'Notebook', description: 'A ruled notebook for notes' }, and { id: 3, title: 'Pen', description: 'A smooth writing pen' }.

Bootsrap

// Create the products array with 3 objects
// Your code here

Hint

Remember to use const and create an array with three objects exactly as shown.

2

Import React-Bootstrap components

Add an import statement to import Container, Row, and Card from 'react-bootstrap' at the top of your file.

Bootsrap

const products = [
  { id: 1, title: 'Coffee Mug', description: 'A mug for coffee lovers' },
  { id: 2, title: 'Notebook', description: 'A ruled notebook for notes' },
  { id: 3, title: 'Pen', description: 'A smooth writing pen' }
];

// Import Container, Row, Card from react-bootstrap
// Your code here

Hint

Use a single import statement with curly braces to import all three components.

3

Create the ProductList component with cards

Create a React functional component called ProductList. Inside it, return a Container with a Row. Use products.map with product as the iterator to create a Card for each product. Each card should have a Card.Body with Card.Title showing product.title and Card.Text showing product.description. Add key={product.id} to each Card.

Bootsrap

import { Container, Row, Card } from 'react-bootstrap';

const products = [
  { id: 1, title: 'Coffee Mug', description: 'A mug for coffee lovers' },
  { id: 2, title: 'Notebook', description: 'A ruled notebook for notes' },
  { id: 3, title: 'Pen', description: 'A smooth writing pen' }
];

// Create ProductList component that maps products to Cards
// Your code here

Hint

Use products.map(product => ( ... )) inside the Row to create cards. Remember to add key={product.id} to each card.

4

Export the ProductList component

Add an export statement to export the ProductList component as the default export.

Bootsrap

import { Container, Row, Card } from 'react-bootstrap';

const products = [
  { id: 1, title: 'Coffee Mug', description: 'A mug for coffee lovers' },
  { id: 2, title: 'Notebook', description: 'A ruled notebook for notes' },
  { id: 3, title: 'Pen', description: 'A smooth writing pen' }
];

function ProductList() {
  return (
    
      
        {products.map(product => (
          
            
              {product.title}
              {product.description}
            
          
        ))}
      
    
  );
}

// Export ProductList as default
// Your code here

Hint

Use export default ProductList; to make the component available for import.

Practice

1. What is the main purpose of using react-bootstrap in a React project?

easy

A. To use Bootstrap styles as React components for easier UI building

B. To replace React with Bootstrap framework

C. To write CSS styles manually without any components

D. To convert React code into plain HTML automatically

Solution

1. Step 1: Understand what react-bootstrap provides

   React-Bootstrap offers Bootstrap styles wrapped as React components, making UI building easier.

2. Step 2: Compare options with this understanding

   Only To use Bootstrap styles as React components for easier UI building correctly describes this purpose; others are incorrect or unrelated.

3. Final Answer:

   To use Bootstrap styles as React components for easier UI building -> Option A

4. Quick Check:

   React-Bootstrap = Bootstrap components in React [OK]

Hint: React-Bootstrap = Bootstrap + React components [OK]

Common Mistakes:

• Thinking react-bootstrap replaces React
• Assuming it removes the need for CSS
• Confusing it with plain Bootstrap usage

2. Which is the correct way to import the Button component from react-bootstrap?

easy

A. import Button from 'react-bootstrap/Button';

B. import Button from 'react-bootstrap-button';

C. import { Button } from 'react-bootstrap';

D. import { Button } from 'bootstrap-react';

Solution

1. Step 1: Recall react-bootstrap import syntax

   React-Bootstrap components are imported using named imports from 'react-bootstrap'.

2. Step 2: Check each option

   import { Button } from 'react-bootstrap'; uses correct named import syntax. import Button from 'react-bootstrap/Button'; is incorrect because react-bootstrap does not export components from separate paths. Options B and C use wrong package names.

3. Final Answer:

   import { Button } from 'react-bootstrap'; -> Option C

4. Quick Check:

   Named import from 'react-bootstrap' = correct [OK]

Hint: Use named imports from 'react-bootstrap' package [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong package names
• Trying to import from sub-paths

3. What will be rendered by this React-Bootstrap code?

import React from 'react';
import { Button } from 'react-bootstrap';

export default function App() {
  return <Button variant="success">Save</Button>;
}

medium

A. A button with no color labeled 'Save'

B. A blue button labeled 'Save'

C. A red button labeled 'Save'

D. A green button labeled 'Save'

Solution

1. Step 1: Understand the Button variant prop

   The variant="success" in react-bootstrap Button applies Bootstrap's green success style.

2. Step 2: Determine the button appearance

   The button will appear green with the label 'Save' as text inside.

3. Final Answer:

   A green button labeled 'Save' -> Option D

4. Quick Check:

   variant="success" = green button [OK]

Hint: variant="success" means green button in Bootstrap [OK]

Common Mistakes:

• Confusing variant colors
• Expecting default blue color with variant="success"
• Ignoring the variant prop effect

4. Identify the error in this React-Bootstrap code snippet:

import React from 'react';
import { Button } from 'react-bootstrap';

function MyButton() {
  return <Button variant="primary">Click Me</Button>
}

export default MyButton;

medium

A. Component name should start with lowercase letter

B. No error; code is correct

C. Missing parentheses around JSX in return

D. Missing semicolon after return statement

Solution

1. Step 1: Check JSX return syntax

   JSX can be returned without parentheses if it is a single expression on the same line.

2. Step 2: Validate component naming and imports

   Component name starts with uppercase 'MyButton' which is correct. Import and usage of Button is correct.

3. Final Answer:

   No error; code is correct -> Option B

4. Quick Check:

   JSX return without parentheses is valid [OK]

Hint: JSX can return single element without parentheses [OK]

Common Mistakes:

• Thinking semicolon is mandatory after return
• Assuming lowercase component names are valid
• Expecting parentheses always around JSX

5. You want to create a responsive navigation bar using React-Bootstrap that collapses on small screens. Which components should you combine to achieve this?

hard

A. Navbar, Nav, and Container components with collapseOnSelect prop

B. Button and Form components only

C. Card and Alert components with responsive prop

D. Table and Modal components with collapse prop

Solution

1. Step 1: Identify components for responsive navbar

   React-Bootstrap uses Navbar for the main bar, Nav for links, and Container for layout. The collapseOnSelect prop helps with collapsing behavior.

2. Step 2: Eliminate unrelated components

   Button, Form, Card, Alert, Table, Modal do not create responsive navbars or handle collapsing.

3. Final Answer:

   Navbar, Nav, and Container components with collapseOnSelect prop -> Option A

4. Quick Check:

   Navbar + Nav + Container = responsive navbar [OK]

Hint: Use Navbar + Nav + Container for responsive navbars [OK]

Common Mistakes:

• Using unrelated components for navbar
• Forgetting to include Nav inside Navbar
• Not using collapseOnSelect or responsive props