Setting Up Bootstrap and Bootswatch Styling

In this demonstration, I will show how to set up the popular front-end component library, Bootstrap, and the theme library, Bootswatch, for styling app pages. We will continue to build upon the QuizMe project from the previous demos.

1. Installing the Bootstrap and Bootswatch Packages

Add some Yarn packages to the project, including Bootstrap and its dependencies, by running the console command:

yarn add bootstrap jquery popper.js expose-loader bootswatch jquery-ui autosize

In particular, the bootstrap library requires jquery and popper.js. We are installing bootswatch to conveniently choose from a selection Bootstrap-based themes. expose-loader enables the use of JQuery in views. jquery-ui has some nice features (e.g., the position method). autosize enables automatically scaling the height of a textarea to fit its content.

Code changeset for this part

2. Configuring the App to Use Bootstrap

Webpacker is a Rails subsystem for managing JavaScript in Rails. Configure Webpacker by inserting the following code on line 2 of the file, config/webpack/environment.js:

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  "window.jQuery": "jquery'",
  "window.$": "jquery",
  Popper: ['popper.js', 'default']
}))

environment.config.merge({
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: '$'
        }, {
          loader: 'expose-loader',
          options: 'jQuery'
        }]
      },
      {
        test: require.resolve('@rails/ujs'),
        use: [{
          loader: 'expose-loader',
          options: 'Rails'
        }]
      }
    ]
  }
})

Add the following to the bottom of app/javascript/packs/application.js:

import 'bootstrap'
import { autosize } from 'autosize'

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

Rename the file, app/assets/stylesheets/application.css, to be application.scss (note the extra s in the file extension).

Import the Bootstrap CSS classes by adding the following to application.scss:

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

Verify that these steps were performed successfully by running the app and opening it in a browser. You should see that the fonts have now changed.

Code changeset for this part

3. Adding the Yeti Bootswatch Theme

Bootswatch themes override the default colors, font, sizing, and look of the default Bootstrap classes. You can find a list of the available themes (including examples) on the Bootswatch website. For the QuizMe project, we will use the Yeti theme.

Add the Yeti theme by importing the styles in application.scss, like this:

@import "../node_modules/bootswatch/dist/yeti/variables";
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootswatch/dist/yeti/bootswatch";

You can change which theme is used by replacing “yeti” with the theme name you want.

Once the theme has been added, you can reload the page to see the text styling has changed again.

In the upcoming demos, we will use Bootstrap components (in combination with our Bootswatch theme) to customize the style (e.g., fonts, colors, text alignment, and layout) of our current pages and to add new UI components (e.g., a navigation bar and cards).

Code changeset for this part