Adding CSS with Bootstrap

Quick reference

• 00:05 In this video I wanna start using Bootstrap to make our app look a little
• 00:08 bit better than it does now.
• 00:10 Right now it's pretty boring.
• 00:11 So if you're not familiar with Bootstrap, go to getebooststrap.com.
• 00:16 And Bootstrap is a CSS framework that was originally created by Twitter.
• 00:20 It's one of the most popular CSS frameworks, and you can check it out.
• 00:24 It allows you to do, let's see, all kinds of cool things.
• 00:28 Add icons, and nav bars, and
• 00:33 buttons, and forms, and all kinds of cool stuff, very very easily.
• 00:38 So how do we do this?
• 00:39 How do we add this to our Rails app?
• 00:41 Well we're going to be adding a gem, so we go to RubyGems.org and type in bootstrap
• 00:50 And you can see the first one listed only has 247,000 downloads,
• 00:54 which is a red flag and tells me that's probably not the one we want.
• 00:57 This one has 14 million plus, so I'm guessing that is the one we want.
• 01:02 So come here, grab our gem file, click this Copy, come back,
• 01:07 open our gem file, come down here and paste and save.
• 01:12 Now we type in our bundle install command,
• 01:16 we always do that every time we add something to the gem file.
• 01:20 And while it's adding that, let's come back here and
• 01:22 look at the homepage because like many gems,
• 01:26 this one has additional directions in order for you to start using it.
• 01:30 The first thing it wants us to do is add these two lines of code to our
• 01:35 app/assets/stylesheets/application file.
• 01:38 And in fact first we need to actually create a file.
• 01:42 Go to Apps, Assets, Style Sheets,
• 01:46 and we need to add a new style sheet to handle the Bootstrap.
• 01:49 So I just right click and click New File.
• 01:51 We can name it anything we want, I'm gonna call it bootstraply.css.scss,
• 01:58 that just corresponds with the other files in this directory.
• 02:02 And if we open this,
• 02:03 the directions tells us we need to paste in these two lines of code.
• 02:06 So I just copied it and Ctrl+V to paste, and I'm gonna save that.
• 02:11 We can go ahead and close that.
• 02:13 And what else does it want us to do?
• 02:16 Okay, it wants us to add these two lines of code.
• 02:19 Let's copy that to our
• 02:20 app/assets/javascripts/application.js file.
• 02:24 And that's in the same general area, app/assets/javascript/application.jss,
• 02:31 and we want to add this right above this last line, this required tree.
• 02:36 You always want that to be at the end.
• 02:38 But you can see, so we added these two lines.
• 02:40 Actually this line was already there, so we don't need to add it a second time.
• 02:46 So let's save that, close it, and let's look through here.
• 02:50 I think that's pretty much all the directions we need.
• 02:54 Now if we hit reload, actually nothing will happen, we'll get an error.
• 02:58 Because often times when you add a new gem,
• 03:01 you need to stop your server and restart it.
• 03:04 Especially something like this that affects everything,
• 03:07 CSS affects everything in our app.
• 03:09 So it's a good idea always to click reload.
• 03:13 Give that a second, reload, and boom, it works.
• 03:18 Now if you look closely, you'll see everything looks a little bit different.
• 03:21 The font is different, the links are a different color,
• 03:25 that tells us that we've been successful in adding Bootstrap.
• 03:29 And just that easy we've added one of the web's most popular CSS frameworks to
• 03:33 our app, and now we can start using it.
• 03:36 And that's just really, really cool.
• 03:38 So take a little bit of time, go to Get Bootstrap, and
• 03:41 click on either CSS or components.
• 03:44 And just sort of look through here, and look at all this stuff.
• 03:48 This is a jumbotron, that's this big thing right here.
• 03:51 We'll add one of those in a little bit.
• 03:52 Thumbnails, panels.
• 03:59 Let's see, progress bars you can add like this.
• 04:02 Alerts, we'll use these.
• 04:05 This is all the stuff you can add with Bootstrap.
• 04:07 If you click CSS, there's buttons.
• 04:10 You can add all kinds of different buttons, different colored buttons.
• 04:14 And to add one of these things, you just copy this code,
• 04:19 come back to your app, and let's just open our apps views about us page.
• 04:26 I'm just gonna paste this in there, click reload, and boom,
• 04:31 right there we have this default bottom.
• 04:33 If we wanted the blue one, we'd copy the one for the blue one,
• 04:38 come back here, paste that in, now we have the blue one.
• 04:42 So just that easy, it's almost like drag and drop.
• 04:45 It gets a little bit more complicated as we customize it, but
• 04:48 not much more complicated.
• 04:49 So that is Bootstrap.
• 04:51 In the next video we'll start adding some cool stuff with Bootstrap.
• 04:54 And that's all for this video.

Lesson notes are only available for subscribers.