Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Overriding core CSS with custom styles

From: Up and Running with Bootstrap 3

Video: Overriding core CSS with custom styles

So in this next video, I want to talk a bit about custom styling with CSS. And there's a number of ways that we can do custom styling here with CSS. The very first way I want to talk about is, I just want to write a custom style for my footer of my webpage. So, a few videos back, we put in some small tags, to make the text a little bit smaller, and to indicate semantically that this is fine print. But it's really not that attractive of a footer. And, so I'd like to write a style for that. There is no styling for a footer per say inside of Bootstrap so I'm winding up writing a custom style from scratch, and that's very, very doable.

Overriding core CSS with custom styles

So in this next video, I want to talk a bit about custom styling with CSS. And there's a number of ways that we can do custom styling here with CSS. The very first way I want to talk about is, I just want to write a custom style for my footer of my webpage. So, a few videos back, we put in some small tags, to make the text a little bit smaller, and to indicate semantically that this is fine print. But it's really not that attractive of a footer. And, so I'd like to write a style for that. There is no styling for a footer per say inside of Bootstrap so I'm winding up writing a custom style from scratch, and that's very, very doable.

Very simple to do from bootstrap because you do just like you would any other web site. So I have open right now 03_08.html, and this is the HTML document I'm starting with for this video. You'll notice here up at the top of the file sheet, that we have a link right now to bootstrap.min.css. And, as I mentioned in an earlier video, this is all of Bootstrap's default styling that goes inside of that particular style sheet. But, if we want to write our own custom styles, we absolutely should make our own separate style sheet for that.

And the purpose of doing that, is so that we can separate out our own styles from bootstrap styles. So if we ever upgrade bootstrap, then we are able to separate out those custom styles from that. And preserve those. Because the moment that we upgrade bootstrap or we move to a new style sheet from bootstrap All of this styling and any tweaks that we made are completely wiped out. So it's better to use the power of the big C. The C in CSS stands for cascade. So let's use that with a separate style sheet. So I'm going to start by making that separate style sheet.

Actually we created that style sheet a little bit earlier here. If you look into your CSS folder inside of your bootstrap folder, you should have a blank document here called custom.CSS. But we have it actually called custom.CSS, inside of our html document. Let's go ahead and do that right now. We're going to add here, just after the linked to Bootstrap.min.css online eight. We're going to add a link to CSS/custom.css rel of stylesheet.

Okay, so now that these, these documents are linked together, I'm going to save my HTML. There is no styling in that style sheet so nothing's changed with the way that webpage looks. The first thing I'd like to do is style that footer. So I'm just going to go ahead and write myself a little style, just like I would for anything else. I'm going to use my footer html tag to do this. And I'm going to put in some styles here. Let's say, some padding of 2ems and zero. Remember, when you're working in responsive design, it's probably best to work with ems as a relative unit of measure or percentages.

And that's so that things are going to scale, with the various media queries, and so forth. Let's also give it a bit of margin. And let's say that's three ems, zero. Remember, of course, that that is. The first number refers to the top and bottom. And the second number refers to the left and right. So we're adding padding and margin by quite a bit on the top and bottom of the footer. And nothing on the left and the right. And let's also give this a nice border on the top of, let's say, one pixel solid, ddd.

Which seems to be a favorite color grey in Bootstrap. We'll also make our text a nice neutral gray, say 999. And let's align that text, make it centered on the page. So if you just go ahead and save that style. And we go ahead and refresh our webpage here. There we go, we have lovely footer styling. Isn't that great? That is demonstration number one. Just like you have always written CSS since you started developing web pages, you can just go and write a style inside of your custom style sheet, just the way you would with any other system.

The other thing you might want to do, though, is you might want to change some of the styling for styles that are already available to you in bootstrap. So, if you take a look at the glyphicons that are right here, these are a lovely shade of black. Why? Because that's the color of text that we have going on here, inside of our bootstrap document. What if I wanted those glyphicons to be a different color? Well that's actually quite easy to do. If you take a look at our HTML here, and we're going to scroll on down here to, let's say, line 34. Here's one of the first glyphicons that we have.

We have two classes in effect here, which is glyphicon, and glyphicon-pushpin. So the class of glyphicon will affect all of the glyphicons on the page and 'glyphicon-pushpin' is specific to that, glyphicon in particular. So, what I would try to do is I would say I want to change the color of the glyphicons on the page. To maybe a lovely tan color. So I can add that style here in my custom style sheet, glyphicon, and I can give this a color of, let's say, cdae51. And just by doing that and refreshing my webpage There my glyphicons all have this lovely tan color.

All of them at the same time. What if I wanted to have two of them be tan and two of them be chocolate brown? Let's say I'm just picking up the colors here from this logo up here on the upper left corner of the page. Well I could do that too. All I need to do here is just write another style, say dot glyphicon, hyphen, in this case let's say it's the push pin and glyphicon-heart and let's say for those too we would have a color of 3F2B22 which is the chocolate brown.

And if you go ahead and save that, refresh the page. There we go. Now, we have alternating colors for our glyphicons. The other cool thing about those glyphicons, of course, is that you can enlarge them. These are the sizes since they're inside of h4, those glyphicons are taking on the size of an h4, but there are vector graphics, and they do scale. If I was to increase the text size here on the page, you'll see that the glyphicons are going to grow in size directly in proportion to the text size on the page. You see how nicely that happens? And we got no unsightly jaggies associated with those pictures.

The way we would with a raster based graphic, such as we used to have in Bootstrap. So, aren't those cool? Those little glyphicons are just handy and so lovely. Alright the next thing I'd like to do is I'd like to address this image over here on the right side of the page. So it's a lovely image and things are looking great. But, one of the issues that it has is, all of this text is smashed right in to the edge of this picture. And, so, what I'd like to do is get a little bit more breathing room between the picture and this text.

And, as you know, we applied a class of pull-right to that image. Several videos ago. Which floats it to the right to the way it is right now. But what I'd like for it to do, is, I'd also like it to give a little bit of space around it. So I need a bit of margin on that picture. So, what is the selector that I need to do that? Well, once again, if you take a look at your HTML for that particular picture, that is up here. So, on line 29, here's the image of the cockatiel with a class of pull right. One of the thing's that's missing from this is that image-responsive.

So I'm going to go ahead and add that. And if I save that and I refresh my webpage, now that image will scale a bit as the page gets smaller. So maybe images that are pulled right and also have that class of image-responsive on it. Maybe those I would like to have a little bit more margin on those. Because if it's got class of image-responsive and a pull right. I'm probably talking about an image. And I'll probably want a margin on that no matter what, so how can I write a style for that? Well, that's also doable here, I can just say,.

pull-right.img-responsive and notice that, there is no space. Be very very clear there is no space between. pullright and. img-responsive this is all one word. The reason that that is so important is that both of these classes are applied to the same image element, and so if you put a space in between them, we're saying for all classes of image responsive inside of some other HTML tag with a class of pull-right. In this case, we're saying a HTML tag that has classes of pull right and img-responsive.

So, it's very, very important no spaces. So, here we could say something like a margin, of 0 0 1em 1em. Now remember when you see four numbers like that inside of this it's TRBL, Top, Right, Bottom, and Left. If you remember TRBL you'll stay out of trouble. Ooh, I wish I could claim credit for that one, but I can't. If you go ahead and save your CSS and if you refresh your web page, you should now see your text move away from your image a little bit.

You can add a little bit more space, if you want, but I think that looks pretty good. The last thing I'd like to style on this page are these buttons down here at the bottom. They are a lovely shade of light blue but, you know, that has nothing to do with my color scheme here whatsoever. So, I would like to change the way these are behaving. And, we know that, here inside of my html, that those buttons are getting that blue color. For say here on line 51 it's coming from button-info as you saw earlier as we were changing classes to button-success or button-warning or button-danger, the colors of the button were changing.

So we know that that button-info is where that color is coming from. So we can write a style to change that and so we can say something like. btn-info, and we can say something line a background-color of cd ae 51, and we can say a border-color of 3F2B22, which is the color we used earlier. And, we could also give this a color of white, because we won't be able to read the buttons otherwise.

So if you save that, and you refresh the page here in your browser. Hey, look, we have lovely buttons that match the page. But, hey, when you bounced over 'em, they're still blue. So, what's going on there, and where does that style come from. Well on occassion your not going to be able to guess at what these classes are and where they come from in boot strap and your going to have to track them down using a tool like fire bug so if you go the fire bug website. I'm happening to use FireFox here today. And Firebug is one of those indispensable developer tools which you can get at www.getfirebug.com.

And you should be able to just hit the Install Firebug button up here. Go ahead and download the recommended version, and say Add to Firefox. And say Install. And, in theory, firebug's already here and ready to go which is great. If you're using Chrome, you can use the developer tools console which comes with Chrome. Does the same kind of thing. I just happen to be a fan of Firebug. So if you go and click on Firebug which will now appear in the upper right corner of your web browser You will be able to then track down these buttons inside of Fire Bug.

The best way to do that is simply to hover your mouse over these lines of code here. And this is going to point you to the right area of the webpage. So it's probably in this row. And it's probably in the article. And it's probably in this row, and maybe, here, inside of the paragraph. There we go, there's our button. And here, as we roll over the button. You're going to see an indication of the style over here on the right side of the firebug console, and you'll see there there's button-info focus and active and open drop down toggle button info and so fourth.

There's all the styling that we need here. And that is controlling the color of the button. So, what we're going to need to do is we need to get that information and then plug in to our code. So, written down with that style is, so we can just go ahead and type it in or if you are in your exercise files. In chapter three, in video number eight, there is a little file here called custom.CSS that'll give you the styling that we want here. So I've changed these colors to match our site better.

I'm just going to go ahead and copy that code, and I'm going to paste that on into my custom.CSS. And save that. And now when I refresh the page, there we go. We have lovely read more buttons that do in fact match the page when we roll our mouse over them. Isn't that awesome? And to close Firebug, if you just click the red button on the far right here, then Firebug will go away again. So, styling custom styles inside of Bootstrap It's going to take you a few little tricks to do that. You can either write your own styles right out of the box using CSS that you've known and loved since the beginning of web development, or you can build on styles that are already there inside of Bootstrap.

And you can also track things down in Firebug and you can restyle them in your custom style sheet. Depends on the situation which one is right for you.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 3
Up and Running with Bootstrap 3

37 video lessons · 22972 viewers

Jen Kramer
Author

 
Expand all | Collapse all
  1. 5m 25s
    1. Welcome
      58s
    2. Using the exercise files
      1m 19s
    3. Installing Sublime Text 2
      3m 8s
  2. 29m 0s
    1. What is Bootstrap?
      8m 1s
    2. Downloading and unzipping Bootstrap 3
      4m 31s
    3. Examining Bootstrap file structure
      4m 34s
    4. Adding CSS to a Bootstrap HTML file
      4m 35s
    5. Adding JavaScript to a Bootstrap HTML file
      7m 19s
  3. 44m 38s
    1. Exploring Bootstrap's grid system
      9m 10s
    2. Creating new rows and cells
      14m 5s
    3. Adjusting column widths using offset
      5m 2s
    4. Changing column order using push and pull
      5m 34s
    5. Nesting columns
      3m 43s
    6. Creating a JumboTron-style layout
      3m 41s
    7. Challenge: Working with grids
      1m 31s
    8. Solution: Working with grids
      1m 52s
  4. 53m 34s
    1. Exploring basic typography: The small and blockquote tags
      4m 29s
    2. Exploring Bootstrap's responsive classes including .hidden and .visible
      4m 44s
    3. Styling buttons using btn classes
      4m 43s
    4. Styling images with responsiveness and decorative touches
      5m 22s
    5. Incorporating Bootstrap 3 glyph icons
      3m 28s
    6. Creating a thumbnail gallery
      6m 2s
    7. Styling tabular data
      5m 3s
    8. Overriding core CSS with custom styles
      12m 53s
    9. Challenge: Styling panels and callouts
      2m 17s
    10. Solution: Styling panels and callouts
      4m 33s
  5. 27m 41s
    1. Implementing location breadcrumbs
      6m 38s
    2. Using tabs and pills for navigation
      6m 58s
    3. Developing a responsive navigation bar
      9m 9s
    4. Challenge: Modify the "pancake" button
      1m 3s
    5. Solution: Modify the "pancake" button
      3m 53s
  6. 37m 45s
    1. Implementing dropdowns within a navigation bar
      5m 5s
    2. Tabbing within the same page
      15m 45s
    3. Accordion panels with collapse functionality
      11m 37s
    4. Challenge: Tooltips
      1m 59s
    5. Solution: Tooltips
      3m 19s
  7. 3m 0s
    1. Next steps towards advanced Bootstrap
      3m 0s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 3.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.