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.
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.
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).