DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Add Bootstrap and FontAwesome to your Ruby on Rails 6 application
Shaher Shamroukh
Shaher Shamroukh

Posted on • Updated on

Add Bootstrap and FontAwesome to your Ruby on Rails 6 application

Bootstrap

We will use yarn to add Bootstrap and it's dependencies - jquery and popper.js

Make sure you have yarn installed then run the following command on the terminal in the root directory
yarn add bootstrap@4.3.1 jquery popper.js

We can check that the libraries have been installed successfully by checking the package.json file.
Alt Text

Now let's replace the config/webpack/environment.js code with the following:

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment
Enter fullscreen mode Exit fullscreen mode

We added this code so the application's javascript understands jquery and popper.js syntax.

Now we have to import bootstrap and to do that we will go to app/javascript/packs/application.js and add the following line:

import "bootstrap" 
Enter fullscreen mode Exit fullscreen mode

And That's it for javascript.

Now the CSS
Let's Go to app/assets/stylesheets/application.css and add the following above the require_tree and require_self lines:

*= require bootstrap
Enter fullscreen mode Exit fullscreen mode

So it would be like this
Alt Text

Now let's add some custom styles to the app styling, so we will create a new file (app/assets/stylesheets/custom.css.scss).

Here we import the bootstrap library first so we are able to modify styles for not just the new classes but existing bootstrap classes as well:

@import 'bootstrap/dist/css/bootstrap';
Enter fullscreen mode Exit fullscreen mode

That's it! now we are good to go with bootstrap 4 in your Rails 6 application.

FontAwesome

Make sure you have yarn installed then run the following command on the terminal in the root directory
yarn add @fortawesome/fontawesome-free

We can check that the successful installation by checking the package.json file.
Alt Text

Now we have to import font awesome and to do that we will go to app/javascript/packs/application.js and add the following lines, the js to make sure it works on production as well as development:

import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all";

Enter fullscreen mode Exit fullscreen mode

That's it for FontAeswome!

Now we have added bootstrap and font awesome successfully to our rails application.

Happy Coding!

Top comments (0)

๐ŸŒš Life is too short to browse without dark mode