How to Set Up a Bootstrap Admin Dashboard in 30 Minutes

Download the template ZIP file from LettStartDesign. Once downloaded, extract it to your projects folder — not your desktop, not your downloads folder. Put it somewhere with a clean path and no spaces in the directory name. Spaces in file paths cause obscure errors in some npm scripts that take a while to diagnose.

# Good — clean path, no spaces
/Users/yourname/projects/my-dashboard

# Avoid — spaces cause path issues in some environments
/Users/your name/My Projects/Dashboard Template

Inside the extracted folder you should see a package.json at the root level. If you don't, you've extracted into a subfolder — navigate one level deeper until you find it.

Open your terminal, navigate to the template folder, and run the install command. This is where developers who skipped the prerequisites section hit their first errors — incompatible Node version, missing global packages, or npm permission issues.

# Navigate to the template folder
cd /path/to/your/dashboard-template

# Install all dependencies
npm install

This will install everything listed in package.json — Bootstrap, SCSS compiler, any JavaScript plugins, and the build tools. It takes 2–4 minutes depending on your connection speed.

Once dependencies are installed, start the development server. The exact command depends on the template — check your package.json scripts section, but it's almost always one of these:

# Most common — check your package.json to confirm
npm start

# Or for SCSS-only templates
npm run dev

# Or gulp-based templates
npm run gulp

Your browser should open automatically at http://localhost:3000 or http://localhost:8080. If it doesn't, open it manually — the terminal output will tell you which port it's running on.

While the server is running, any change you make to an HTML page or SCSS file will trigger an automatic recompile and browser refresh. This is the live reload feature — you don't need to manually refresh the browser every time you make a change. If live reload stops working mid-session, restart the dev server with Ctrl+C followed by npm start again.

Before you start customizing, spend five minutes understanding the folder structure. This prevents the most common customization mistake — editing compiled files instead of source files and then wondering why your changes disappear when you rebuild.

dashboard-template/
├── src/                  # Source files — edit these
│   ├── scss/             # SCSS source — your styling goes here
│   │   ├── variables.scss  # Colors, fonts, spacing
│   │   └── main.scss     # Main stylesheet imports
│   └── js/               # JavaScript source files
├── dist/                 # Compiled output — don't edit directly
│   ├── css/              # Compiled CSS (auto-generated)
│   └── js/               # Compiled JS (auto-generated)
├── pages/                # HTML page files
└── package.json          # Dependencies and scripts

The rule: always edit source files in src/, never in dist/. The build process overwrites dist/ automatically. Any changes you make directly in dist/ will be lost on the next build.

The pages/ folder is where your HTML files live. Each page corresponds to a screen in the dashboard — the main dashboard view, analytics, user management, login, and so on. When adding a new page to your project, duplicate the closest existing page as a starting point rather than creating one from scratch. The navigation, header, and sidebar are already wired up in each page file — duplicating saves you from reconnecting all of that manually.

One more thing worth checking early: the package.json scripts section. Open it and read through the available commands — there's usually a build script for production output, a watch script for SCSS-only compilation, and sometimes a lint script for code quality checks. Knowing these exist before you need them saves time later.

Open src/scss/variables.scss — this is where all design tokens live. Changing your primary color, sidebar background, font family, and spacing system all happens here. One file, clean changes, no hunting through thousands of lines of CSS.

// src/scss/variables.scss

// Primary brand color — change this first
$primary: #fd4766;

// Sidebar colors
$sidebar-bg: #0d0d0d;
$sidebar-text: #e8e8e8;

// Typography
$font-family-base: 'Inter', sans-serif;
$font-size-base: 0.9375rem;

Save the file and your dev server will automatically recompile the SCSS and refresh the browser. You should see your brand colors applied across the entire dashboard instantly.