Locked lesson.

Upgrade

About this lesson

Customizing styles in bootstrap is easy.

Quick reference

Changing Style with Bootstrap

In this video we'll customize Bootstrap to make it look exactly the way we want.

When to use

Normally, Bootstrap offers you several default styles. When you want to do something that's not a default, you have to customize Bootstrap yourself.

Instructions

Customizing bootstrap is pretty easy.  

First, head over to GetBootstrap.com and click the "Customize" link at the top of the screen.

Click on the "Less Variables" link on the right hand side of the screen.

Scroll down through the Less Variables to find the element you'd like to customize.

Copy the element variable name.

Paste the variable name of the element at the top of our custom CSS.Scss file, located at app/assets/stylesheets/bootstraply.css.scss.

Change the @ symbol of the variable into a $.

Add your customization, for example, to change the navbar background color to red, type in this code:

$navbar-default-bg: red;

That's it!

 

Hints & tips

  • Customization variables are found at GetBootstrap.com in the "Customize" page
  • You can change just about anything in Bootstrap this way
  • Sometimes you have to guess which variables to use through trial and error
  • Use a color picker website to get Hex Color Codes
Login to download
  • 00:04 In this video, I wanna talk about customizing Bootstrap and
  • 00:08 making changes to the default things, like picking different colors and stuff.
  • 00:12 Now, when we change the button, Bootstrap has some default colors to choose from,
  • 00:17 but we can pick any color we want for just about anything in Bootstrap.
  • 00:21 So how do we do that?
  • 00:22 Well, remember when we installed Bootstrap from rubygems.org?
  • 00:26 We installed bootstrap-sass.
  • 00:29 So Sass, I kid you not, stands for syntactically awesome style sheets,
  • 00:33 it's just a thing.
  • 00:34 And that allows us to use Sass in Bootstrap, and it's really easy to do.
  • 00:40 Just go to Customize, and if you look through here,
  • 00:44 we see the same drop-down links that we see elsewhere on this website.
  • 00:49 And let's try Jumbotron, for instance.
  • 00:52 Click on Jumbotron.
  • 00:53 Here are the different ways that we can change the Jumbotron.
  • 00:57 We can change the size,
  • 00:59 the padding, the color of the heading, the color of the Jumbotron itself,
  • 01:03 the background color, the heading font size, all kinds of different stuff.
  • 01:07 So what do we do with this?
  • 01:09 Well, it's actually pretty easy.
  • 01:10 Come back, and if you remember when we first installed Bootstrap,
  • 01:14 we went to app > assets > stylesheets.
  • 01:18 And we added this bootstraply file and we added a couple of lines to it.
  • 01:22 Well, we just come back to this file and tab this down.
  • 01:25 And whenever we wanna make a change to Bootstrap,
  • 01:27 all we have to do is type it right here.
  • 01:30 So let's check it out.
  • 01:31 Let's go, Jumbotron, background.
  • 01:36 So I'm just gonna copy this, highlight it, Ctrl+C to copy it, and come back here and
  • 01:41 paste it.
  • 01:41 Now, Sass deals with dollar signs and not @ signs.
  • 01:46 So anytime you wanna make a change,
  • 01:48 you switch that from the @ sign to the dollar sign.
  • 01:50 Now, this is sorta like CSS but not.
  • 01:53 So when we wanna change something, we type in a colon, and just type in blue.
  • 01:59 And if we save this, come back and hit reload, now that is horribly blue.
  • 02:04 We can change it to red.
  • 02:10 That's just horrible.
  • 02:11 We can also use hex codes, so like e3e3e3, some gray color I think.
  • 02:19 Hit reload, it's back to gray.
  • 02:22 cccccc, darker gray.
  • 02:25 Hex codes, hex color codes.
  • 02:30 Let's see, yeah, so you can find these websites, I'll show you a color pickers.
  • 02:37 Let's say we want a shade of blue and
  • 02:40 maybe we want it sort of purpley, here's the hex code for it.
  • 02:45 We just copy this, bring it back here, paste it in,
  • 02:50 and we end with the semicolon always.
  • 02:53 So here you go.
  • 02:56 And it's just that easy.
  • 02:57 Anytime you wanna change anything in your app, you just come to
  • 03:02 Customize section at getbootstrap, Customize, scroll down for
  • 03:07 your variables, find the thing, so like navbar, for instance.
  • 03:13 You can change the height, default color.
  • 03:16 Maybe we want default background color, let's try that.
  • 03:23 We are after all asking it to change the background color.
  • 03:28 There we go, just horrible looking, right?
  • 03:30 But just that easy, we can make changes.
  • 03:32 So customize this,
  • 03:33 play around with it, and make it look however you wanna make it look.
  • 03:35 I'm just gonna paste some variables in here that I've selected earlier.
  • 03:39 And I just sorta went here and picked some of the things that I wanna change.
  • 03:43 You should go in and change things however you wanna change it,
  • 03:46 really make it your own, put your own stamp on it.
  • 03:48 But if we save this, come back here and reload,
  • 03:51 you see the navbar is a little bit smaller.
  • 03:53 We've changed the main color here, changed the background to gray,
  • 03:57 and the navbar to white, and some other things.
  • 04:00 So if you wanna pause the video and
  • 04:01 look more closely at what each of these things are,
  • 04:04 they're just the variables from the list on Bootstrap with my own color selections.
  • 04:08 But play around with this, make it your own, and really have some fun.
  • 04:11 This is where your personality really kinda shows through.
  • 04:14 And if you haven't backed up your code in a while, after you've made your changes,
  • 04:17 let's go ahead and save this.
  • 04:18 So git add., git commit -am 'added and
  • 04:24 customized bootstrap'.
  • 04:28 Put any message you want.
  • 04:30 Git push, finally, git push heroku master, to push this on up to heroku.
  • 04:39 Just remember, anytime you wanna make a change to Bootstrap, it's just as easy as
  • 04:43 modifying this bootstraply.css.scss file right there.
  • 04:49 And scroll through here, find the thing you wanna change, get your variable.
  • 04:53 This is a LESS variable, actually it's a Sass variable,
  • 04:56 but Bootstrap has this listed as LESS.
  • 04:58 They're the same thing, for all intents and purposes, as far as we care.
  • 05:01 And now we're pretty much done with the sort of intro styling stuff.
  • 05:07 We've got all the tools we need to make it look however we want.
  • 05:10 In the next set of videos, in the next section, we're gonna dive in and
  • 05:13 start actually adding functionality to the website.
  • 05:16 We can actually do cool things, like sign up, sign in, log in, log out, and
  • 05:21 do all kinds of cool stuff like that.
  • 05:22 So I'm looking forward to that, and that's all for this video.

Lesson notes are only available for subscribers.

Gift this course