DEV Community: Sakshi

Bootstrap 5.3 Features Every Developer Should Know — What Actually Changed

Sakshi — Sat, 01 Aug 2026 18:00:00 +0000

I've been building with Bootstrap since version 3. Watched it go from a 12-column float-based grid to a proper CSS Grid-capable framework. Bootstrap 5.3 shipped in May 2023 and the changes are more significant than most developers realize — especially if you're still building with 5.0 or 5.1 patterns.

This isn't a summary of the changelog. Here's what actually changed and why it matters in a production codebase.

Native Color Mode Support — The Biggest Change

Bootstrap 5.3 added native support for color modes via the data-bs-theme attribute. This is the change with the largest practical impact and the one most teams haven't adopted yet.

Before 5.3 — dark mode in Bootstrap required either duplicate CSS for every component or class-based overrides. Both created maintenance debt that grew with every component you added.

Bootstrap 5.3 — set data-bs-theme="dark" on any element and every Bootstrap component inside responds automatically. Cards, modals, dropdowns, tables, forms, badges, alerts, navbars — all switch without a line of custom CSS.

<!-- Light mode — default -->
<html lang="en">

<!-- Dark mode — entire page -->
<html lang="en" data-bs-theme="dark">

<!-- Dark mode — scoped to one component -->
<div class="card" data-bs-theme="dark">
  <div class="card-body">
    This card is dark even if the page is light.
  </div>
</div>

The scoped application is the underused feature. A dark sidebar inside a light page. A dark code block inside a light article. No custom CSS — just the attribute.

Toggle with one line of JavaScript:

document.documentElement.setAttribute(
  'data-bs-theme',
  document.documentElement.getAttribute('data-bs-theme') === 'dark'
    ? 'light'
    : 'dark'
)

Every Bootstrap component switches. For custom components — use CSS custom properties:

:root {
  --app-sidebar-bg: #f8f9fa;
  --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] {
  --app-sidebar-bg: #161b2e;
  --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar {
  background: var(--app-sidebar-bg); // switches automatically
}

No duplicate CSS. No class juggling. One attribute change handles everything.

CSS Variables for Component-Level Customization

Bootstrap 5.3 exposed CSS custom properties for individual component customization. Before this — overriding a button's hover color required either a specificity battle or modifying SCSS source.

Now each component exposes its own custom properties:

/* Override button colors without touching SCSS */
.btn-primary {
  --bs-btn-bg: #fd4766;
  --bs-btn-border-color: #fd4766;
  --bs-btn-hover-bg: #e63d5a;
  --bs-btn-hover-border-color: #e63d5a;
  --bs-btn-active-bg: #cc3650;
  --bs-btn-focus-shadow-rgb: 253, 71, 102;
}

The practical benefit — customize a component's appearance in one place without fighting CSS specificity or modifying Bootstrap source. Works even without a SCSS build pipeline.

Updated Color System

Bootstrap 5.3 expanded the color system significantly.

Subtle background utilities — bg-primary-subtle, bg-success-subtle etc. Soft tinted backgrounds appropriate for cards, badges, and alert panels:

<div class="bg-primary-subtle text-primary rounded-3 p-3">
  Soft primary background — adapts in dark mode automatically
</div>

<div class="bg-success-subtle text-success rounded-3 p-3">
  Soft success background
</div>

In dark mode these subtle colors automatically adjust to appropriate dark tints. No custom CSS needed for either mode.

Emphasis text utilities — text-primary-emphasis, text-success-emphasis etc. High-contrast versions of semantic colors for both light and dark modes.

Border color utilities — border-primary-subtle, border-success-subtle etc. Consistent with the subtle background system.

A stat card that previously needed custom SCSS for its tinted background now uses bg-primary-subtle. One utility class. Both modes handled.

New Utility Classes

Bootstrap 5.3 added utility classes that cover patterns developers were writing custom CSS for.

object-fit utilities:

<img src="photo.jpg" class="object-fit-cover w-100" style="height: 200px;">
<img src="photo.jpg" class="object-fit-contain w-100" style="height: 200px;">

Responsive variants: object-fit-md-cover, object-fit-lg-contain. Eliminates custom CSS just for image fitting behavior.

Directional overflow utilities:

<div class="overflow-x-auto">Horizontal scroll only</div>
<div class="overflow-y-auto">Vertical scroll only</div>
<div class="overflow-x-hidden">Hide horizontal overflow</div>

Useful for data tables and code blocks that overflow in one direction only.

z-index utilities:

<div class="z-0">z-index: 0</div>
<div class="z-1">z-index: 1</div>
<div class="z-2">z-index: 2</div>
<div class="z-3">z-index: 3</div>
<div class="z-n1">z-index: -1</div>

Finally. Z-index management in utility classes instead of scattered style="z-index: 999" throughout templates.

Gap utilities expanded:

<!-- Responsive gap -->
<div class="d-flex gap-2 gap-md-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Directional gap -->
<div class="row row-gap-3 column-gap-4">...</div>

Updated Form Controls

Floating labels work reliably now — earlier Bootstrap 5.x versions had edge cases with autofill:

<div class="form-floating mb-3">
  <input type="email"
         class="form-control"
         id="emailInput"
         placeholder="name@example.com">
  <label for="emailInput">Email address</label>
</div>

<!-- Floating labels now work correctly with select elements -->
<div class="form-floating mb-3">
  <select class="form-select" id="roleSelect">
    <option value="">Select role</option>
    <option value="admin">Admin</option>
    <option value="editor">Editor</option>
  </select>
  <label for="roleSelect">Role</label>
</div>

Color input styling:

<input type="color"
       class="form-control form-control-color"
       value="#fd4766"
       title="Choose theme color">

Color inputs now render consistently styled across browsers.

Navbar Updates

Bootstrap 5.3 simplified navbar theming. The old navbar-light and navbar-dark classes are deprecated:

<!-- Old approach — deprecated in 5.3 -->
<nav class="navbar navbar-light bg-light">...</nav>
<nav class="navbar navbar-dark bg-dark">...</nav>

<!-- New approach — 5.3 -->
<nav class="navbar bg-body-tertiary">...</nav>

<!-- Dark navbar — respects color mode -->
<nav class="navbar" data-bs-theme="dark">...</nav>

bg-body-tertiary adapts to the current color mode automatically — light gray in light mode, dark gray in dark mode. No separate dark variant needed.

CSS Grid Support

Bootstrap 5.3 added experimental CSS Grid support alongside the existing flexbox grid:

$enable-grid-classes: true;
$enable-cssgrid: true;

<div class="grid">
  <div class="g-col-6">Half width</div>
  <div class="g-col-6">Half width</div>
  <div class="g-col-4">One third</div>
  <div class="g-col-4">One third</div>
  <div class="g-col-4">One third</div>
</div>

Responsive variants work the same way:

<div class="grid">
  <div class="g-col-12 g-col-md-6 g-col-lg-4">
    Full on mobile, half on tablet, third on desktop
  </div>
</div>

The flexbox grid remains the default — CSS Grid is opt-in. But for complex layouts it's more efficient and supports subgrid in modern browsers.

JavaScript API Updates

All components now support a consistent getInstance / getOrCreateInstance pattern:

// Get existing instance — returns null if not initialized
const modal = bootstrap.Modal.getInstance('#myModal')

// Get instance or create new one — never returns null
const modal = bootstrap.Modal.getOrCreateInstance('#myModal')

// Dispose a component cleanly
modal.dispose()

Events are consistent across all animated components:

const myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', event => {
  // fires immediately when show() is called
})

myModal.addEventListener('shown.bs.modal', event => {
  // fires when modal is fully visible — CSS transition complete
})

myModal.addEventListener('hide.bs.modal', event => {
  // fires immediately when hide() is called
  // prevent with event.preventDefault()
})

myModal.addEventListener('hidden.bs.modal', event => {
  // fires when modal is fully hidden
})

The show.* / shown.* and hide.* / hidden.* pairs exist for all animated components — modals, offcanvas, dropdowns, collapses, tooltips, popovers.

Upgrading From Earlier 5.x

5.3 is a minor version bump from 5.0, 5.1, or 5.2. No breaking changes. The new features are additive.

What's worth updating after the upgrade:

Replace navbar-light and navbar-dark with data-bs-theme on navbars. Add dark mode support using data-bs-theme on the root element. Replace custom CSS for object-fit and directional overflow with the new utility classes. Update custom component colors to use CSS custom properties under [data-bs-theme="dark"] instead of class-based dark mode overrides.

None of these are required — the deprecated approaches still work. But cleaning them up reduces future maintenance.

Starting New Projects

Start new Bootstrap projects with 5.3. The color mode system, expanded utility classes, and CSS custom properties for component customization make it meaningfully better than earlier 5.x versions.

Patterns worth adopting from day one:

data-bs-theme for dark mode — not class-based. CSS custom properties under [data-bs-theme="dark"] for custom components. bg-primary-subtle for tinted backgrounds. object-fit-cover for image containers. overflow-x-auto for data tables.

Browse Bootstrap 5.3 templates built with these patterns at LettStart Design — color modes implemented correctly, CSS custom properties throughout, Lighthouse above 80. Use FIRST30 for 30% off.

Responsive Design With Bootstrap 5: Tips That Actually Make a Difference

Sakshi — Fri, 31 Jul 2026 18:00:00 +0000

Bootstrap 5's responsive system is more capable than most developers use. Everyone knows col-md-6. Fewer people know the patterns that make the difference between a layout that works on mobile and one that actually feels designed for mobile. Here's what I've learned building responsive dashboards and landing pages with Bootstrap 5.3.

Stop Using DevTools as Your Only Mobile Test

This is the most important point and it's not about Bootstrap at all. DevTools device simulation is not a real mobile test. It simulates viewport size and touch events. It does not simulate:

Slower CPU (most mobile devices render significantly slower than your development machine)
Real network conditions
iOS Safari's specific quirks with viewport units and scroll behavior
Android Chrome's address bar resizing the viewport on scroll
Actual touch target accuracy on a glass screen

Test on a real device. A budget Android phone under $100 is a better test device than DevTools because it shows you real performance problems, not just layout ones.

I found a Bootstrap layout issue on a client project that DevTools showed as perfect — on a real iPhone the navbar toggler area was too small to tap accurately. Not because the button was small — the tap target was fine. But the icon inside it was positioned in a way that the effective tap area was 20px × 20px on a real screen. Six hours to find because we weren't testing on a real device.

Test on real devices early and often.

Use the Right Container for the Right Context

Bootstrap 5 has six container variants and most developers only use one.

<!-- Fixed max-width at each breakpoint — general page layouts -->
<div class="container">...</div>

<!-- Full width always — dashboard main content areas -->
<div class="container-fluid">...</div>

<!-- Full width below sm, fixed above — narrow mobile layouts -->
<div class="container-sm">...</div>

<!-- Full width below md, fixed above — most landing pages -->
<div class="container-md">...</div>

<!-- Full width below lg, fixed above — tablets fill screen -->
<div class="container-lg">...</div>

<!-- Full width below xl, fixed above — large screen optimization -->
<div class="container-xl">...</div>

<!-- Full width below xxl, fixed above — very large screens -->
<div class="container-xxl">...</div>

The pattern I use most for admin dashboards: container-fluid inside the main content area so the dashboard fills the screen, container or container-xl for landing page sections so content has readable line length on large monitors.

For landing pages — container-xl is often better than container on large monitors. container maxes out at 1140px. container-xl maxes at 1320px. On a 1440px monitor — container looks narrow. container-xl uses the screen better.

Master the col-auto Pattern

col-auto takes only as much width as its content needs. col fills remaining space. This combination solves a huge number of layout problems without custom CSS.

<!-- Stat card header — icon auto width, title fills -->
<div class="d-flex align-items-center gap-3">
  <div class="col-auto">
    <div class="stat-icon bg-primary-subtle rounded-3 p-3">
      <i class="bx bx-dollar text-primary fs-4"></i>
    </div>
  </div>
  <div class="col">
    <div class="text-muted small mb-1">Monthly Revenue</div>
    <div class="h4 fw-bold mb-0">$48,295</div>
  </div>
  <div class="col-auto">
    <span class="badge bg-success-subtle text-success">+12%</span>
  </div>
</div>

<!-- Table row with actions — content fills, actions auto width -->
<div class="row align-items-center">
  <div class="col">
    <div class="fw-semibold">User Name</div>
    <div class="text-muted small">user@email.com</div>
  </div>
  <div class="col-auto">
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-outline-primary">Edit</button>
      <button class="btn btn-sm btn-outline-danger">Delete</button>
    </div>
  </div>
</div>

<!-- Page header — title fills, button auto width -->
<div class="row align-items-center mb-4">
  <div class="col">
    <h1 class="h4 mb-1">Users</h1>
    <p class="text-muted small mb-0">Manage all users</p>
  </div>
  <div class="col-auto">
    <button class="btn btn-primary">Add User</button>
  </div>
</div>

This pattern appears hundreds of times in a production dashboard. Learning it eliminates a huge amount of custom flexbox CSS.

Responsive Typography With fs- Utilities

Bootstrap 5 ships fs-1 through fs-6 for font sizes. But responsive typography — larger text on desktop, smaller on mobile — requires combining these with display utilities or SCSS.

// Responsive heading sizes via SCSS
.hero-title {
  font-size: 2rem; // mobile

  @include media-breakpoint-up(md) {
    font-size: 2.5rem; // tablet
  }

  @include media-breakpoint-up(lg) {
    font-size: 3.5rem; // desktop
  }
}

Or add responsive display utilities via SCSS:

// Add responsive display utilities to your custom SCSS
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @for $i from 1 through 6 {
      .display#{$infix}-#{$i} {
        font-size: map-get($display-font-sizes, $i) !important;
      }
    }
  }
}

Now display-6 display-md-5 display-lg-4 works — different display size per breakpoint.

Order Utilities for Mobile-First Layouts

Visual order on desktop often differs from logical order for mobile. The order- utilities handle this without changing HTML structure — important for accessibility where screen readers follow DOM order.

<!-- Mobile: image first (visually engaging), text second -->
<!-- Desktop: text first (left column), image second (right column) -->
<div class="row align-items-center g-5">
  <div class="col-12 col-lg-6 order-2 order-lg-1">
    <!-- Text content — second in DOM, first visually on desktop -->
    <h2>Feature Headline</h2>
    <p>Feature description</p>
  </div>
  <div class="col-12 col-lg-6 order-1 order-lg-2">
    <!-- Image — first in DOM, second visually on desktop -->
    <img src="feature.jpg" class="img-fluid rounded-3" alt="Feature">
  </div>
</div>

Screen reader reads text first (follows DOM order). Mobile shows image first (visually engaging). Desktop shows text on left, image on right. All three satisfied without JavaScript.

The Stack Pattern for Mobile Navigation

Dashboard sidebars need to collapse on mobile. The Bootstrap offcanvas component handles this better than the traditional show/hide approach.

<!-- Mobile navbar with offcanvas sidebar trigger -->
<nav class="navbar bg-white border-bottom d-lg-none px-3 py-2">
  <button class="btn btn-link p-0 text-dark"
          data-bs-toggle="offcanvas"
          data-bs-target="#mobileSidebar">
    <i class="bx bx-menu fs-4"></i>
  </button>
  <a class="navbar-brand fw-bold text-primary mb-0" href="#">
    Dashboard
  </a>
  <button class="btn btn-link p-0 text-dark position-relative">
    <i class="bx bx-bell fs-5"></i>
    <span class="position-absolute top-0 start-100
                 translate-middle badge rounded-pill bg-danger"
          style="font-size:9px;">3</span>
  </button>
</nav>

<!-- Offcanvas sidebar for mobile -->
<div class="offcanvas offcanvas-start" id="mobileSidebar" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <span class="fw-bold text-primary">Dashboard</span>
    <button type="button" class="btn-close"
            data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body p-0">
    <nav class="sidebar-nav p-3">
      <a href="/dashboard"
         class="nav-item d-flex align-items-center gap-3
                p-3 rounded-2 text-dark text-decoration-none mb-1">
        <i class="bx bx-grid-alt fs-5"></i>
        Dashboard
      </a>
    </nav>
  </div>
</div>

<!-- Desktop sidebar — hidden on mobile -->
<aside class="sidebar d-none d-lg-flex flex-column">
  <!-- Same nav items -->
</aside>

Offcanvas slides in from the left on mobile. Bootstrap handles animation, focus trapping, and dismiss behavior. No custom JavaScript needed.

Responsive Tables — The Right Way

Tables are the hardest responsive challenge in admin dashboards. Three approaches in order of preference:

Approach 1 — Horizontal scroll wrapper

<div class="table-responsive">
  <table class="table table-hover align-middle">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Simplest. Table scrolls horizontally on mobile. Works for most cases.

Approach 2 — Priority columns

Hide less important columns on mobile:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th class="d-none d-md-table-cell">Email</th>
      <th class="d-none d-lg-table-cell">Role</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>User Name</td>
      <td class="d-none d-md-table-cell">user@email.com</td>
      <td class="d-none d-lg-table-cell">Admin</td>
      <td><span class="badge bg-success">Active</span></td>
      <td>
        <button class="btn btn-sm btn-outline-primary">Edit</button>
      </td>
    </tr>
  </tbody>
</table>

Mobile shows Name, Status, Actions. Tablet adds Email. Desktop adds Role.

Approach 3 — Card layout on mobile

@include media-breakpoint-down(md) {
  .responsive-table {
    thead { display: none; }

    tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      padding: 1rem;
    }

    td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border: none;

      &::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8125rem;
        color: var(--bs-secondary-color);
      }
    }
  }
}

<table class="table responsive-table">
  <tbody>
    <tr>
      <td data-label="Name">User Name</td>
      <td data-label="Email">user@email.com</td>
      <td data-label="Status">
        <span class="badge bg-success">Active</span>
      </td>
    </tr>
  </tbody>
</table>

Cards on mobile. Normal table on tablet and above. Most polished — most code.

The Spacing System — Use It Consistently

Bootstrap's spacing scale maps to specific rem values:

m-1 / p-1 = 0.25rem (4px)
m-2 / p-2 = 0.5rem  (8px)
m-3 / p-3 = 1rem    (16px)
m-4 / p-4 = 1.5rem  (24px)
m-5 / p-5 = 3rem    (48px)

When you need spacing outside the 1-5 scale — extend it in your SCSS:

$spacers: map-merge($spacers, (
  6: 4rem,
  7: 5rem,
  8: 6rem,
  9: 8rem,
  10: 10rem
));

Now py-7 gives you 80px vertical padding — consistent with the Bootstrap system.

Browse Bootstrap 5.3 templates with responsive layouts done correctly at LettStart Design — real device tested, Lighthouse above 80, zero jQuery. Use FIRST30 for 30% off.

Angular 22 Authentication: Building Login Pages for Admin Dashboards

Sakshi — Wed, 29 Jul 2026 18:00:00 +0000

Authentication is the first thing users see when they open an admin dashboard. It's also the part most tutorials get wrong — either oversimplifying to the point of being unusable in production or overcomplicating with libraries that add more problems than they solve.

Here's how to build authentication for an Angular 22 admin dashboard properly — JWT tokens, route guards, HTTP interceptors, and a login page that actually looks and works correctly.

The Authentication Architecture

Angular 22 authentication involves four pieces:

AuthService — manages token storage, user state, login/logout logic. Everything authentication-related goes here.

authGuard — functional route guard that protects routes. Redirects to login if not authenticated.

authInterceptor — functional HTTP interceptor that adds JWT token to every outgoing request automatically.

Login component — the UI. Signal Forms, Bootstrap 5.3, proper error handling.

AuthService

// core/services/auth.service.ts
import { Injectable, signal, computed } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router'
import { tap, catchError } from 'rxjs/operators'
import { throwError } from 'rxjs'

export interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'editor' | 'viewer'
  avatar?: string
}

export interface LoginCredentials {
  email: string
  password: string
}

export interface AuthResponse {
  token: string
  refreshToken: string
  user: User
  expiresIn: number
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly TOKEN_KEY = 'auth_token'
  private readonly REFRESH_KEY = 'refresh_token'
  private readonly USER_KEY = 'auth_user'

  // Signal-based state
  private _user = signal<User | null>(this.loadStoredUser())
  private _isLoading = signal(false)
  private _error = signal<string | null>(null)

  // Public read-only signals
  user = this._user.asReadonly()
  isLoading = this._isLoading.asReadonly()
  error = this._error.asReadonly()

  // Derived state
  isAuthenticated = computed(() => this._user() !== null)
  isAdmin = computed(() => this._user()?.role === 'admin')
  userName = computed(() => this._user()?.name ?? '')

  constructor(
    private http: HttpClient,
    private router: Router
  ) {}

  login(credentials: LoginCredentials) {
    this._isLoading.set(true)
    this._error.set(null)

    return this.http.post<AuthResponse>('/api/auth/login', credentials).pipe(
      tap(response => {
        this.storeTokens(response.token, response.refreshToken)
        this.storeUser(response.user)
        this._user.set(response.user)
        this._isLoading.set(false)
      }),
      catchError(error => {
        this._error.set(
          error.error?.message ?? 'Invalid email or password'
        )
        this._isLoading.set(false)
        return throwError(() => error)
      })
    )
  }

  logout() {
    localStorage.removeItem(this.TOKEN_KEY)
    localStorage.removeItem(this.REFRESH_KEY)
    localStorage.removeItem(this.USER_KEY)
    this._user.set(null)
    this.router.navigate(['/auth/login'])
  }

  getToken(): string | null {
    return localStorage.getItem(this.TOKEN_KEY)
  }

  hasPermission(permission: string): boolean {
    const role = this._user()?.role
    const permissions: Record<string, string[]> = {
      admin: ['read', 'write', 'delete', 'admin'],
      editor: ['read', 'write'],
      viewer: ['read']
    }
    return role ? permissions[role]?.includes(permission) ?? false : false
  }

  private storeTokens(token: string, refreshToken: string) {
    localStorage.setItem(this.TOKEN_KEY, token)
    localStorage.setItem(this.REFRESH_KEY, refreshToken)
  }

  private storeUser(user: User) {
    localStorage.setItem(this.USER_KEY, JSON.stringify(user))
  }

  private loadStoredUser(): User | null {
    try {
      const stored = localStorage.getItem(this.USER_KEY)
      return stored ? JSON.parse(stored) : null
    } catch {
      return null
    }
  }
}

Signal-based state throughout. isAuthenticated and isAdmin computed from user Signal. hasPermission method for role-based access control.

authGuard

// core/guards/auth.guard.ts
import { inject } from '@angular/core'
import { CanActivateFn, Router } from '@angular/router'
import { AuthService } from '../services/auth.service'

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService)
  const router = inject(Router)

  if (authService.isAuthenticated()) {
    return true
  }

  return router.createUrlTree(['/auth/login'], {
    queryParams: { returnUrl: state.url }
  })
}

// Admin-only guard
export const adminGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService)
  const router = inject(Router)

  if (!authService.isAuthenticated()) {
    return router.createUrlTree(['/auth/login'], {
      queryParams: { returnUrl: state.url }
    })
  }

  if (!authService.isAdmin()) {
    return router.createUrlTree(['/unauthorized'])
  }

  return true
}

Two guards — authGuard for any authenticated user, adminGuard for admin-only routes. Functional guards — no class, no interface. inject() for dependencies.

authInterceptor

// core/interceptors/auth.interceptor.ts
import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http'
import { inject } from '@angular/core'
import { catchError, throwError } from 'rxjs'
import { AuthService } from '../services/auth.service'
import { Router } from '@angular/router'

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService)
  const router = inject(Router)

  const token = authService.getToken()

  // Skip auth header for login/register endpoints
  const isAuthEndpoint = req.url.includes('/auth/login') ||
                          req.url.includes('/auth/register')

  const authReq = token && !isAuthEndpoint
    ? req.clone({
        headers: req.headers.set('Authorization', `Bearer ${token}`)
      })
    : req

  return next(authReq).pipe(
    catchError((error: HttpErrorResponse) => {
      // Auto-logout on 401 Unauthorized
      if (error.status === 401) {
        authService.logout()
        router.navigate(['/auth/login'])
      }
      return throwError(() => error)
    })
  )
}

Skips auth header for auth endpoints. Adds Bearer token to everything else. Auto-logout on 401 response — handles expired tokens without manual checking.

Routes With Guards Applied

// app.routes.ts
export const routes: Routes = [
  {
    path: 'auth',
    children: [
      {
        path: 'login',
        loadComponent: () =>
          import('./features/auth/login/login.component')
            .then(m => m.LoginComponent)
      },
      {
        path: 'forgot-password',
        loadComponent: () =>
          import('./features/auth/forgot-password/forgot-password.component')
            .then(m => m.ForgotPasswordComponent)
      }
    ]
  },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./features/dashboard/dashboard.component')
        .then(m => m.DashboardComponent),
    canActivate: [authGuard]
  },
  {
    path: 'admin',
    loadComponent: () =>
      import('./features/admin/admin.component')
        .then(m => m.AdminComponent),
    canActivate: [adminGuard] // admin only
  },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  }
]

Auth routes unguarded. Dashboard guarded by authGuard. Admin section guarded by adminGuard. All lazy loaded.

Login Component With Signal Forms

// features/auth/login/login.component.ts
import { Component, inject, computed, signal } from '@angular/core'
import { Router, ActivatedRoute } from '@angular/router'
import { FormGroup, FormControl, Validators } from '@angular/forms/signals'
import { AuthService } from '../../../core/services/auth.service'

@Component({
  selector: 'app-login',
  standalone: true,
  templateUrl: './login.component.html'
})
export class LoginComponent {
  private authService = inject(AuthService)
  private router = inject(Router)
  private route = inject(ActivatedRoute)

  // Signal Forms
  form = new FormGroup({
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ]),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(8)
    ]),
    rememberMe: new FormControl(false)
  })

  // State from service
  isLoading = this.authService.isLoading
  serverError = this.authService.error
  passwordVisible = signal(false)

  // Validation signals
  emailError = computed(() => {
    const control = this.form.controls.email
    if (!control.touched()) return null
    if (control.hasError('required')) return 'Email is required'
    if (control.hasError('email')) return 'Enter a valid email address'
    return null
  })

  passwordError = computed(() => {
    const control = this.form.controls.password
    if (!control.touched()) return null
    if (control.hasError('required')) return 'Password is required'
    if (control.hasError('minlength')) return 'Password must be at least 8 characters'
    return null
  })

  isFormValid = computed(() => this.form.valid())

  togglePassword() {
    this.passwordVisible.update(v => !v)
  }

  onSubmit() {
    if (!this.form.valid()) {
      Object.values(this.form.controls).forEach(control => {
        control.markAsTouched()
      })
      return
    }

    const { email, password } = this.form.value()

    this.authService.login({ email, password }).subscribe({
      next: () => {
        const returnUrl = this.route.snapshot
          .queryParams['returnUrl'] || '/dashboard'
        this.router.navigateByUrl(returnUrl)
      }
    })
  }
}

<!-- features/auth/login/login.component.html -->
<div class="auth-wrapper min-vh-100 d-flex align-items-center
            justify-content-center bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">

        <!-- Logo -->
        <div class="text-center mb-4">
          <a href="/" class="d-inline-block">
            <img src="assets/images/logo.svg" alt="Logo" height="40">
          </a>
        </div>

        <!-- Card -->
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4 p-md-5">

            <!-- Header -->
            <div class="text-center mb-4">
              <h1 class="h4 fw-bold mb-1">Welcome back</h1>
              <p class="text-muted small mb-0">Sign in to your account</p>
            </div>

            <!-- Server Error -->
            @if (serverError()) {
              <div class="alert alert-danger d-flex align-items-center
                          gap-2 py-2 mb-4" role="alert">
                <i class="bx bx-error-circle fs-5"></i>
                <span class="small">{{ serverError() }}</span>
              </div>
            }

            <!-- Form -->
            <form (ngSubmit)="onSubmit()" novalidate>

              <!-- Email -->
              <div class="mb-3">
                <label for="email" class="form-label fw-medium small">
                  Email address
                </label>
                <input
                  type="email"
                  id="email"
                  class="form-control"
                  [class.is-invalid]="emailError()"
                  [class.is-valid]="!emailError() &&
                                    form.controls.email.touched()"
                  placeholder="you@example.com"
                  [value]="form.controls.email.value()"
                  (input)="form.controls.email
                    .setValue($any($event.target).value)"
                  (blur)="form.controls.email.markAsTouched()"
                  autocomplete="email">
                @if (emailError()) {
                  <div class="invalid-feedback">{{ emailError() }}</div>
                }
              </div>

              <!-- Password -->
              <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                  <label for="password"
                         class="form-label fw-medium small mb-0">
                    Password
                  </label>
                  <a href="/auth/forgot-password"
                     class="small text-primary text-decoration-none">
                    Forgot password?
                  </a>
                </div>
                <div class="input-group">
                  <input
                    [type]="passwordVisible() ? 'text' : 'password'"
                    id="password"
                    class="form-control border-end-0"
                    [class.is-invalid]="passwordError()"
                    placeholder="••••••••"
                    [value]="form.controls.password.value()"
                    (input)="form.controls.password
                      .setValue($any($event.target).value)"
                    (blur)="form.controls.password.markAsTouched()"
                    autocomplete="current-password">
                  <button type="button"
                          class="input-group-text bg-white border-start-0"
                          (click)="togglePassword()">
                    <i class="bx fs-5"
                       [class.bx-show]="!passwordVisible()"
                       [class.bx-hide]="passwordVisible()"></i>
                  </button>
                </div>
                @if (passwordError()) {
                  <div class="text-danger small mt-1">
                    {{ passwordError() }}
                  </div>
                }
              </div>

              <!-- Remember Me -->
              <div class="mb-4">
                <div class="form-check">
                  <input type="checkbox"
                         class="form-check-input"
                         id="rememberMe">
                  <label class="form-check-label small" for="rememberMe">
                    Remember me for 30 days
                  </label>
                </div>
              </div>

              <!-- Submit -->
              <button
                type="submit"
                class="btn btn-primary w-100 py-2"
                [disabled]="isLoading()">
                @if (isLoading()) {
                  <span class="spinner-border spinner-border-sm me-2"
                        role="status"></span>
                  Signing in...
                } @else {
                  Sign In
                }
              </button>

            </form>

            <!-- Divider -->
            <div class="d-flex align-items-center my-4">
              <hr class="flex-grow-1">
              <span class="px-3 text-muted small">or</span>
              <hr class="flex-grow-1">
            </div>

            <!-- Sign Up Link -->
            <p class="text-center text-muted small mb-0">
              Don't have an account?
              <a href="/auth/register"
                 class="text-primary fw-medium text-decoration-none">
                Create account
              </a>
            </p>

          </div>
        </div>

        <!-- Footer -->
        <p class="text-center text-muted small mt-4">
          Protected by SSL encryption
        </p>

      </div>
    </div>
  </div>
</div>

Forgot Password Component

// features/auth/forgot-password/forgot-password.component.ts
import { Component, inject, signal } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { FormControl, Validators } from '@angular/forms/signals'

@Component({
  selector: 'app-forgot-password',
  standalone: true,
  template: `
    <div class="auth-wrapper min-vh-100 d-flex align-items-center
                justify-content-center bg-light">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-sm-10 col-md-8 col-lg-5">
            <div class="card border-0 shadow-sm">
              <div class="card-body p-4 p-md-5">

                @if (!submitted()) {
                  <div class="text-center mb-4">
                    <div class="bg-primary-subtle rounded-circle
                                d-inline-flex p-3 mb-3">
                      <i class="bx bx-lock-open text-primary fs-3"></i>
                    </div>
                    <h1 class="h5 fw-bold mb-1">Forgot your password?</h1>
                    <p class="text-muted small">
                      Enter your email and we'll send a reset link.
                    </p>
                  </div>

                  <form (ngSubmit)="onSubmit()">
                    <div class="mb-3">
                      <input type="email"
                             class="form-control"
                             placeholder="your@email.com"
                             [value]="email.value()"
                             (input)="email.setValue(
                               $any($event.target).value
                             )"
                             required>
                    </div>
                    <button type="submit"
                            class="btn btn-primary w-100"
                            [disabled]="isLoading()">
                      @if (isLoading()) {
                        <span class="spinner-border spinner-border-sm me-2">
                        </span>
                        Sending...
                      } @else {
                        Send Reset Link
                      }
                    </button>
                  </form>
                } @else {
                  <div class="text-center">
                    <div class="bg-success-subtle rounded-circle
                                d-inline-flex p-3 mb-3">
                      <i class="bx bx-check text-success fs-3"></i>
                    </div>
                    <h2 class="h5 fw-bold mb-2">Check your email</h2>
                    <p class="text-muted small">
                      We sent a reset link to
                      <strong>{{ email.value() }}</strong>
                    </p>
                    <a href="/auth/login"
                       class="btn btn-outline-primary mt-2">
                      Back to login
                    </a>
                  </div>
                }

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class ForgotPasswordComponent {
  email = new FormControl('', [Validators.required, Validators.email])
  isLoading = signal(false)
  submitted = signal(false)

  private http = inject(HttpClient)

  onSubmit() {
    if (!this.email.valid()) return

    this.isLoading.set(true)
    this.http.post('/api/auth/forgot-password', {
      email: this.email.value()
    }).subscribe({
      next: () => {
        this.submitted.set(true)
        this.isLoading.set(false)
      },
      error: () => this.isLoading.set(false)
    })
  }
}

Two states — form and success confirmation. Clean UX for password reset flows.

Register appConfig With Interceptor

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideRouter } from '@angular/router'
import { provideHttpClient, withInterceptors } from '@angular/common/http'
import { routes } from './app.routes'
import { authInterceptor } from './core/interceptors/auth.interceptor'

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
}

One line to register the interceptor. Every HTTP request in the app automatically gets the JWT token attached.

Browse Angular 22 admin dashboard templates with authentication already implemented at LettStart Design — auth guards, interceptors, login pages, Signal Forms, Bootstrap 5.3. Use FIRST30 for 30% off.

Building a Portfolio Website With Bootstrap 5: Complete Guide

Sakshi — Mon, 27 Jul 2026 12:15:59 +0000

I've built portfolio sites for clients, for developers I've mentored, and for myself multiple times as my work evolved. The pattern that works consistently is simpler than most tutorials make it — six sections, Bootstrap 5.3, one SCSS variables file, and a contact form that actually sends. Here's the complete guide.

Project Setup

# Create project structure
mkdir portfolio && cd portfolio
mkdir -p assets/{css,scss,js,images,fonts}
touch index.html assets/scss/style.scss

Install Bootstrap 5.3 via npm or CDN. For a portfolio — CDN is fine unless you want SCSS variable customization. If you want to customize colors and fonts — npm and SCSS.

npm install bootstrap@5.3

// assets/scss/style.scss — correct import order

// 1. Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

// 2. Your Bootstrap variable overrides — BEFORE Bootstrap import
$primary: #fd4766;
$font-family-base: 'Inter', sans-serif;
$border-radius: 8px;
$border-radius-lg: 12px;
$box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
$box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

// 3. Bootstrap
@import 'bootstrap/scss/bootstrap';

// 4. Your custom styles after Bootstrap
// Custom styles below

HTML Structure — Six Sections

html
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Your name — Frontend Developer specializing in Angular, Bootstrap, and React">
  <title>Your Name — Frontend Developer</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

  <!-- 1. Navigation -->
  <nav class="navbar navbar-expand-lg sticky-top bg-white border-bottom">...</nav>

  <!-- 2. Hero -->
  <section id="hero" class="hero-section py-100">...</section>

  <!-- 3. Projects -->
  <section id="projects" class="projects-section py-80 bg-light">...</section>

  <!-- 4. Skills -->
  <section id="skills" class="skills-section py-80">...</section>

  <!-- 5. About -->
  <section id="about" class="about-section py-80 bg-light">...</section>

  <!-- 6. Contact -->
  <section id="contact" class="contact-section py-80">...</section>

  <!-- Footer -->
  <footer class="footer py-4 bg-dark text-white">...</footer>

  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>
</html>

Six sections. That's all a portfolio needs. Resist the urge to add more.

Section 1 — Navigation

<nav class="navbar navbar-expand-lg sticky-top bg-white border-bottom shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold text-primary" href="#">
      YourName
    </a>
    <button class="navbar-toggler border-0" type="button"
            data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto gap-1">
        <li class="nav-item">
          <a class="nav-link px-3" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#skills">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="btn btn-primary px-4 ms-2" href="#contact">
            Hire Me
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

sticky-top keeps the navbar visible while scrolling. border-bottom shadow-sm gives it subtle depth. The "Hire Me" button as a CTA in the navbar gets clicks — more than a plain nav link.

Section 2 — Hero

<section id="hero" class="hero-section py-100">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-6 order-2 order-lg-1">
        <div class="hero-badge d-inline-flex align-items-center
                    gap-2 bg-primary-subtle text-primary
                    rounded-pill px-3 py-2 mb-4 small fw-semibold">
          <span class="dot bg-primary rounded-circle"
                style="width:8px;height:8px;"></span>
          Available for new projects
        </div>
        <h1 class="display-5 fw-bold lh-sm mb-3">
          Frontend Developer<br>
          <span class="text-primary">Building Angular</span><br>
          & Bootstrap Apps
        </h1>
        <p class="lead text-muted mb-4">
          I build production-ready admin dashboards, SaaS applications,
          and landing pages with Angular 22, Bootstrap 5.3, and React 19.
          12+ years of experience shipping clean code.
        </p>
        <div class="d-flex flex-wrap gap-3">
          <a href="#projects" class="btn btn-primary btn-lg px-4">
            View My Work
          </a>
          <a href="#contact" class="btn btn-outline-secondary btn-lg px-4">
            Get In Touch
          </a>
        </div>
        <div class="hero-stats d-flex gap-4 mt-5">
          <div>
            <div class="h4 fw-bold mb-0">12+</div>
            <div class="text-muted small">Years Experience</div>
          </div>
          <div>
            <div class="h4 fw-bold mb-0">50+</div>
            <div class="text-muted small">Projects Shipped</div>
          </div>
          <div>
            <div class="h4 fw-bold mb-0">20+</div>
            <div class="text-muted small">Happy Clients</div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 order-1 order-lg-2 text-center">
        <div class="hero-image-wrapper position-relative d-inline-block">
          <img src="assets/images/your-photo.jpg"
               alt="Your Name — Frontend Developer"
               class="img-fluid rounded-4 shadow-lg"
               style="max-width: 420px;">
          <div class="hero-badge-card card border-0 shadow position-absolute
                      bottom-0 start-0 translate-middle-y ms-n3 p-3">
            <div class="d-flex align-items-center gap-2">
              <div class="badge-icon bg-success rounded-2 p-2">
                <i class="bx bx-check text-white fs-5"></i>
              </div>
              <div>
                <div class="fw-semibold small">Available Now</div>
                <div class="text-muted" style="font-size:11px;">
                  Open to opportunities
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Photo on right on desktop, above content on mobile via order-2 order-lg-1. Stats below the CTA buttons. Availability badge card floating on the photo — a small detail that makes it feel designed rather than assembled.

Section 3 — Projects

<section id="projects" class="projects-section py-80 bg-light">
  <div class="container">
    <div class="row mb-50">
      <div class="col-lg-6">
        <h2 class="h1 fw-bold mb-3">Selected Work</h2>
        <p class="text-muted lead">
          Projects I've built — what the problem was,
          what I did, what shipped.
        </p>
      </div>
    </div>
    <div class="row g-4">

      <!-- Project Card -->
      <div class="col-lg-6">
        <div class="project-card card border-0 shadow-sm h-100
                    overflow-hidden hover-lift">
          <div class="project-image position-relative overflow-hidden">
            <img src="assets/images/project-1.jpg"
                 alt="Project Name"
                 class="img-fluid w-100"
                 style="height: 240px; object-fit: cover;">
            <div class="project-overlay position-absolute inset-0
                        bg-dark bg-opacity-75 d-flex align-items-center
                        justify-content-center gap-3 opacity-0
                        transition-opacity">
              <a href="#" class="btn btn-light btn-sm">
                Live Demo
              </a>
              <a href="#" class="btn btn-outline-light btn-sm">
                Case Study
              </a>
            </div>
          </div>
          <div class="card-body p-4">
            <div class="d-flex flex-wrap gap-2 mb-3">
              <span class="badge bg-primary-subtle text-primary fw-normal">
                Angular 22
              </span>
              <span class="badge bg-primary-subtle text-primary fw-normal">
                Bootstrap 5.3
              </span>
              <span class="badge bg-primary-subtle text-primary fw-normal">
                TypeScript
              </span>
            </div>
            <h3 class="h5 fw-semibold mb-2">SaaS Admin Dashboard</h3>
            <p class="text-muted small mb-3">
              Built a complete admin dashboard for a SaaS product
              with user management, analytics, and billing.
              Angular 22 with Signals throughout, Bootstrap 5.3 for UI.
            </p>
            <div class="d-flex gap-4">
              <div>
                <div class="fw-bold small">40%</div>
                <div class="text-muted" style="font-size:11px;">
                  Load time improvement
                </div>
              </div>
              <div>
                <div class="fw-bold small">12K</div>
                <div class="text-muted" style="font-size:11px;">
                  Monthly active users
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Repeat for 3-4 projects -->

    </div>
  </div>
</section>

Project overlay appears on hover — CSS handles this. Tech stack badges. Brief description with specific contribution. Outcome metrics where you have them. This structure works for 3-4 featured projects.

Section 4 — Skills

<section id="skills" class="skills-section py-80">
  <div class="container">
    <div class="row mb-50">
      <div class="col-lg-6">
        <h2 class="h1 fw-bold mb-3">Skills & Technologies</h2>
        <p class="text-muted">
          What I work with daily. Grouped by area.
        </p>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="skill-group card border-0 bg-light h-100 p-4">
          <div class="skill-icon mb-3">
            <div class="bg-primary-subtle rounded-3 p-3 d-inline-block">
              <i class="bx bxl-angular text-primary fs-3"></i>
            </div>
          </div>
          <h3 class="h6 fw-semibold mb-3">Frontend Frameworks</h3>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              Angular 22
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              React 19
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              Next.js 16
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              TypeScript
            </span>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class="skill-group card border-0 bg-light h-100 p-4">
          <div class="skill-icon mb-3">
            <div class="bg-primary-subtle rounded-3 p-3 d-inline-block">
              <i class="bx bxl-bootstrap text-primary fs-3"></i>
            </div>
          </div>
          <h3 class="h6 fw-semibold mb-3">CSS & Styling</h3>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              Bootstrap 5.3
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              SCSS/Sass
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              Tailwind CSS
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              CSS Custom Properties
            </span>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class="skill-group card border-0 bg-light h-100 p-4">
          <div class="skill-icon mb-3">
            <div class="bg-primary-subtle rounded-3 p-3 d-inline-block">
              <i class="bx bx-code-alt text-primary fs-3"></i>
            </div>
          </div>
          <h3 class="h6 fw-semibold mb-3">Tools & Backend</h3>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              Node.js
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              Git
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              AWS
            </span>
            <span class="badge bg-white text-dark border fw-normal py-2 px-3">
              PostgreSQL
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Grouped by category. Badge tags instead of progress bars. Clean cards with icon per category. Honest — only list what you actually use.

Section 5 — About

<section id="about" class="about-section py-80 bg-light">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-5">
        <img src="assets/images/about-photo.jpg"
             alt="About Your Name"
             class="img-fluid rounded-4 shadow">
      </div>
      <div class="col-lg-7">
        <h2 class="h1 fw-bold mb-4">About Me</h2>
        <p class="text-muted mb-3">
          I've been building web applications since 2013.
          Started with Bootstrap 3, grew into Angular and React,
          now building production systems with Angular 22,
          Bootstrap 5.3, and Next.js 16.
        </p>
        <p class="text-muted mb-4">
          I care about code that's readable in six months,
          accessible to everyone, and fast on a real device
          on a real connection. Not just fast in a Lighthouse
          test on a MacBook Pro on fiber.
        </p>
        <div class="row g-3 mb-4">
          <div class="col-6">
            <div class="d-flex align-items-center gap-2">
              <i class="bx bx-map text-primary"></i>
              <span class="small">India</span>
            </div>
          </div>
          <div class="col-6">
            <div class="d-flex align-items-center gap-2">
              <i class="bx bx-briefcase text-primary"></i>
              <span class="small">Available for remote</span>
            </div>
          </div>
          <div class="col-6">
            <div class="d-flex align-items-center gap-2">
              <i class="bx bx-calendar text-primary"></i>
              <span class="small">12+ years experience</span>
            </div>
          </div>
          <div class="col-6">
            <div class="d-flex align-items-center gap-2">
              <i class="bx bx-code-block text-primary"></i>
              <span class="small">Full stack capable</span>
            </div>
          </div>
        </div>
        <div class="d-flex gap-3">
          <a href="assets/your-resume.pdf"
             class="btn btn-primary px-4"
             download>
            Download Resume
          </a>
          <a href="https://github.com/yourusername"
             class="btn btn-outline-secondary px-4"
             target="_blank">
            GitHub Profile
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Short paragraphs. Specific details — not generic "passionate about clean code." Quick facts in a grid. Resume download and GitHub link as CTAs.

Section 6 — Contact

<section id="contact" class="contact-section py-80">
  <div class="container">
    <div class="row justify-content-center mb-50">
      <div class="col-lg-6 text-center">
        <h2 class="h1 fw-bold mb-3">Let's Work Together</h2>
        <p class="text-muted">
          Available for freelance projects and full-time opportunities.
          Response time: within 24 hours.
        </p>
      </div>
    </div>
    <div class="row g-4 justify-content-center">
      <div class="col-lg-7">
        <div class="card border-0 shadow-sm p-4 p-md-5">
          <form action="https://formspree.io/f/your-form-id"
                method="POST">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label fw-medium small">Name *</label>
                <input type="text"
                       name="name"
                       class="form-control"
                       placeholder="Your name"
                       required>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-medium small">Email *</label>
                <input type="email"
                       name="email"
                       class="form-control"
                       placeholder="your@email.com"
                       required>
              </div>
              <div class="col-12">
                <label class="form-label fw-medium small">
                  Project Type
                </label>
                <select name="project_type" class="form-select">
                  <option value="">Select project type</option>
                  <option>Admin Dashboard</option>
                  <option>Landing Page</option>
                  <option>Full Stack Application</option>
                  <option>Consultation</option>
                  <option>Other</option>
                </select>
              </div>
              <div class="col-12">
                <label class="form-label fw-medium small">Message *</label>
                <textarea name="message"
                          class="form-control"
                          rows="5"
                          placeholder="Tell me about your project..."
                          required></textarea>
              </div>
              <div class="col-12">
                <button type="submit"
                        class="btn btn-primary btn-lg w-100">
                  Send Message
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="d-flex flex-column gap-3">
          <div class="card border-0 bg-light p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="bg-primary-subtle rounded-3 p-3">
                <i class="bx bx-envelope text-primary fs-5"></i>
              </div>
              <div>
                <div class="fw-semibold small">Email</div>
                <a href="mailto:your@email.com"
                   class="text-muted small text-decoration-none">
                  your@email.com
                </a>
              </div>
            </div>
          </div>
          <div class="card border-0 bg-light p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="bg-primary-subtle rounded-3 p-3">
                <i class="bx bxl-linkedin text-primary fs-5"></i>
              </div>
              <div>
                <div class="fw-semibold small">LinkedIn</div>
                <a href="https://linkedin.com/in/yourprofile"
                   class="text-muted small text-decoration-none"
                   target="_blank">
                  linkedin.com/in/yourprofile
                </a>
              </div>
            </div>
          </div>
          <div class="card border-0 bg-light p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="bg-primary-subtle rounded-3 p-3">
                <i class="bx bxl-github text-primary fs-5"></i>
              </div>
              <div>
                <div class="fw-semibold small">GitHub</div>
                <a href="https://github.com/yourusername"
                   class="text-muted small text-decoration-none"
                   target="_blank">
                  github.com/yourusername
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Formspree for the form — no backend needed. Project type dropdown helps qualify enquiries. Contact info cards beside the form for people who prefer email directly.

Dark Mode Toggle

// assets/js/main.js

// Theme toggle
const themeToggle = document.getElementById('themeToggle')
const savedTheme = localStorage.getItem('theme') ||
  (window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark' : 'light')

document.documentElement.setAttribute('data-bs-theme', savedTheme)

themeToggle?.addEventListener('click', () => {
  const current = document.documentElement
    .getAttribute('data-bs-theme')
  const next = current === 'dark' ? 'light' : 'dark'
  document.documentElement.setAttribute('data-bs-theme', next)
  localStorage.setItem('theme', next)
})

// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault()
    const target = document.querySelector(
      anchor.getAttribute('href')
    )
    target?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  })
})

// Active nav link on scroll
const sections = document.querySelectorAll('section[id]')
const navLinks = document.querySelectorAll('.navbar-nav .nav-link')

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY

  sections.forEach(section => {
    const sectionTop = section.offsetTop - 100
    const sectionHeight = section.offsetHeight
    const sectionId = section.getAttribute('id')

    if (scrollY >= sectionTop &&
        scrollY < sectionTop + sectionHeight) {
      navLinks.forEach(link => {
        link.classList.remove('active')
        if (link.getAttribute('href') === `#${sectionId}`) {
          link.classList.add('active')
        }
      })
    }
  })
})

Three JavaScript behaviors — theme toggle, smooth scroll, active nav link on scroll. No jQuery. Pure vanilla JavaScript. Everything Bootstrap handles through data-bs-* attributes.

CSS for Custom Touches

// assets/scss/style.scss additions

// Spacing utilities
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.mb-50 { margin-bottom: 50px; }

// Project card hover
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;

    .project-overlay {
      opacity: 1 !important;
    }
  }
}

.project-overlay {
  transition: opacity 0.2s ease;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// Dark mode custom properties
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1117;
  --bs-secondary-bg: #1a1f2e;

  .bg-light {
    background-color: #1a1f2e !important;
  }

  .card {
    background-color: #1e2130;
    border-color: #2d3748;
  }

  .skill-group {
    background-color: #1e2130 !important;
  }
}

Minimal custom CSS on top of Bootstrap. Hover lift effect for project cards. Dark mode overrides for custom sections. Everything else is Bootstrap utilities.

If you want a Bootstrap 5.3 portfolio template already built with this structure — browse LettStart Design. Zero jQuery, Bootstrap 5.3, Lighthouse above 85. Use FIRST30 for 30% off.

How to Set Up Angular 22 with Bootstrap 5: Step by Step

Sakshi — Thu, 23 Jul 2026 11:44:14 +0000

I set up Angular 22 with Bootstrap 5.3 more times than I can count — for client projects, for templates I build and sell, for side projects. The process is straightforward but there are specific decisions along the way that matter for long-term maintainability. This guide covers the setup and the decisions, not just the commands.

Create the Angular 22 Project

ng new my-dashboard --standalone --routing --style=scss
cd my-dashboard

Two flags matter here. --standalone creates the project with standalone components as the default — no AppModule, no NgModules. This is the Angular 22 recommended approach and you want it from the start. --style=scss gives you SCSS instead of CSS — required for Bootstrap's SCSS variable system.

When prompted: enable strict mode. Always. The compiler catches null reference errors, type mismatches, and undefined property access at build time instead of runtime. The initial configuration friction is worth it.

Install Bootstrap 5.3

npm install bootstrap@5.3

Do not install @ng-bootstrap/ng-bootstrap yet — only install it if you need Angular-native Bootstrap component behaviors like modals, dropdowns, and datepickers with Angular integration. For styling only — Bootstrap CSS is sufficient.

Configure Bootstrap in angular.json

{
  "projects": {
    "my-dashboard": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          }
        }
      }
    }
  }
}

Do not reference Bootstrap CSS directly in angular.json. Import it through SCSS instead — this gives you access to Bootstrap's SCSS variables and mixins.

Set Up SCSS Architecture

This is the step most tutorials skip and it's the most important one for long-term maintainability.

src/
  styles/
    _variables.scss     — Bootstrap overrides + custom variables
    _mixins.scss        — custom mixins
    _components.scss    — custom component styles
    _utilities.scss     — custom utility classes
  styles.scss           — imports everything in correct order

// src/styles/_variables.scss
// Override Bootstrap variables BEFORE importing Bootstrap

// Brand colors
$primary: #fd4766;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #1a1f2e;

// Typography
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
$font-size-base: 0.9375rem;
$line-height-base: 1.6;
$font-weight-base: 400;

// Layout
$border-radius: 8px;
$border-radius-sm: 6px;
$border-radius-lg: 12px;
$border-radius-xl: 16px;

// Shadows
$box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
$box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
$box-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);

// Spacing
$spacer: 1rem;

// Enable all Bootstrap utilities
$enable-negative-margins: true;
$enable-cssgrid: true;

// src/styles.scss — correct import order
// 1. Google Fonts (before everything)
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

// 2. Your Bootstrap variable overrides
@import 'styles/variables';

// 3. Bootstrap SCSS — uses your overrides
@import 'bootstrap/scss/bootstrap';

// 4. Your custom component styles — built on top of Bootstrap
@import 'styles/components';
@import 'styles/utilities';

Import order matters. Variables before Bootstrap. Bootstrap before your custom styles. Getting this wrong means your variable overrides don't apply.

Configure the App

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideRouter, withComponentInputBinding } from '@angular/router'
import { provideHttpClient, withInterceptors } from '@angular/common/http'
import { routes } from './app.routes'
import { authInterceptor } from './core/interceptors/auth.interceptor'

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
}

withComponentInputBinding() enables binding route params directly to component inputs — a cleaner pattern than injecting ActivatedRoute everywhere. withInterceptors adds functional interceptors — the Angular 22 recommended approach over class-based interceptors.

Set Up Routing With Lazy Loading

// src/app/app.routes.ts
import { Routes } from '@angular/router'
import { authGuard } from './core/guards/auth.guard'

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadComponent: () =>
      import('./features/auth/login/login.component')
        .then(m => m.LoginComponent)
  },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./features/dashboard/dashboard.component')
        .then(m => m.DashboardComponent),
    canActivate: [authGuard]
  },
  {
    path: 'users',
    loadComponent: () =>
      import('./features/users/users.component')
        .then(m => m.UsersComponent),
    canActivate: [authGuard]
  },
  {
    path: '**',
    loadComponent: () =>
      import('./features/not-found/not-found.component')
        .then(m => m.NotFoundComponent)
  }
]

Every route lazy loads its component. Initial bundle contains only the bootstrap code and the first rendered route. Users, settings, and other sections load on navigation.

Add the Auth Interceptor

// src/app/core/interceptors/auth.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http'
import { inject } from '@angular/core'
import { AuthService } from '../services/auth.service'

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService)
  const token = authService.getToken()

  if (token) {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`)
    })
    return next(authReq)
  }

  return next(req)
}

Functional interceptor — no class, no interface implementation, no constructor injection. inject() works inside functional interceptors because they run in an injection context. Cleaner and less boilerplate than class-based interceptors.

Add the Auth Guard

// src/app/core/guards/auth.guard.ts
import { inject } from '@angular/core'
import { CanActivateFn, Router } from '@angular/router'
import { AuthService } from '../services/auth.service'

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService)
  const router = inject(Router)

  if (authService.isAuthenticated()) {
    return true
  }

  return router.createUrlTree(['/auth'], {
    queryParams: { returnUrl: state.url }
  })
}

Build Your First Dashboard Component

// src/app/features/dashboard/dashboard.component.ts
import { Component, inject } from '@angular/core'
import { CommonModule } from '@angular/common'
import { DashboardService } from './dashboard.service'
import { StatCardComponent } from '../../shared/components/stat-card/stat-card.component'

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, StatCardComponent],
  template: `
    <div class="container-fluid p-4">
      <div class="row mb-4">
        <div class="col">
          <h1 class="h4 mb-0">Dashboard</h1>
          <p class="text-muted small mb-0">Welcome back</p>
        </div>
      </div>

      <div class="row g-4 mb-4">
        @for (stat of stats(); track stat.id) {
          <div class="col-12 col-sm-6 col-xxl-3">
            <app-stat-card
              [label]="stat.label"
              [value]="stat.value"
              [change]="stat.change"
              [icon]="stat.icon"
            />
          </div>
        }
      </div>
    </div>
  `
})
export class DashboardComponent {
  private dashboardService = inject(DashboardService)
  stats = this.dashboardService.stats
}

@for with track — Angular 22 control flow syntax. Standalone. Signals from service. No NgModule. This is the Angular 22 pattern throughout.

Dark Mode With Bootstrap 5.3

// src/app/core/services/theme.service.ts
import { Injectable, signal } from '@angular/core'

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private _theme = signal<'light' | 'dark'>(
    (localStorage.getItem('theme') as 'light' | 'dark') ||
    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
  )

  theme = this._theme.asReadonly()

  constructor() {
    this.applyTheme(this._theme())
  }

  toggleTheme() {
    const newTheme = this._theme() === 'light' ? 'dark' : 'light'
    this._theme.set(newTheme)
    this.applyTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }

  private applyTheme(theme: 'light' | 'dark') {
    document.documentElement.setAttribute('data-bs-theme', theme)
  }
}

Signal for theme state. data-bs-theme on the root element. Bootstrap 5.3 handles all component switching automatically. Custom components use CSS custom properties to switch alongside Bootstrap.

The Complete Folder Structure

src/
  app/
    core/
      guards/
        auth.guard.ts
      interceptors/
        auth.interceptor.ts
      services/
        auth.service.ts
        theme.service.ts
    features/
      auth/
        login/
          login.component.ts
          login.component.html
      dashboard/
        dashboard.component.ts
        dashboard.service.ts
      users/
        users.component.ts
        users.service.ts
    shared/
      components/
        stat-card/
          stat-card.component.ts
        sidebar/
          sidebar.component.ts
        navbar/
          navbar.component.ts
    app.config.ts
    app.routes.ts
    app.component.ts
  styles/
    _variables.scss
    _components.scss
    _utilities.scss
  styles.scss

Core for framework infrastructure. Features for application sections. Shared for reusable components. This structure scales — add a new feature section without touching anything outside its folder.

Browse Angular 22 + Bootstrap 5.3 admin dashboard templates at LettStart Design — built with this exact structure. Use FIRST30 for 30% off.

Bootstrap 5 Grid System: The Complete Guide for 2026

Sakshi — Tue, 21 Jul 2026 05:08:54 +0000

I've been using Bootstrap's grid system since version 3. Watched it evolve from a 12-column float-based layout to a proper CSS Grid-powered system in Bootstrap 5. Most tutorials cover the basics — col-md-6, container, row. This one covers the parts developers actually get wrong and the features most people don't know exist.

The Container Options Nobody Explains Properly

Bootstrap 5 has three container types and the difference matters for layout.
.container — fixed max-width at each breakpoint. Your content has a maximum width and centers itself. Most common. Use for general page layouts.

.container-fluid — 100% width at all breakpoints. Full-width layouts. Use for dashboards where you want content to fill the screen.

.container-{breakpoint} — 100% width below the specified breakpoint, fixed max-width above it. This is the underused one.

<!-- Full width on mobile, fixed width on desktop -->
<div class="container-md">
  <!-- 100% width on xs and sm, fixed max-width on md and above -->
</div>

<!-- Full width until large screens -->
<div class="container-lg">
  <!-- Useful for dashboards that should fill tablet screens -->
</div>

For admin dashboards — container-fluid inside the main content area. For landing pages — container or container-lg. For hybrid layouts — container-{breakpoint} where the content transitions from full-width mobile to contained desktop.

Column Sizing — Beyond the Basics

Every developer knows col-md-6. Few know all the sizing options.

<!-- Auto-width — takes up as much space as content needs -->
<div class="row">
  <div class="col-auto">Auto width</div>
  <div class="col">Fills remaining space</div>
</div>

<!-- Equal width columns — no number needed -->
<div class="row">
  <div class="col">Equal</div>
  <div class="col">Equal</div>
  <div class="col">Equal</div>
</div>

<!-- Mixed — auto + fill -->
<div class="row align-items-center">
  <div class="col-auto">
    <img src="avatar.jpg" class="rounded-circle" width="40" height="40">
  </div>
  <div class="col">
    <h6 class="mb-0">User Name</h6>
    <small class="text-muted">user@email.com</small>
  </div>
  <div class="col-auto">
    <span class="badge bg-success">Active</span>
  </div>
</div>

The col-auto + col pattern is the most useful for dashboard UI — avatar with auto width, name with fill, status badge with auto width. Eliminates manual width calculation for this common pattern.

Responsive Breakpoints — The Full Picture

Bootstrap 5 breakpoints:
| Breakpoint | Class infix | Width |
|---|---|---|
| Extra small | None (xs) | < 576px |
| Small | sm | ≥ 576px |
| Medium | md | ≥ 768px |
| Large | lg | ≥ 992px |
| Extra large | xl | ≥ 1200px |
| Extra extra large | xxl | ≥ 1400px |

The one developers miss — xxl. For large monitor dashboard layouts where you want a different column count above 1400px:

<!-- 1 col mobile, 2 col tablet, 3 col desktop, 4 col large desktop -->
<div class="row g-4">
  <div class="col-12 col-md-6 col-lg-4 col-xxl-3">
    <div class="stat-card card">...</div>
  </div>
</div>

For admin dashboards displayed on large monitors — col-xxl prevents wide cards that look wrong on 1440px+ screens.

Gutters — The Bootstrap 5 Improvement

Bootstrap 5 replaced padding-based gutters with the g-* utility. Most developers know g-4 but miss the directional variants.

<!-- Horizontal gutters only — useful for tight vertical layouts -->
<div class="row gx-4">
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
</div>

<!-- Vertical gutters only — when columns wrap and you need row spacing -->
<div class="row gy-3">
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
</div>

<!-- Both directions — most common for card grids -->
<div class="row g-4">
  <div class="col-md-4">...</div>
</div>

For stat card grids — g-4 (1.5rem gap both directions). For form layouts — gx-3 gy-2 (tighter vertical, comfortable horizontal). For full-width dashboard sections — gx-0 (no horizontal gap between edge-to-edge panels).

Offset and Order — When You Need Them

Offsets push columns to the right. Useful for centering a single column or creating asymmetric layouts.

<!-- Centered single column — login page pattern -->
<div class="row justify-content-center">
  <div class="col-md-6 col-lg-4">
    <div class="card">
      <div class="card-body">
        <!-- Login form -->
      </div>
    </div>
  </div>
</div>

<!-- Offset — push column right -->
<div class="row">
  <div class="col-md-4 offset-md-4">
    <!-- Centered on md+ -->
  </div>
</div>

Order utilities reorder columns visually without changing HTML order — important for accessibility where logical reading order matters:

<!-- On mobile: image first, text second -->
<!-- On desktop: text first, image second -->
<div class="row align-items-center">
  <div class="col-12 col-md-6 order-2 order-md-1">
    <h2>Headline</h2>
    <p>Description text</p>
  </div>
  <div class="col-12 col-md-6 order-1 order-md-2">
    <img src="illustration.svg" class="img-fluid">
  </div>
</div>

Screen readers follow DOM order — image first in this example. Visual layout shows text first on desktop. Both accessibility and design requirements satisfied.

Nested Grids for Complex Layouts

Nested rows inside columns give you 12 more columns to work with inside any column.

<div class="row g-4">
  <!-- Main content — 8 columns -->
  <div class="col-lg-8">
    <div class="row g-3">
      <!-- Nested 4 stat cards in the 8-column area -->
      <div class="col-6">
        <div class="stat-card card">
          <div class="card-body">
            <p class="text-muted small mb-1">Revenue</p>
            <h3>$48,295</h3>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="stat-card card">
          <div class="card-body">
            <p class="text-muted small mb-1">Users</p>
            <h3>12,847</h3>
          </div>
        </div>
      </div>
      <!-- Full-width chart below stat cards -->
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <canvas id="revenueChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Sidebar — 4 columns -->
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-body">
        <!-- Recent activity feed -->
      </div>
    </div>
  </div>
</div>

Nested grids are the correct approach for complex dashboard layouts — not position: absolute or manual pixel calculations.

The Dashboard Layout Pattern

A complete Bootstrap 5 admin dashboard layout using the grid properly:

<div class="dashboard-wrapper d-flex">
  <!-- Sidebar — fixed width, not part of grid -->
  <aside class="sidebar">
    <!-- Navigation -->
  </aside>

  <!-- Main content area — fills remaining space -->
  <main class="main-content flex-grow-1">
    <!-- Top navbar -->
    <nav class="navbar">...</nav>

    <!-- Page content — fluid container -->
    <div class="container-fluid p-4">

      <!-- Page header row -->
      <div class="row mb-4 align-items-center">
        <div class="col">
          <h1 class="h4 mb-0">Dashboard</h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 small">
              <li class="breadcrumb-item">Home</li>
              <li class="breadcrumb-item active">Dashboard</li>
            </ol>
          </nav>
        </div>
        <div class="col-auto">
          <button class="btn btn-primary">
            <i class="bx bx-plus me-2"></i>New Report
          </button>
        </div>
      </div>

      <!-- Stat cards row -->
      <div class="row g-4 mb-4">
        <div class="col-12 col-sm-6 col-xxl-3">
          <div class="stat-card card border-0 shadow-sm">...</div>
        </div>
        <div class="col-12 col-sm-6 col-xxl-3">
          <div class="stat-card card border-0 shadow-sm">...</div>
        </div>
        <div class="col-12 col-sm-6 col-xxl-3">
          <div class="stat-card card border-0 shadow-sm">...</div>
        </div>
        <div class="col-12 col-sm-6 col-xxl-3">
          <div class="stat-card card border-0 shadow-sm">...</div>
        </div>
      </div>

      <!-- Charts and table row -->
      <div class="row g-4">
        <div class="col-12 col-xl-8">
          <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-0 pt-4 px-4">
              <h5 class="card-title mb-0">Revenue Overview</h5>
            </div>
            <div class="card-body">
              <canvas id="revenueChart" height="300"></canvas>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-4">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-0 pt-4 px-4">
              <h5 class="card-title mb-0">Recent Activity</h5>
            </div>
            <div class="card-body">
              <!-- Activity feed -->
            </div>
          </div>
        </div>
      </div>

    </div>
  </main>
</div>

This is a complete, responsive dashboard layout. Mobile — single column, sidebar hidden. Tablet — sidebar visible, 2-column stat cards. Desktop — 4-column stat cards, 8/4 split for chart and activity feed. Large desktop — same layout with col-xxl-3 giving 4 equal stat cards.
No custom CSS for the layout. Pure Bootstrap 5 grid. This is what the grid is designed for.
Browse Bootstrap 5 admin dashboard templates with proper grid implementation at LettStart Design — Bootstrap 5.3, zero jQuery, Lighthouse above 80. Use FIRST30 for 30% off.

Next.js 16: React 19.2 Features, Breaking Changes, and How to Upgrade

Sakshi — Sat, 18 Jul 2026 08:44:56 +0000

React 19.2

Next.js 16 ships with React 19.2. Three features worth knowing:
View Transitions — animate elements that update inside a Transition or navigation. The transitionTypes prop on <Link> lets you specify which animation plays per navigation:

<Link href="/about" transitionTypes={['slide-left']}>
  About
</Link>

<Link href="/back" transitionTypes={['slide-right']}>
  Go Back
</Link>

Different animations for different navigation directions. Requires CSS @view-transition rules to define the actual animations.

useEffectEvent() — extract non-reactive logic from Effects into reusable event functions. Solves the long-standing problem of needing values in an Effect without re-running the Effect when those values change.

<Activity/> — render background UI with display: none while maintaining state and cleaning up Effects. Useful for keeping component state alive for routes that aren't currently visible.

Developer Experience

Server Function logging — terminal now logs every Server Function call during development. Shows function name, arguments, and execution time. No more guessing whether your server action ran or how long it took.
Hydration Diff Indicator (16.2) — when a hydration mismatch occurs the error overlay shows a + Client / - Server diff. Previously you got a confusing wall of text. Now it's immediately clear.

Error cause chains (16.2) — the error overlay shows Error.causechains up to 5 levels deep. When errors wrap other errors you see the full chain, not just the outermost error.

--inspect for next start (16.2) — attach the Node.js debugger to your production server. 16.1 had this for next dev. 16.2 extends it to production.

next upgrade CLI (16.1) — run next upgrade to automatically update Next.js, React dependencies, and TypeScript types to the latest stable release. No more manually matching version numbers.

ImageResponse 2–20x faster (16.2) — significant if you're generating OG images dynamically. Basic images are 2x faster. Complex images up to 20x faster.

proxy.ts replaces middleware.ts — rename middleware.ts to proxy.ts and the exported function to proxy. Logic stays identical. middleware.ts still works but is deprecated. The new name makes it clearer this file controls the network boundary of your application.

Improved build and dev logging — build output now shows time taken per step. Dev logs show compile time and render time separately so you can see where time is actually spent.

Breaking Changes

These are the ones most likely to affect existing projects.

Async params required — params and searchParams must be awaited. The sync access pattern is removed.

// Before Next.js 16 — broken now
export default function Page({ params }) {
  const { id } = params // throws in Next.js 16
}

// Next.js 16 — required
export default async function Page({ params }) {
  const { id } = await params
}

Async cookies/headers — await cookies(), await headers(), await draftMode() required. Same pattern as params.

Node.js 20.9+ required — Node.js 18 is dropped. Check your hosting environment before upgrading.

Parallel routes require default.js — all parallel route slots need explicit default.js files. Builds fail without them. Create a default.js that calls notFound() or returns null.

experimental.ppr flag removed — replaced by cacheComponents: true in config.

next lint command removed — run ESLint directly. next build no longer runs linting.

AMP support removed — all AMP APIs and configs gone. No replacement.
serverRuntimeConfig and publicRuntimeConfig removed — use .env files instead.

Image defaults changed — images.minimumCacheTTL changed from 60s to 4 hours. images.qualities default changed to [75]. images.imageSizes no longer includes 16.

Upgrading

The automated upgrade CLI handles most breaking changes:

npx @next/codemod@canary upgrade latest

This runs codemods for async params, cookies, headers, and other mechanical changes. Review the output and handle edge cases manually. Most projects migrate without major issues.

If you're starting a fresh Next.js 15/16 project, LettStart Design has admin dashboard and landing page templates built on Next.js + Bootstrap 5 — already TypeScript-first and component-based. Saves a few days of boilerplate.

Next.js 16: Every Change That Actually Matters for Developers

Sakshi — Sat, 18 Jul 2026 08:30:54 +0000

Next.js 16 shipped October 2025. Three minor releases followed — 16.1 in December, 16.2 in March 2026, 16.3 in June 2026. I've gone through every release note so you don't have to. Here's what actually matters.

Turbopack Is Now the Default

Webpack is out. Turbopack — built in Rust — is the stable default for both development and production. No configuration needed. You get it automatically on upgrade.
Real numbers from actual projects — production builds dropped from 24.5 seconds to 5.7 seconds. Fast Refresh is up to 10x faster. If you have a custom webpack config — run next dev --webpack or next build --webpack to keep it. Everyone else just upgrades and it works.
16.1 added Turbopack File System Caching for next dev — stores compiler artifacts on disk between restarts. Large projects see significant improvement on cold starts after the first run. 16.3 added Persistent Cache for Builds — reusable cache speeds up successive production builds. Also in 16.3: a Rust port of the React Compiler (experimental) that's faster than the Babel version.

Caching Is Now Explicit

This is the biggest architectural change in the 16.x line and the one that will affect the most codebases.
Previous Next.js versions had implicit caching. Fetch was cached by default. People accidentally cached things they didn't want cached, got stale data in production, and spent hours debugging behavior that was hidden in framework internals. The complaint was constant and justified.
Next.js 16 fixes this. Everything is dynamic by default. If you want caching you opt in explicitly with the use cache directive:

// next.config.ts — enable Cache Components
const nextConfig = {
  cacheComponents: true
}

// StaticProductGrid.tsx — opt into caching explicitly
'use cache'

export async function StaticProductGrid() {
  const products = await db.products.findMany()
  // Renders once, output cached
  // Invalidate with revalidateTag() or updateTag()
  return (
    <div className="row g-4">
      {products.map(p => (
        <div key={p.id} className="col-md-4">
          <ProductCard product={p} />
        </div>
      ))}
    </div>
  )
}

// DynamicUserGreeting.tsx — no directive, runs on every request
export async function UserGreeting({ userId }: { userId: string }) {
  const user = await getUser(userId)
  return <p>Welcome back, {user.name}</p>
}

The caching boundary is visible in the code — not hidden in fetch options or config files. This is a genuine improvement in predictability.

Two new caching APIs came with this:
updateTag() — Server Actions only. Provides read-your-writes semantics. User submits a form, you update the database, call updateTag(), user immediately sees their changes reflected. No stale data on the next render.

'use server'
import { updateTag } from 'next/cache'

export async function updateUserProfile(userId: string, data: ProfileData) {
  await db.users.update(userId, data)
  updateTag(`user-${userId}`) // cache expires, fresh data on next render
}

refresh() — Server Actions only. Refreshes uncached dynamic data without touching the cache at all. Notification counts, live metrics, status indicators — things that need to update after an action but aren't cached.

'use server'
import { refresh } from 'next/cache'

export async function markNotificationRead(id: string) {
  await db.notifications.markAsRead(id)
  refresh() // refreshes dynamic data displayed elsewhere on the page
}

revalidateTag() also changed — it now requires a cacheLife profile as the second argument for stale-while-revalidate behavior. The single-argument form still works but is deprecated.

// Updated signature
revalidateTag('blog-posts', 'max') // SWR with max profile
revalidateTag('news-feed', 'hours')
revalidateTag('products', { expire: 3600 }) // custom expiry

Routing and Navigation

Layout deduplication — when prefetching multiple links with a shared layout, the layout downloads once instead of once per link. A page with 50 product links previously downloaded the shared layout 50 times. Now once. 50% reduction in network transfer for shared layouts.
Incremental prefetching — Next.js only prefetches parts not already in cache. Cancels requests when links leave the viewport. Re-prefetches when link data is invalidated. More individual requests but dramatically lower total transfer size.
Instant Navigations (16.3) — the largest routing change in the 16.x line. Partial prefetching caches a reusable shell per route on the client. Click a link and the shell renders immediately while the rest streams in. Next.js apps now feel like SPAs for navigation without giving up SSR benefits. No configuration — works automatically once enabled.

Rendering 25–60% Faster (16.2)

The team contributed a change to React that makes Server Components payload deserialization up to 350% faster. The previous implementation used a JSON.parse reviver callback that crosses the V8 C++/JavaScript boundary for every key-value pair in the parsed JSON. Even a no-op reviver makes JSON.parse roughly 4x slower than without one.

New approach — plain JSON.parse() followed by a recursive walk in pure JavaScript. Eliminates the boundary-crossing overhead entirely.

Real numbers from the 16.2 release notes:

Server Component table with 1000 items: 19ms → 15ms (26% faster)
Server Component with nested Suspense: 80ms → 60ms (33% faster)
Payload CMS homepage: 43ms → 32ms (34% faster)
Payload CMS with rich text: 52ms → 33ms (60% faster)

Automatic. No code changes required.

Learn More

nextjs.org/blog/next-16
nextjs.org/blog/next-16-1
nextjs.org/blog/next-16-2
nextjs.org/blog/next-16-3
nextjs.org/docs/app/guides/upgrading/version-16

If you're looking for Next.js 15/16 templates already built with
App Router, async params, and TypeScript throughout
— browse LettStart Design.
Use FIRST30 for 30% off.

Angular 22 vs React 19: Which Framework for Your Next Project

Sakshi — Thu, 09 Jul 2026 13:21:03 +0000

Angular 22 and React 19 are both excellent choices in 2026. But "both are good" isn't helpful when you're making a real decision. This post gives you a practical framework for choosing between them — based on project type, team experience, and long-term maintenance, not hype.

The Fundamental Difference

Angular is a complete framework. React is a library.

This single distinction drives almost every other difference between them.

Angular ships with routing, HTTP client, form handling, dependency injection, state management patterns, and a CLI — all official, all integrated, all following one opinionated architecture.

React gives you component rendering. Everything else — routing, state, HTTP, forms — you choose yourself from the ecosystem. That's freedom and complexity at the same time.

What Angular 22 Brings to the Table

Signals as Default Reactivity

Angular 22 makes Signals the primary state management approach. Signals replace much of what you'd previously use RxJS for in component state — cleaner, simpler, less boilerplate.

// Angular 22 Signals
count = signal(0);
doubled = computed(() => this.count() * 2);

Standalone Components Throughout

NgModule is no longer the recommended architecture. Every component is standalone by default — simpler imports, cleaner lazy loading, less boilerplate.

New Control Flow Syntax

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
}
@if (isAdmin()) {
  <admin-panel />
}

Faster rendering, better tree-shaking, more readable templates.

Strong TypeScript Integration

Angular has always been TypeScript-first. In Angular 22, strict mode is the default — catching errors at compile time rather than runtime.

What React 19 Brings to the Table

The React Compiler

React 19 ships with the React Compiler — automatic memoization without useMemo and useCallback everywhere. A significant reduction in boilerplate for performance optimization.

Server Components Stable

React Server Components are now stable in React 19. Combined with Next.js 15, this enables genuinely fast server-rendered React apps with minimal client JavaScript.

The use Hook

const data = use(fetchUserData(userId));

Cleaner async data fetching directly in components — no useEffect required for data loading.

Actions API

Form handling and server mutations simplified through the new Actions API — less manual state management for loading, error, and success states.

Head-to-Head Comparison

Factor	Angular 22	React 19
Learning Curve	Steeper initially with more built-in concepts to learn	Easier to start, but complexity grows as apps scale
Architecture	Opinionated framework with consistent project structure	Flexible library with architecture decided by the team
TypeScript	First-class support built into the framework	Optional, but widely adopted in production apps
State Management	Signals provide built-in reactive state management	Requires external libraries like Redux, Zustand, or Context API
Routing	Official Angular Router included	Uses React Router or framework-based routing like Next.js
Server-Side Rendering (SSR)	Angular Universal offers SSR support	Next.js 15 provides a mature SSR and React Server Components (RSC)
Admin Dashboards	Excellent choice for enterprise dashboards	Excellent choice with a large ecosystem of dashboard templates
Template Ecosystem	Mature ecosystem with fewer but high-quality templates	Larger ecosystem with thousands of community templates
Job Market	Strong demand in enterprise and large organizations	Larger overall market across startups and enterprises
Bundle Size	Larger initial bundle due to the full framework	Generally smaller, especially with React Server Components (RSC)

When to Choose Angular 22

Enterprise and Large Teams

Angular's opinionated architecture means every developer writes code the same way. In a team of 10+ developers, this consistency is worth more than flexibility. Code reviews are faster, onboarding is predictable, and the codebase stays maintainable over years.

Long-Term Maintained Applications

If your application will be maintained for 5+ years, Angular's structured approach pays off. The framework makes architectural decisions for you — which means fewer debates and less technical debt accumulation over time.

Admin Dashboards and Internal Tools

Angular's component architecture, built-in routing, and strong TypeScript integration make it excellent for complex admin dashboards with many interconnected views, role-based permissions, and data-heavy tables.

When Your Team Already Knows Angular

Don't switch frameworks because React is more popular. If your team has Angular expertise, an Angular project will ship faster and stay more maintainable than a React project written by developers learning React on the job.

When to Choose React 19

Modern SaaS Products with SSR Needs

React 19 with Next.js 15 is the most mature SSR solution available. For SaaS products where SEO and initial page load performance matter, Next.js is hard to beat.

Larger Ecosystem Requirements

React's ecosystem is larger. More UI component libraries, more third-party integrations, more tutorials, more developers familiar with it. If you're integrating many third-party tools, React probably has better support.

Startup Speed and Flexibility

React's minimal surface area means you start faster and make architectural decisions as you go. For early-stage startups where requirements change frequently, this flexibility is an advantage.

Next.js Landing Pages and Marketing Sites

React with Next.js is the dominant choice for marketing sites, landing pages, and content-heavy applications where SSR and SEO are critical.

The Honest Verdict

Neither framework is objectively better. The right choice depends entirely on your context.
Choose Angular 22 if:

Your team knows Angular
You're building an enterprise or long-term maintained app
You want consistent architecture enforced by the framework
You're building a complex admin dashboard

Choose React 19 if:

Your team knows React
You're building a Next.js SSR application
You need the largest possible ecosystem
You're building a modern SaaS with marketing pages

What About the Template Decision?

If you've chosen Angular, you want a template built with Angular 22 — Signals, standalone components, new control flow syntax, Bootstrap 5.3. Using an Angular 17 template for an Angular 22 project means refactoring before you even start.

If you've chosen React, you want a Next.js 15 template with App Router, Server Components support, and TypeScript throughout.
For production-ready templates on both stacks, check out LettStart Design's Angular and React template collection — Angular 22 and React 19 templates built with modern standards, TypeScript-first, and zero jQuery.

How to Pick the Right Admin Dashboard for Your SaaS

Sakshi — Mon, 06 Jul 2026 05:16:51 +0000

Most SaaS founders and developers spend too long choosing an admin dashboard template. They compare screenshots, read feature lists, and still end up picking the wrong one. Here's a practical framework for making the right choice fast.

Start With Your Stack

The first filter is your frontend framework. Don't buy an Angular template if your SaaS is built on React. Don't pick a Vue template because it looks nice if your team has zero Vue experience.
Match the template to your stack:

Angular SaaS → Angular + Bootstrap 5 template
React SaaS → React or Next.js template
Server-rendered app → HTML + Bootstrap template
Next.js SaaS → Next.js 15 template with App Router support

This eliminates 80% of options immediately.

Define Your Dashboard Type

Not all admin dashboards are the same. There are three common types:

Analytics Dashboard

Heavy on charts, graphs, and data visualization. You need a template with multiple chart types pre-integrated — line, bar, pie, area charts. ApexCharts or Recharts integration is a must.

CRM or Management Dashboard

Heavy on data tables, filters, search, and forms. You need a template with a solid datatable component — sortable columns, pagination, row selection, bulk actions.

SaaS Settings Panel

Lighter UI — user management, billing, account settings, role permissions. You need clean form components, modal dialogs, and a well-structured sidebar navigation.

Know which type your SaaS needs before evaluating templates.

Check These Before Buying

Code Quality

Download a free version or check GitHub if available. Look at the folder structure. If everything is in one giant component file — walk away.

Last Update Date

Templates not updated in 12+ months will have dependency issues. Check the changelog or last commit date.

Live Demo Performance

Open the live demo and run Lighthouse. A score below 60 on performance means the template itself is bloated — you'll be fighting it from day one.

Mobile Responsiveness

Open the live demo on your phone. If the sidebar doesn't collapse cleanly or tables overflow — it's not production ready.

Documentation Quality

Poor documentation means hours of reverse-engineering. Good documentation means a README with setup instructions, component list, and customization guide.

Free vs Premium

Free templates are fine for internal tools and MVPs. For customer-facing SaaS products or anything you're charging money for — invest in a premium template.

The math is simple. A developer costs $50–150/hour. If a $20 premium template saves 10 hours of UI work, the ROI is obvious.
What premium templates give you over free:

Active maintenance and updates
Support when something breaks
More pages and components out of the box
Cleaner, more production-ready code

The Framework Decision

If you haven't chosen a framework yet and are evaluating templates first — here's the short version:

Choose Angular if:

Your team knows Angular
You're building an enterprise SaaS
You want a strongly opinionated, structured framework

Choose React/Next.js if:

Your team knows React
You want a large ecosystem of UI libraries
You're building a modern SaaS with SSR needs

Don't choose based on the template. Choose based on your team's expertise.

Conclusion

Picking the right admin dashboard template comes down to three things — matching your stack, understanding your dashboard type, and checking code quality before committing.
For SaaS teams building with Angular or React, check out LettStart Design's admin dashboard template collection — built with Angular 22, React 19, Bootstrap 5.3, TypeScript-first, and production-ready out of the box.

7 Must-Have Features in a React Admin Dashboard Template

Sakshi — Mon, 06 Jul 2026 05:07:13 +0000

Picking a React admin dashboard template is harder than it looks. There are hundreds of options — free, premium, open source — and most of them look great in screenshots but fall apart in real projects. Here are the 7 features that actually matter before you buy or download one.

Component-Based Architecture

A good React admin template is built around reusable components — not monolithic pages. Every UI element should be its own component: sidebar, navbar, card, chart widget, data table.
This matters because you will customize. If the template is built as one giant page with inline styles everywhere, customization becomes a nightmare. Look for a clear folder structure like:

src/
  components/
    Sidebar/
    Navbar/
    Charts/
    Tables/
  pages/
    Dashboard/
    Users/
    Settings/

If the template doesn't follow this structure, skip it.

TypeScript Support

TypeScript is non-negotiable in 2026 for production React applications. A template without TypeScript means you're adding type safety yourself — which defeats the purpose of starting with a template.
Check that the template ships with:

.tsx files throughout
Proper interface definitions for props
No any types in core components

React 19 Compatibility

React 19 introduced significant changes including the new compiler, improved server components, and the use hook. Your template should be built on React 19 — not React 16 or 17 which are still common in older templates.
Check the package.json before purchasing:

"dependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

Responsive Design Out of the Box

Your admin dashboard will be accessed on tablets and sometimes mobile. A template that only works on desktop is a liability. Test the live demo on your phone before buying — not just on desktop.
Look for:

Collapsible sidebar on mobile
Responsive data tables
Touch-friendly navigation
No horizontal scroll on small screens

Authentication Pages Included

Every admin dashboard needs login, register, and forgot password pages. A good template ships these ready to connect to your backend — not as an afterthought.
Must-have auth pages:

Login with form validation
Register page
Forgot password flow
404 and error pages

Chart Integration

Dashboards without charts are just forms. A production-ready template should include working chart integrations — not placeholder images.
Most reliable chart libraries for React in 2026:

Recharts — lightweight, composable
ApexCharts — feature-rich, good defaults
Chart.js — mature, well-documented

The template should have at least line charts, bar charts, and pie/donut charts pre-integrated and working with sample data.

Active Maintenance and Documentation

A template abandoned in 2022 is a risk. Check:

When was the last update?
Is there proper documentation?
Are React and dependency versions current?
Does the seller respond to issues?

A template with outdated dependencies means security vulnerabilities and compatibility issues with newer packages you'll want to add.

The Checklist Before You Buy

Before purchasing any React admin template run through this:

✅ Component-based folder structure
✅ Built entirely with TypeScript
✅ React 19 listed in package.json
✅ Fully responsive and tested on mobile devices
✅ Login, registration, and authentication pages included
✅ Charts integrated with real or dynamic data
✅ Updated within the last 6 months
✅ Comprehensive documentation available

Conclusion

Most React admin templates look good in screenshots. What separates a template that saves you weeks from one that costs you weeks is the code quality underneath.
For production-ready React and Next.js admin dashboard templates built with these exact standards, check out LettStart Design's React template collection — TypeScript-first, React 19 compatible, fully responsive, and actively maintained.

Bootstrap 5 vs Tailwind CSS 2026: Which Should You Pick?

Sakshi — Fri, 03 Jul 2026 12:34:37 +0000

Bootstrap 5 and Tailwind CSS are the two most popular CSS frameworks in 2026. If you're starting a new project and trying to decide between them, this guide gives you an honest comparison based on real-world usage — not just feature lists.

The Core Difference

Bootstrap 5 gives you pre-built components. Tailwind CSS gives you utility classes to build your own. That's the fundamental difference and it drives every other comparison.

With Bootstrap you get a navbar, modal, card, and dropdown out of the box. With Tailwind you build those yourself using utility classes like flex, px-4, bg-blue.

Neither is wrong. They solve different problems for different teams.

When Bootstrap 5 Makes More Sense

You Need to Ship Fast

Bootstrap's pre-built components mean you spend less time on UI and more time on business logic. For admin dashboards, CRM panels, and internal tools — where UI consistency matters more than pixel-perfect custom design — Bootstrap is the faster choice.

Your Team Knows HTML and CSS

Bootstrap has a shallow learning curve. Any developer who knows basic HTML and CSS can pick up Bootstrap in a day. Tailwind requires understanding its utility-first philosophy and memorizing class names.

You're Building an Admin Dashboard

Admin dashboards need data tables, modals, dropdowns, sidebars, and form components — all of which Bootstrap provides out of the box. Building these from scratch with Tailwind takes significantly more time.

You Want Predictable Output

Bootstrap's components look consistent across browsers and screen sizes without extra configuration. Tailwind output depends heavily on how well your team implements it.

When Tailwind CSS Makes More Sense

You're Building a Custom Marketing Site

If your design is highly custom — unique layouts, non-standard components, pixel-perfect design system — Tailwind gives you more flexibility without fighting Bootstrap's default styles.

You Have a Design System Already

If your team has a defined design system with specific tokens, spacing scales, and color palettes, Tailwind's configuration file maps directly to those values.

You're Building with React or Next.js

Tailwind pairs naturally with component-based frameworks where each component manages its own styles. The utility classes live directly in JSX which keeps styles co-located with markup.

Performance Comparison

Both frameworks ship small bundles in production when configured correctly.
Bootstrap 5 with PurgeCSS or tree-shaking: ~20–30kb

Tailwind CSS with JIT mode: ~5–15kb

Tailwind wins on bundle size but the difference is negligible for most projects. Page performance is rarely bottlenecked by CSS size in 2026.

The Angular Factor

If you're building with Angular, Bootstrap 5 has a clear advantage. Angular's component architecture pairs naturally with Bootstrap's component model. Libraries like NgBootstrap and ng-bootstrap provide native Angular implementations of every Bootstrap component.
Tailwind with Angular works but requires more configuration and there's no equivalent native component library with the same maturity as NgBootstrap.

The React/Next.js Factor

With React and Next.js both frameworks work well. Tailwind has gained significant ground here — shadcn/ui, which is built on Tailwind, has become one of the most popular React component libraries in 2026.
For React admin dashboards, Bootstrap 5 still works perfectly and has mature component libraries. But if you're using shadcn/ui or Radix UI, Tailwind is the natural choice.

Honest Verdict

Use Case	Recommended
Angular admin dashboard	Bootstrap 5
React SaaS landing page	Tailwind CSS
Next.js marketing site	Tailwind CSS
Internal CRM or ERP panel	Bootstrap 5
Rapid prototyping	Bootstrap 5
Custom design system	Tailwind CSS

Conclusion

Bootstrap 5 wins for speed, consistency, and admin dashboard use cases. Tailwind wins for custom design and modern React ecosystems.
If you're building with Angular, Bootstrap 5 is the clear choice in 2026. If you're building a custom Next.js marketing site, go with Tailwind.

For production-ready Bootstrap 5 and Angular templates that you can deploy today, check out LettStart Design's Bootstrap and Angular template collection — built with Bootstrap 5.3, zero jQuery, and modern frontend best practices.