Bootstrap Install Guide for Rails 6 Applications
Bootstrap markets itself as the most popular HTML, CSS, and JavaScript framework for developing highly responsive, mobile first web applications. The sleek, intuitive, and powerful framework currently ranks as the tenth most popular GitHub repository with over 148,000 stars, more than 1000 contributors, and over 20,000 commits. It is compatible with a variety of frameworks (ex. Django, Express, Rails, etc).
This tutorial will walk you through adding Bootstrap functionality to a Rails application using two popular delivery methods. The framework has two dependencies — CSS and JavaScript and requires jQuery and Popper.js. Installation of these will also be covered.
Install Bootstrap via Content Delivery Network (CDN)
Probably the easiest way to incorporate Bootstrap in a Rails application is through a Content Delivery Network (CDN). If you elect to use this route, you don’t have to download Bootstrap. All functionality is delivered via cached versions of Bootstrap’s compiled CSS and JSS libraries from CDN links embedded in your HTML code. This can be beneficial relative to hosting libraries on your application server and so long as you can an internet connection, the CDN links will pull whatever is needed for your application.
Popular Bootstrap CDNs include Stackpath (formally MaxCDN) that powers over 8 million websites globally and jsDelivr — a free open source CDN prominently featured on Bootstrap website.
Benefits of using CDNs:
- Bootstrap’s compiled CSS and JSS libraries can be pulled from a CDN server closest to the user who is trying to load your website effectively offloading the bandwidth strain on your application’s server while simultaneously providing significantly faster load times for that user.
- There is also the potential for bandwidth cost reductions as a result of a significant percentage of website traffic potentially already possessing cached bootstrap files in their local browser.
- CDNs offer extra defense against DDoS attacks due to the very nature…
