The Style

1. Global CSS

One CSS file. Every component uses it.

🧑‍💻 Example

App.css:

.card {
  padding: 20px;
  background: whitesmoke;
}

import "./App.css";

function App() {
  return (
    <div className="card">
      <h1>Bashi Academy</h1>
    </div>
  );
}

Two things to remember: use className (not class), and these styles apply to the entire app, not just the file that imports them.

📌 Summary

2. CSS Modules

Global CSS has a problem. Two components both use .title:

import "./Hero.css";    // .title { color: blue }

function Hero() {
  return <h1 className="title">Welcome</h1>;
}

import "./Sidebar.css"; // .title { color: red }

function Sidebar() {
  return <h3 className="title">Menu</h3>;
}

Whichever file loads last wins. Your Hero turns red. You didn't change anything. The styles just broke. This is called a class name collision.

🛠 The Fix

Rename .css to .module.css. Import it as an object.

Hero.module.css:

.title {
  color: blue;
}

import styles from "./Hero.module.css";

function Hero() {
  return <h1 className={styles.title}>Welcome</h1>;
}

React turns .title into .Hero_title_x7d2f. Unique. No collision. Both components keep .title in their own file. Zero conflict.

Rules:

1. File must end with .module.css
2. Import as object: import styles from "./Hero.module.css"
3. Apply with: className={styles.title}

📌 Summary

3. Inline Styles

No CSS file. You write the style directly on the element as a JavaScript object.

🧑‍💻 Example

<h1 style={{ color: "navy" }}>Hello</h1>

Why double curly braces? The outer {} is a JSX expression. The inner {} is a JavaScript object. CSS property names use camelCase: fontSize not font-size.

The real reason inline styles exist: dynamic styling based on state.

function StatusBadge() {
  const [isOnline, setIsOnline] = useState(false);

  return (
    <button
      style={{ color: isOnline ? "green" : "red" }}
      onClick={() => setIsOnline(!isOnline)}
    >
      {isOnline ? "Online" : "Offline"}
    </button>
  );
}

The color changes when the state changes. No CSS file can do that.

Limitations: no hover, no media queries. Use it for quick dynamic styles, not full layouts.

When to use what

📌 Summary

4. Component Libraries

You just spent 3 lessons writing CSS by hand. What if someone already built 200+ styled components for you? Buttons, cards, navbars, forms. Tested, responsive, accessible. You just add a CSS class.

We use Bootstrap. No new components. No new syntax. Just className.

🧑‍💻 Setup

Install:

npm i bootstrap@5.3.8

Remove the default index.css file. Then open main.jsx and replace:

import "./index.css";

with:

import "bootstrap/dist/css/bootstrap.css";

Test it works:

<div className="alert alert-success" role="alert">
  YES! Bootstrap installed!
</div>

Green box? You're in.

📌 Summary

5. The Docs

You don't memorize Bootstrap. You shop. Open the docs, find the component, copy the code, change class to className, paste into React.

🧑‍💻 Components You'll Use

The Process

Every component follows this flow:

1. Open Bootstrap docs
2. Find the component
3. Copy the HTML
4. Change class to className
5. Paste into your React component

<div className="alert alert-success">
  Order confirmed!
</div>

<div className="card" style={{ width: "18rem" }}>
  <div className="card-body">
    <h5 className="card-title">Suqaar</h5>
    <p className="card-text">Spiced meat with vegetables.</p>
    <button className="btn btn-primary">Order</button>
  </div>
</div>

📌 Summary

6. The Pattern

Every Bootstrap class follows the same naming formula. Learn the formula, learn all of Bootstrap.

🧑‍💻 Spacing

{property}{side}-{size}

<div className="m-3">Margin all sides</div>
<div className="mt-2">Margin top</div>
<div className="px-4">Padding left + right</div>
<div className="p-5">Padding all sides</div>

Property:

Side:

Size: 0, 1, 2, 3, 4, 5, auto

1 = small, 3 = medium, 5 = large.

🧑‍💻 Colors

Same color names work everywhere: buttons, text, backgrounds.

<button className="btn btn-primary">Save</button>
<button className="btn btn-danger">Delete</button>
<p className="text-success">Order confirmed</p>
<div className="bg-warning p-3">Warning message</div>

Works with: btn-, text-, bg-, alert-, badge bg-

🧑‍💻 Sizes

<button className="btn btn-sm btn-primary">Small</button>
<button className="btn btn-primary">Default</button>
<button className="btn btn-lg btn-primary">Large</button>

🧑‍💻 Utilities

📌 Cheatsheet

7. The Layout

How to arrange things on screen. Two tools: Flex for quick rows, Grid for page structure.

🧑‍💻 Flex

Turn any <div> into a flex container with d-flex.

<div className="d-flex justify-content-between align-items-center">
  <h1>Mangio Express</h1>
  <button className="btn btn-primary">Sign Up</button>
</div>

Horizontal (justify):

Vertical (align):

Gap:

<div className="d-flex gap-3">
  <button className="btn btn-primary">Save</button>
  <button className="btn btn-secondary">Cancel</button>
</div>

🧑‍💻 Grid

12 columns. You pick how many each section takes. Always this order: container → row → col.

<div className="container">
  <div className="row">
    <div className="col-6">Left half</div>
    <div className="col-6">Right half</div>
  </div>
</div>

Common layouts:

🧑‍💻 Responsive

Add a breakpoint to make it stack on small screens.

<div className="container">
  <div className="row">
    <div className="col-sm-6">Stacks on mobile</div>
    <div className="col-sm-6">Side by side on tablet+</div>
  </div>
</div>

📌 Cheatsheet