Setting up Bootstrap for Rails (Beginner’s guide)
If you’re like me, you want your projects and future apps to always look their best. For someone who is new to developing, this can sound like a pipe dream. On top of learning the specific details of the back end, how the flow and functionality of the app works, I now have to think about the front end as well?? Uggghhhh…
Ah, but don’t fret my friend. That’s were the amazing power of Bootstrap comes into play. Bootstrap is a CSS Framework…ok what’s CSS? According to Wikipedia, “CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.” The short of it, Bootstrap makes your site look cleaner and modern. The best part is that it’s free.
There are a couple ways to implement Bootstrap into you application. You can add a gem or you can copy a template file from Bootstrap and put it into your application file of your app. This blog will show the set up using a template.
First thing you want to do is go to getbootstrap.com. There you can look for a link in the nav bar called “Documentation”
If you scroll down a bit, you’ll see “Starter Template”
This is the most important piece of code to have in order for your Bootstrap to work! After copying this, assuming you have made a rails app (or existing), head over to your app/views/layouts/application.html.erb file.
Note** There might already be some code in your application file. For the time being, just move that down in order to paste the Starter Template code.**
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>That being said, look for the <% yield %> tag in that old code. Copy and paste it where the <h1>Hello, World!</h1> is in the new code (look around line 14).
Grab these lines of old code as well and put them in between the <head> tags (..maybe somewhere close to the </head> tag, but not after).
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
<%= javascript_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
Also look around line 12 where the <title> tags are located. That’s where you will name your app for everyone to see!
Once those steps are implemented, you’re ready to start adding Bootstrap!
So you could be asking, “Ok, now what?”… Well, the question comes back to you. What do you want to do with Bootstrap? You can add flair to your <nav> bars on the top and bottom of your page. Add some really cool animated buttons for your <link_to> tags. Insert loading spinners for each page…The options are immense!
My recommendation would be to read up on Bootstraps’ site and look up videos on implementation. The better understanding of how it works with your app, the better it will make you feel.
Have fun!