How to create custom theme in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Custom Theme in Bootstrap Easily

To create a custom theme in Bootstrap, start by copying Bootstrap's source Sass files and override the default $variables with your own styles. Then, compile the Sass files using a tool like npm or sass to generate a custom CSS file with your theme.

📐

Syntax

Creating a custom Bootstrap theme involves these main steps:

Override variables: Change Bootstrap's default $variables in a new Sass file.
Import Bootstrap: Import Bootstrap's Sass source files after your variable overrides.
Compile Sass: Use a Sass compiler to generate the final CSS file.

scss

// custom.scss
// 1. Override Bootstrap variables
$primary: #ff6347; // Tomato color
$font-family-base: 'Comic Sans MS', cursive, sans-serif;

// 2. Import Bootstrap source
@import 'node_modules/bootstrap/scss/bootstrap';

💻

Example

This example shows how to create a simple custom Bootstrap theme by changing the primary color and font family, then compiling the Sass to CSS.

scss + html

// custom.scss
$primary: #007bff; // Change primary color to blue
$font-family-base: 'Arial, sans-serif';

@import 'node_modules/bootstrap/scss/bootstrap';

/* HTML file example */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Custom Bootstrap Theme</title>
  <link rel="stylesheet" href="custom.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Theme</a>
  </nav>
  <div class="container mt-3">
    <button class="btn btn-primary">Primary Button</button>
  </div>
</body>
</html>

Output

A webpage with a navbar and a blue primary button styled using the custom theme with Arial font.

⚠️

Common Pitfalls

Common mistakes when creating a custom Bootstrap theme include:

Not overriding variables before importing Bootstrap Sass, so changes have no effect.
Forgetting to install Bootstrap source files via npm or not setting correct import paths.
Compiling Sass incorrectly or not at all, resulting in no custom styles applied.
Overriding variables with invalid values causing compilation errors.

scss

// Wrong way: overriding variables after import
@import 'node_modules/bootstrap/scss/bootstrap';
$primary: #ff0000; // This will NOT change the primary color

// Right way: override before import
$primary: #ff0000;
@import 'node_modules/bootstrap/scss/bootstrap';

📊

Quick Reference

Summary tips for creating a custom Bootstrap theme:

Always override $variables before importing Bootstrap Sass.
Use a Sass compiler like sass or build tools (Webpack, Gulp) to generate CSS.
Test your theme by applying the compiled CSS to a simple HTML page.
Use Bootstrap's official documentation for variable names and options.

✅

Key Takeaways

Override Bootstrap Sass variables before importing to customize your theme.

Compile your Sass files to generate the custom CSS for your website.

Use npm to install Bootstrap source files for easy access to Sass.

Test your custom theme on a simple HTML page to see changes.

Avoid overriding variables after importing Bootstrap Sass to prevent no effect.