Bootstrap 4 is a css framework that can be added to our rails application. First of all, let's start from the scratch and create a project that we will be using in this project. As usual create a Rail Project and name it what you want it to be $ (what you want it to be), in this article, i will be using - $ . Be sure to add the dependencies you need to add both to your and in your and run bundle install and bundle update respectively. Check this for more info. Bootstrap rails new preshy rails new preshy database.yml gemfile link Then run $ and after which you will run the command $ so as to properly have your database and table to be well created. We used scaffold here because like you may already know scaffold is a Ruby on Rails command that houses the three main building blocks of rails - , and (MVC). These would be automatically generated and added to our project. rails generate scaffold Article title:string description:text rails db:migrate Models Views Controllers Now let’s proceed to our and remove your and ’ and run the command $ and $ respectively. But if you do not have the above mentioned dependencies as i do not have it in my own , feel free to ignore the last steps above. We are removing the and gem from our gemfile because rails comes with the webpacker gem that combines the JS files into one. gemfile gem ‘bootstrap’ gem ‘jquery-rails bundle install bundle update gemfile gemfile bootstrap jquery We will achieve that by using . Yarn works with webpacker and allows us to add different JavaScript libraries. so you can add yarn with as many JavaScript libraries you want to add separating them with a space. For this article we will be adding yarn with bootstrap jQuery and popper.js. yarn Yarn will have all the packages added, wrap them up and have them installed in our application. It would install and show us what version of the dependencies that we are working with. $ yarn add bootstrap jquery popper.js Alright let’s proceed to our vs code, then checkout in your application, go to the , open the folder and check on the file and then have these block of codes added in the file in between and . It should be written thus: config webpacker environment.js const { environment } = require('@rails/webpacker') module.exports = environment Next , we will go to our , inside this file, there are some automatically generated files by our rails 6 application. app -> javascript -> packs -> application.js application.js JQuery will not be required in the application.js environment since we have already added that in our environment.js. What we will need to add here is to import our bootstrap. This is done by simply adding import ‘bootstrap’ at the top of the generated syntax in that file by the rails application. Move to file and then rename the file to and then delete all the codes that are in the file and add . If you are having trouble running it this way then consider doing and you will be fine. app -> assets -> stylesheets -> application.css application.css application.scss @import ‘bootstrap/scss/bootstrap’ @import “~bootstrap/scss/bootstrap” With that said, we will check if our installation is working out good. Bring up the rails server with the command $ , then go to and grab any and bring it over to your application and move to the views and then in articles file (or whatever your scaffold is) go to the file and then paste it. In this article, we will be using the bootstrap modal. rails server bootstrap site framework index.html.erb Then in your browser, go to the (whatever the name of your scaffold is) and see. Then it brings up the bootstrap launch demo button which you have added to your application. I just added Bootstrap to the launch demo modal button. So it's working well! localhost3000/articles modal Bulma Now, talking about . This is an open source css framework based on flexbox. Bootstrap and Bulma can actually co-exist and we will go ahead and have it added to our rails application so we can have our required user experience. Bulma To get started, we need to go to the project we have been working on already and open our gem file so as to add bulma dependency. We would get that from the site, grab it and add it to your gem file and then run $ www.rubygems.org bundle install. As at the time this article was written, was used. gem ‘bulma-rails’ ‘-> 0.9.0’ Then in your file, as you can see, no need to rename the file since it has been renamed already. So import bulma by typing app -> assets -> stylesheets -> application.scss application.scss @import "bulma/css/bulma.css"; Remember from our second paragraph, we have already generated our scaffold and also added our jquery using yarn. Now that we have added what we need to add for our bulma, there is a need for us to add some template elements at our rails wrapper file which is located at . app -> views -> layouts -> application.html.erb The wrapper file controls the view in our rails application. Bulma being a powerful responsive css framework that would allow your application to adjust based on the screen size, we will have to add this bulma viewport meta tag to our head tag in application.html.erb With the responsive meta tag added, we will add to our application by following the bulma navigation link indicated above and have it added at the top of your file before the tag from . bulma navigation index.html.erb <h1> app -> views -> articles -> index.html.erb The outcome should look like what we have below: In case you experienced some challenges bringing your application to work on the browser just like I did as a result of from file, go to and grab the gem and add it to your gemfile and run $ . turbolinks application.html.erb rubygems.org coffee-script-source bundle install Since you grabbed the gem from rubygems.org, there may not be any need to run $ since the gem you have is the latest version. Then finally change to bundle update <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> refresh the browser and it should work out fine. <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> That is it! is a wonderful framework to work with but I think in recent times, most people prefer using because of its simplicity, responsiveness and the good user experience it offers to its users. Both frameworks can co-exist as we can see it from the image above. Bootstrap Bulma So it’s up to you to decide on which framework to work with. Thanks for stopping by and checking on this article. Hope you found it helpful. – a Full-Stack developer student in Microverse – a remote software development school based in California. You can view my , take a look at my repo, check me out on and follow me on . Kingsley McSimon Ogbonna Portfolio Github LinkedIn Twitter
