Installing Bootstrap to a Rails Project
But how do we install it within a Rails Project? We can do this in several ways, such as adding bootstrap within our Gemfile. But there is another way by not adding it to our Gemfile.
yarn add bootstrap jquery popper.js
By running the above code, yarn should grab the 3 packages and install them within your Rails app. These would be installed as dependencies and saved within your lockfile.
Next, go into config/webpack/enviroment.js
This file is automatically created when creating a new rails project. Instead of requiring jquery within this file, we have already done that within the environment.js. The only thing we would have to do within the application.js file is import bootstrap framework.
Next, go to app/assets/stylesheets/application.css
First thing we have to do with this file is rename it to be application.scss. Within the file we have to import ‘bootstrap’, and since we have used yarn to install the directory is different. We would also have to add the scss files that we would have to import bootstrap to. So I also have to import the rest of the stylesheets within my application.scss. For example within my app/assets/stylesheets i have my application.scss and I have a courses.scss, i only have to import the file within my application.scss. Our code within the application.scss should look similar to the one below:
Lastly, test it out! You always want to make sure you test. Grab some bootstrap code and put it in your views and open your localhost and see the difference.