React · Theory

Bootstrap in React

Theory

30/94

Bootstrap in React

Bootstrap in React: import bootstrap CSS once, use class names (container, btn btn-primary), or use react-bootstrap components. Still className. Don’t run Bootstrap’s jQuery JS next to React — two DOM owners.

Bootstrap in React — on screen — Bootstrap-styled Join. Import bootstrap CSS once in main.

Exam tip

CSS classes. No jQuery plugins.

Example

// Bootstrap classes
export default function Hero() {
  return (
    <div className="container">
      <button className="btn btn-primary">Join</button>
    </div>
  );
}

Bootstrap in React — on screen: Bootstrap-styled Join. Import bootstrap CSS once in main.

Short notes

Import CSS once.
className or react-bootstrap.
TrapjQuery Bootstrap plugins.

React · Theory

Bootstrap in React

← All stacks

Theory

30/94

Bootstrap in React

Bootstrap in React — on screen — Bootstrap-styled Join. Import bootstrap CSS once in main.

Exam tip

CSS classes. No jQuery plugins.

Example

// Bootstrap classes
export default function Hero() {
  return (
    <div className="container">
      <button className="btn btn-primary">Join</button>
    </div>
  );
}

Bootstrap in React — on screen: Bootstrap-styled Join. Import bootstrap CSS once in main.

Short notes

Import CSS once.
className or react-bootstrap.
TrapjQuery Bootstrap plugins.

Bootstrap in React

Example

Short notes

Questions

Bootstrap in React

Example

Short notes

Questions