Loading

How to Use and Edit a Bootstrap Template, Step by Step

By Manob Editorial ·

How to Use and Edit a Bootstrap Template, Step by Step

To use a Bootstrap template, unzip it, open the folder in VS Code and preview it with the Live Server extension. Edit text, images and links in the .html files. Change colors in a custom.css loaded after Bootstrap, or by setting Sass variables such as $primary and recompiling. Then upload the folder to any static host.

Code and class names below are for Bootstrap 5.3, checked against the official docs (v5.3.8) on 13 October 2026. Bootstrap 6 is in alpha; templates sold today are built on version 5 or earlier.

What's inside a Bootstrap template?

Every author organizes files a little differently, but most templates look like this:

my-template/
├── index.html            home page
├── about.html, contact.html …
├── assets/
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   └── style.css     the template's own styles
│   ├── js/
│   │   ├── bootstrap.bundle.min.js
│   │   └── main.js       sliders, menus, counters
│   ├── img/
│   ├── vendor/           third-party plugins (swiper, aos, glightbox…)
│   └── scss/             only in some templates
└── documentation/

To find the Bootstrap version, open bootstrap.min.css. The comment at the top reads something like Bootstrap v5.3.8, or the CDN link in the page head names it (bootstrap@5.3.8). This guide assumes version 5. Bootstrap 4 templates use different class names in several places.

How do you open and preview the template?

  1. Unzip the download. If it holds a documentation folder and a separate template folder, work in the template folder.
  2. In VS Code, choose File → Open Folder and select the template's root folder, the one with index.html.
  3. Install the Live Server extension by Ritwick Dey.
  4. Click Go Live in the status bar, or right-click index.html and choose Open with Live Server. The page reloads every time you save.

Why not just double-click index.html? Opening the file directly uses a file:// address. Browsers block some requests from file:// pages, so scripts that load JSON or other files can fail there and work fine on a real server.

How do you change text, images and links?

  1. Text: edit it straight in the HTML. Use Find in Files (Ctrl+Shift+F, or Cmd+Shift+F on a Mac) to locate a phrase across every page.
  2. Header and footer: in a static template they're copied into every .html file. Change one, then use Find and Replace across files to update the rest.
  3. Images: save your image into assets/img/ and point the src at it. Match the original's aspect ratio so the layout holds, compress large photos, and write a real alt description.
  4. Links: update each href in the navigation, and move class="active" and aria-current="page" to the current page's link on every page.
  5. Head tags: set a unique <title> and <meta name="description"> on each page, and swap in your own favicon.
<!-- before -->
<h1 class="display-4 fw-bold">We build digital products</h1>
<img src="assets/img/hero.jpg" class="img-fluid" alt="hero">

<!-- after -->
<h1 class="display-4 fw-bold">Plumbing repairs in Austin, same day</h1>
<img src="assets/img/van.jpg" class="img-fluid" alt="Our service van outside a client's home">

How do you change the colors properly?

Bootstrap 5.3 gives you two ways to do it. Many templates also hard-code their own brand color in style.css, so check that file first. Search it for the template's main hex code, or for a variable such as --theme-color, and replace it.

Option 1: override CSS variables (no build step)

Create assets/css/custom.css and load it after bootstrap.min.css and style.css. Bootstrap's CSS variables let you change colors without recompiling:

:root {
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #115e59;
  --bs-link-hover-color-rgb: 17, 94, 89;
}

/* .btn-primary has its own fixed values, so override them too */
.btn-primary {
  --bs-btn-bg: #0f766e;
  --bs-btn-border-color: #0f766e;
  --bs-btn-hover-bg: #115e59;
  --bs-btn-hover-border-color: #115e59;
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
  --bs-btn-active-bg: #134e4a;
  --bs-btn-active-border-color: #134e4a;
  --bs-btn-disabled-bg: #0f766e;
  --bs-btn-disabled-border-color: #0f766e;
}

Why the extra button rule? Utilities such as .bg-primary and .text-primary read --bs-primary-rgb, so they follow your new color. .btn-primary doesn't: Sass writes its --bs-btn-* values as fixed hex codes when Bootstrap is compiled. Other components keep the default blue too, including outline buttons, checked checkboxes, form focus rings, nav pills, active pagination and list-group items, and progress bars, so this option is a partial recolor. Use Option 2 when you need all of them. The button docs list every --bs-btn-* variable. Links and nav links read --bs-link-color and --bs-link-color-rgb, which is why both are set. If the template has dark sections (data-bs-theme="dark"), Bootstrap redefines the link variables there, so set them again under [data-bs-theme=dark], ideally with a lighter shade.

Option 2: change Sass variables and recompile (the clean way)

If the template ships an scss/ folder, or you're willing to add one, Sass regenerates every component with your color, including hover shades and button states. Bootstrap's Sass docs describe this setup:

# one-time setup in the template folder
npm install bootstrap@5.3.8
npm install -g sass
// scss/custom.scss
// set overrides first; Bootstrap's !default values won't replace them
$primary: #0f766e;
$font-family-sans-serif: "Inter", system-ui, sans-serif;

@import "../node_modules/bootstrap/scss/bootstrap";

// your own rules after the import
sass --watch scss/custom.scss assets/css/bootstrap.custom.css

Then replace the bootstrap.min.css link with your compiled bootstrap.custom.css, since it now contains all of Bootstrap. (The different name keeps it from overwriting the hand-written custom.css from Option 1.) Recent Dart Sass versions may print deprecation warnings; Bootstrap's docs say they don't stop compilation.

How does the grid work when you change a layout?

Bootstrap's grid is 12 columns inside .container → .row → .col-*. Breakpoints start at 576px (sm), 768px (md), 992px (lg), 1200px (xl) and 1400px (xxl). A class applies from its breakpoint upward. This row shows one card per row on phones, two on tablets and three on desktops:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">…card…</div>
    <div class="col-12 col-md-6 col-lg-4">…card…</div>
    <div class="col-12 col-md-6 col-lg-4">…card…</div>
  </div>
</div>

To move from three columns to four, change col-lg-4 to col-lg-3 (12 ÷ 4). g-4 sets the gutter between cards, and order-* classes reorder columns at a breakpoint.

How do you add a new page?

  1. Copy the existing page closest to what you need, for example about.html to services.html. The head, header, footer and scripts come along with it.
  2. Replace the content between the header and footer with your new sections.
  3. Give the page its own <title> and meta description.
  4. Add the new link to the navigation in every .html file, and mark it active on the new page.

How do you add Bootstrap components?

Copy the markup from the component docs and adjust the IDs. Interactive components such as the accordion, modal, dropdown, carousel and tooltip need Bootstrap's JavaScript. Make sure bootstrap.bundle.min.js, which includes Popper, loads once before </body>. Tooltips and popovers are opt-in: you initialize them with a short script.

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#q1" aria-expanded="true" aria-controls="q1">
        Do you offer emergency call-outs?
      </button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
      <div class="accordion-body">Yes, 24/7 within the city limits.</div>
    </div>
  </div>
</div>

How do you remove unused CSS and JavaScript?

  • Delete demo pages you won't use, and their links.
  • For each vendor plugin you don't need, such as a slider, lightbox or animation library, remove its <link> and <script> tags from every page, then delete its folder. Also remove the code in main.js that initializes it, or the console will show errors.
  • With the Sass setup, import only the Bootstrap parts you use. Bootstrap's docs show this as "Option B" in the Sass guide.
  • After each removal, reload the site with the browser console open and click through menus, forms and modals.

How do you put the site online?

A Bootstrap template is static, so any host that serves files can run it:

  • Regular web hosting: upload the folder's contents, not the folder itself, to public_html/ by SFTP or the file manager, so index.html sits at the root.
  • Static hosts such as GitHub Pages, Netlify or Cloudflare Pages: push the folder to a Git repository or drag it into the dashboard.

Contact forms are the usual snag. A template's PHP mail script runs only on PHP hosting, so on a static host you'll need a form service or a serverless function. Test the form after you deploy.

What does the license let you do?

Bootstrap itself is MIT-licensed, but the template is licensed by its author. On Manob, a Regular License covers a single end product whose end users aren't charged, and an Extended License covers one where end users are charged. Neither lets you redistribute the source as-is (license terms). Demo photos in templates are often for preview only, so read the documentation and replace them before launch.

Need a starting point? Compare our picks of Bootstrap 5 templates, HTML5 templates by industry, app landing pages and portfolio templates, or browse all site templates, each of which can be previewed before you buy.

Frequently asked questions

Do I need to know Bootstrap to edit a Bootstrap template?

No, not for text, images and links. Basic HTML is enough. Layout changes go faster once you understand the container, row and column grid and Bootstrap's utility classes.

Why didn't changing --bs-primary change my buttons?

Bootstrap compiles .btn-primary with fixed color values. Override the --bs-btn-* variables on .btn-primary, or change $primary in Sass and recompile.

Can I edit a Bootstrap template without installing anything?

Yes. Any text editor works, and you can preview by opening index.html in a browser. A code editor with a local server, such as VS Code with Live Server, avoids file:// errors and reloads the page as you edit.

How do I change the font in a Bootstrap template?

Load the font, for example from Google Fonts, in the page head. Then set --bs-body-font-family in your custom.css, or $font-family-sans-serif in Sass. Also check style.css, since templates often set their own font-family.

Can I turn a Bootstrap template into a WordPress theme?

Yes, but it's a conversion job, not a setting. The HTML has to be split into PHP template files with a style.css header. If you want WordPress, buying a WordPress theme with the same design is usually faster.