You may have heard some whispers of Bootstrap before here or there when thinking about the visuals of the apps you’re making. What’s this fancy doo-dad that allegedly makes my rails app look better?
Before we get into all that, please make sure you have a decent handle on CSS and HTML. Or maybe you just want to throw caution to the wind and learn via trial by fire.
So what is this thing?
Much like how Rails makes app development for ruby fast and easy(or rather…easier….?), Bootstrap does the same thing for front end development with CSS and javascript. In other words, black magic. It helps in a few things:
- Makes visuals consistent and uniform
- Helps visuals be responsive, or in other words, allows for visuals to function regardless of device or screen size
Ok, that sounds cool. How do we put it in rails?
First, let’s talk about a file that gets generated when we make a new rails app called application.html.erb. It’s located within “App” -> “Views” -> “Layouts”
Next, let’s look at what’s generated from the get-go.
What’s generated is an .erb file with an HTML doctype, html tags, head tags, and body tags. If you may recall from prework, we place links to stylesheets here, which will play a big role later. Our content goes within our body tags, so take a look at line 13, with the keyword, yield. What happens with all the Rails magic is that when we make our requests, code from our views, such as an index.html.erb file, will be placed where the yield keyword is. That way we don’t have to paste in links to our stylesheets in every view we make and that styles applied here will be applied everywhere.
Neat, but now what?
Currently, our apps may look something like this, complete with the stale Times New Roman Font
However, Bootstrap 4(the version currently out) documentation, recommends the following stylesheet link gets pasted between the head tags before all other style sheets to load baseline bootstrap CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">A refresh and you’ll get something like this:
Huh, well look at that.
As simple as it looks, default values does a lot already. But what else can it do?
Bootstrap can recognize a bunch of keywords that have to be used within the class attribute of the HTML tags that your elements are placed in. For example, I placed an H1 tag within a “jumbotron” div and the rest of my content within a “container” div, like so.
And this is what we get
Something like this…
Makes a bunch of cards
SHIP IT. LET’S GO HOME.
Some closing thoughts
This is just a quick primer. As noted before, get a good handle on HTML and CSS mechanics before jumping right in.
Please please please please pleeeeease read the documentation to get a good grasp of what bootstrap can do and how it can be customized. If you want to use some of the elements that require javascript, there’s some javascript code that needs to be pasted before the closing body tag for it too work.
Another helpful website would be https://startbootstrap.com/, which can give you ideas on how to implement certain layouts or styles. Check it out!