Bootstrap

Bootstrap gives you a **grid + ready-made components**. It is great for admin panels, internal tools, and fast prototypes.

Install

npm i bootstrap

Import once (example):

// src/app/layout.tsx or global entry
import "bootstrap/dist/css/bootstrap.min.css";

Grid example

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6">...</div>
    <div class="col-12 col-md-6">...</div>
  </div>
</div>

Preview: card (click to reveal code)

Customize safely (override layer)

/* Put your overrides after Bootstrap import */
:root {
  --bs-primary: #2563eb;
  --bs-body-bg: #0b1220;
  --bs-body-color: rgba(255,255,255,.92);
}

.btn-primary {
  border-radius: 0.75rem;
}

Best practices

• Don’t fight Bootstrap: use its spacing utilities + grid first.
• Override via variables and a small custom CSS file (avoid massive overrides).
• Keep component markup consistent for maintainability.