Bootstrap Themes

Once you know Bootstrap basics, you can take your designs further with themes and customisation.

What are Bootstrap Themes?

A Bootstrap theme is a custom CSS file that overrides Bootstrap's default styles. Themes change colours, fonts, spacing, and component styles to give your site a unique look.

Free Theme Sources

• Bootswatch (bootswatch.com) — 20+ free themes, drop-in replacement
• Start Bootstrap — free templates and themes
• Bootstrap Made — free and premium templates

Using a Bootswatch Theme

<!-- Replace the default Bootstrap CSS with a theme -->
<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">

Popular Bootswatch themes: Flatly, Darkly, Cosmo, Lumen, Superhero

Customising Bootstrap

You can customise Bootstrap at getbootstrap.com/customize to change:

• Colours — brand primary, success, danger, etc.
• Typography — font family, sizes, line heights
• Grid — column count, gutter width, breakpoints
• Components — border radius, padding, shadows

Custom CSS Override

<!-- Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom styles AFTER -->
<link rel="stylesheet" href="css/custom.css">

/* custom.css */
.navbar-default {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: white;
}

.btn-primary {
    background: #667eea;
    border-color: #667eea;
    border-radius: 25px;
}

Tips for Theming

• Always load your custom CSS after Bootstrap
• Use browser DevTools to find which classes to override
• Start with a theme close to your goal, then customise
• Keep your overrides in a separate file for maintainability

Congratulations! You've completed the Bootstrap tutorial series. You now have the skills to build responsive websites with Bootstrap! 🎉