Creating a Jumbotron and Buttons with Bootstrap

Locked lesson.

Upgrade

About this lesson

Let's add a Jumbotron with some simple CSS from Bootstrap.

Quick reference

Creating a Jumbotron and Buttons with Bootstrap

In this video we'll create a Bootstrap Jumbotron for our site and add some fancy buttons too.

When to use

Anytime you want to add a little visual element to your app, you can look through Bootstrap for some example code to use.

Instructions

First, let's create a jumbotron partial that we can call at will. Name it _jumbotron.html.erb and save it in the app/views/home directory.

Next, head over to GetBootstrap.com, click the components link, and then the jumbotron link to find the code for a jumbotron.

Click the copy link to copy the code, then paste it into your jumbotron partial file.

Modify the code to make the jumbotron say whatever you want it to say.

Finally, render the partial on your index page using the <%= render 'home/jumbotron' %> embedded ruby command.

Follow the same steps to add some Bootstrap buttons to your index page.

Hints & tips

  • Find the JumboTron at GetBootstrap.com
  • Copy and Paste the code
  • Modify the code to say whatever you like
  • Render Your Partial
Login to download
  • 00:04 In this video, I wanna play around with Bootstrap a little bit more, just for fun,
  • 00:08 and let's add a jumbotron.
  • 00:09 And a jumbotron is just this big square thing at the top.
  • 00:13 It doesn't really serve a whole lot of purpose, but it's kind of fun and
  • 00:16 it gives us a little bit more experience adding things with Bootstrap.
  • 00:19 So go to getbootstrap.com and click on components, and then scroll down and
  • 00:24 look for Jumbotron.
  • 00:26 And here it is, Hello World, and there's some buttons and all the good stuff.
  • 00:30 Copy this and come back to our app and
  • 00:32 normally I would say let's just slap this into our Index file but
  • 00:36 we just learned how to do partials, so let's make a partial.
  • 00:40 New File, underscore, remember underscore for all our partials.
  • 00:44 And I'm gonna call that _jumbotron.html.erb.
  • 00:49 And if we just right click on here and click Ctrl+V to paste that in.
  • 00:53 I'm just gonna save this, and now let's go back to our index page and
  • 00:57 let's render our partial.
  • 00:59 So embedded Ruby render home/jumbotron and
  • 01:06 close our embedded Ruby tag, and save this.
  • 01:14 Let's come back here and here's one thing.
  • 01:17 Back in our application file, let's wrap
  • 01:22 this yield with a div with class container.
  • 01:30 This embed that and save it.
  • 01:32 And I'm getting that from Bootstrap.
  • 01:34 If you come back to getbootstrap.com, and CSS, click on Overview,
  • 01:39 you see right off the bat this is sort of the basic structure of Bootstrap.
  • 01:44 It uses these containers, but if we click on Reload, that sort of embeds everything.
  • 01:49 And if you click on the About Us, you see now this has been moved over a little bit.
  • 01:52 It used to be right up along the edge there.
  • 01:55 So it just makes everything a little bit nicer.
  • 01:57 Hello World, there's a button.
  • 01:58 So let's change this welcome to my app!
  • 02:04 So let's go to our Jumbotron and replace this H1, that's a Heading One.
  • 02:11 Welcome To My Pinteresting App.
  • 02:18 And then here, pretty cool, don't you think?
  • 02:21 Let's save that, take a look.
  • 02:24 Basically I'm just playing around at this point 'cause it's kinda fun.
  • 02:26 It's a good idea to get a little experience doing all these things.
  • 02:29 So we have a Login and Join button, we're definitely not that far yet.
  • 02:32 But let's change this to an About Us button.
  • 02:36 So here's the button, and
  • 02:39 you'll notice it's a link with this class.
  • 02:44 So let's use an embedded Ruby link just like we did before,
  • 02:50 link_to, and let's call it About Us, and give it a path.
  • 02:55 If we run our rake routes command, we want this Home, About path.
  • 03:02 Home_About.
  • 03:04 And you see it suggests it where you can just right click on there.
  • 03:08 And now we want class.
  • 03:12 And you notice I use double quotes, you can use single quotes or
  • 03:16 double quotes, I switch between the two without even thinking about it.
  • 03:20 But we want this, we could just copy all of this and paste it in.
  • 03:27 And then go ahead and close our embedded Ruby, delete that, and let's save it.
  • 03:33 And boom, About Us, awesome.
  • 03:36 So if we come back here and click on Buttons, we've got the primary.
  • 03:42 Let's say we want green.
  • 03:44 That's this one btn btn-success, so if I copy that come back here and
  • 03:50 change btn btn-primary to btn btn-success, and
  • 03:54 this is btn large, which makes it a large button.
  • 03:58 So if we save this, come back and click reload, now it's green.
  • 04:02 And if we look through here, we can see default, sizes.
  • 04:09 So there's large, default, small, and extra small.
  • 04:13 So this is btn large, btn small, extra-small, so
  • 04:17 we can change that right here if you wanna change the size.
  • 04:22 And really, just that easy.
  • 04:24 Bootstrap gives us all this cool stuff.
  • 04:27 Now, this is gray and eventually we'll turn it white.
  • 04:31 I'll show you how to do that in a future video, but right now,
  • 04:34 we are moving right along, and that's the Jumbotron.

Lesson notes are only available for subscribers.

Gift this course