Where to Discuss?

Local Group


Goal: Using a ready to used Bootstrap SASS theme.

This article is integral part of previous article. You should read previous article before continue.

1: Bootstrap Swatch

Working with theme is fun.

Bootstrap SASS: Bootswatch Animation

The Sylesheet: Original Code

There is a ready to used Bootstrap theme named Bootstrap Swatch.

Or the source code, if you prefer:

Consider have a look at the original code:

// Cerulean 4.1.3
// Bootswatch

@mixin btn-shadow($color){
  @include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));


This is along code

The Sylesheet: Using Bootswatch

Now for use with our project, adapt with our directory structure.


Consider compile

$ dart-sass --watch -I sass sass/css:assets/css --style=compressed --no-source-map
Sass is watching for changes. Press Ctrl-C to stop.

Compiled sass/css/bootswatch.scss to assets/css/bootswatch.css.

Bootstrap SASS: Compile Bootstrapswatch

Prepare The Head

Consider the <head> element.


  <link rel="stylesheet" type="text/css" href="assets/css/bootswatch.css">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">

The Document: Example

Consider using our last example, except change the bootstrap.css to any selected bootswatch.css theme.

<!DOCTYPE html>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Desperate times, desperate measures.</title>

  <link rel="stylesheet" type="text/css" href="assets/css/bootswatch.css">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">

  <!-- header -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"
           >Home <span class="sr-only">(current)</span></a>

  <!-- main -->
  <div class="layout-base">
    <main role="main" class="container">
      <ul class="list-group">
        <li class="list-group-item active">
        <h4>Your Mission!</h4></li>

        <li class="list-group-item">
        To have, to hold, to love,
        cherish, honor, and protect?</li>

        <li class="list-group-item">
        To shield from terrors known and unknown?
        To lie, to deceive?</li>

        <li class="list-group-item">
        To live a double life,
        to fail to prevent her abduction,
        erase her identity, 
        force her into hiding,
        take away all she has known.</li>

  <!-- footer -->
  <footer class="footer">
    <div class="bg-primary text-light text-center">
      &copy; 2020.


And open the html artefact using file manager.

Bootstrap SASS: Bootswatch Theme

What is Next ?

More SASS customization is our next topic. Just a few example, but diverse. This is going to be more interesting. Consider continue reading [ Bootstrap - SASS - Responsive ].

Thank you for reading.