Bootstrap with React (react-bootstrap) - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this React-Bootstrap Button render?

Consider this React component using react-bootstrap:

import Button from 'react-bootstrap/Button';

function MyButton() {
  return <Button variant="success" size="lg">Click Me</Button>;
}

What will you see in the browser?

Bootsrap

import Button from 'react-bootstrap/Button';

function MyButton() {
  return <Button variant="success" size="lg">Click Me</Button>;
}

A A large red button with text 'Click Me'

B A small blue button with text 'Click Me'

C A plain button with no styling

D A large green button with text 'Click Me'

💡 Hint

Look at the variant and size props used in the Button component.

The 'variant="success"' applies green color styling, and 'size="lg"' makes the button large.

❓ selector

intermediate

Which CSS class does react-bootstrap add for a primary Button?

When you use <Button variant="primary"> in react-bootstrap, which CSS class is added to the button element?

A btn btn-primary

B btn-primary-button

C primary-btn

D button-primary

💡 Hint

Bootstrap buttons always have a base 'btn' class plus a variant class.

React-bootstrap adds 'btn' as the base class and 'btn-primary' for the primary variant, matching Bootstrap's CSS.

🧠 Conceptual

advanced

Why use react-bootstrap instead of plain Bootstrap CSS in React?

Which of these is the main advantage of using react-bootstrap components over just adding Bootstrap CSS classes in React?

A React-bootstrap provides ready React components with built-in behavior and accessibility

B React-bootstrap automatically downloads Bootstrap CSS for you

C React-bootstrap replaces React with Bootstrap's JavaScript

D React-bootstrap removes the need for CSS files

💡 Hint

Think about how React components help with interactivity and accessibility.

React-bootstrap offers React components that handle Bootstrap styles plus JavaScript behavior and accessibility features, making development easier and more consistent.

❓ layout

advanced

How does react-bootstrap's Grid system help with responsive layouts?

Given this react-bootstrap code:

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

function Layout() {
  return (
    <Container>
      <Row>
        <Col xs={12} md={6}>Left</Col>
        <Col xs={12} md={6}>Right</Col>
      </Row>
    </Container>
  );
}

How will the columns behave on small and medium screens?

Bootsrap

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

function Layout() {
  return (
    <Container>
      <Row>
        <Col xs={12} md={6}>Left</Col>
        <Col xs={12} md={6}>Right</Col>
      </Row>
    </Container>
  );
}

A On small screens, columns are half width side by side; on medium, they stack full width

B On small screens, columns stack full width; on medium and larger, they split half width side by side

C Columns always stay side by side with equal width on all screen sizes

D Columns always stack full width on all screen sizes

💡 Hint

Look at the xs and md props on the Col components.

The xs={12} means full width on extra small screens, stacking vertically. The md={6} means half width on medium and larger screens, placing columns side by side.

❓ accessibility

expert

Which react-bootstrap component helps improve accessibility for screen readers in modals?

When using react-bootstrap's Modal component, which prop or feature is essential to ensure screen readers can identify the modal dialog properly?

A Using a custom CSS class to hide the modal from screen readers

B Adding a 'tabIndex' of -1 to the modal backdrop

C Setting the 'aria-labelledby' prop with the modal title's id

D Disabling keyboard navigation inside the modal

💡 Hint

Screen readers need a label to announce what the modal is about.

The 'aria-labelledby' attribute links the modal dialog to its title, so screen readers announce the modal's purpose clearly.

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