Up and Running with Bootstrap 3
Illustration by John Hersey

What is Bootstrap?


Up and Running with Bootstrap 3

with Jen Kramer

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: What is Bootstrap?

Before we get started talking about all of the wonderful features and functionality built into Bootstrap 3, I thought you might want to know a little bit of background about what exactly Bootstrap is. Bootstrap is a responsive design framework. Which is designed to help you quickly and easily build static websites and web applications. So you can either just work with the static HTML as it comes to you with Bootstrap, or you can combine this with something like PHP or a content management system.
Expand all | Collapse all
  1. 5m 25s
    1. Welcome
    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. 43m 46s
    1. Exploring Bootstrap's grid system
      9m 10s
    2. Creating new rows and cells
      13m 17s
    3. Adjusting column widths using offset
      5m 2s
    4. Changing column order using push and pull
      5m 33s
    5. Nesting columns
      3m 42s
    6. Creating a JumboTron-style layout
      3m 40s
    7. Challenge: Working with grids
      1m 30s
    8. Solution: Working with grids
      1m 52s
  4. 53m 33s
    1. Exploring basic typography: The small and blockquote tags
      4m 28s
    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 40s
    1. Implementing location breadcrumbs
      6m 37s
    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

please wait ...
Watch the Online Video Course Up and Running with Bootstrap 3
3h 21m Beginner Oct 07, 2013

Viewers: in countries Watching now:

Meet Bootstrap, the one-stop shop for designing sleek, mobile-ready websites with HTML5, CSS3, and JavaScript. It's an open-source, responsive design framework, featuring a grid-based layout system, web-ready icons you can incorporate into your designs, fully functional navigation, and much more. Join Jen Kramer for a quick overview of all of the goodies in Bootstrap, and then learn how to customize the grid, override the CSS to customize your site, and leverage Bootstrap's stylish built-in JavaScript effects. Once you're prepared to test your knowledge, you can take the hands-on challenges offered by Jen.

Topics include:
  • Downloading and installing Bootstrap
  • Understanding the Bootstrap file structure
  • Exploring the 12-column grid
  • Changing column width and order
  • Styling buttons, images, and tables
  • Overriding core CSS
  • Creating a thumbnail gallery
  • Adding JavaScript effects, like dropdown menus, tabs, accordions, and more
Jen Kramer

What is Bootstrap?

Before we get started talking about all of the wonderful features and functionality built into Bootstrap 3, I thought you might want to know a little bit of background about what exactly Bootstrap is. Bootstrap is a responsive design framework. Which is designed to help you quickly and easily build static websites and web applications. So you can either just work with the static HTML as it comes to you with Bootstrap, or you can combine this with something like PHP or a content management system.

And you can actually turn this into something that's more dynamic in nature. Where Bootstrap is controlling the front end design of your website. Bootstrap is currently the most popular project on GitHub. GitHub is a repository of a bunch of different open source projects and the popularity of these projects is measured in stars. And Bootstrap has more stars than any other project on GitHub by like, a lot. It's extremely popular with back end developers in particular because Bootstrap is a great way to build a very simple.

Front end design for a website without having to know a ton of HTML and CSS. Bootstrap's used by a number of different organizations like NASA, and the state of Kentucky is using it, Medicare, Discus, and many, many more. And I'll give you some examples of those and places where you can go to find examples about Bootstrap. If you go to builtwithbootstrap.com. This is one of three different portfolio sites that I'll show you that contain examples of sites that are built with Bootstrap.

That are customized at various levels and abilities. Lovebootstrap.com is another one that will show you several of these fabulous bootstraps sites that are portfolio worthy. And officially on expo.getbootstrap.com, this is a portfolio of different Bootstrap sites that have been noticed by the actual developers of Bootstrap and highlighted here on their website. So a little bit background about what's new in Bootstrap 3, there's a bunch of great new features.

First of all, Bootstrap 3 has been built, once again, from the ground up, to have a mobile-first approach. This means that the way the grid system in particular is designed is, for you to think about how you're going to layout your designs first on small screens, such as those that come on a mobile phone. And then you can scale up the size of those designs to larger and larger environments. We'll see some of that coming up in the system that talks about the grid system for Bootstrap. There's only one grid system that is shipping with Bootstrap this time around.

Previously in version two, we had a fully responsive grid system and an adaptive grid system. This time it's just the responsive grid system. But a lot of functionality has been added to it. There's four different sized grids and extra small, small, medium, and large sized grids. And we'll work with all of those in the chapter on the grid system. Bootstrap is dropping support officially for IE7 and for Firefox 3.6. So those older versions of Internet Explorer will no longer be supported. And it will be supporting Internet Explorer 8 and higher.

You do have to make a minor modification. To have your sites work with Internet Explorer 8, and I'll go through that with you in a upcoming video as to what you need to do to make your sites work with IE 8. If you don't make that particular modification and just work with Bootstrap out of the box, it will work with Internet Explorer 9 and higher. Finally, one of the wonderful things that's shipping with Bootstrap this time around, are some fonts that can be used as icons in your designs. Previously, Bootstrap shipped with a series of image sprites. Those are just the little icons, maybe a hundred or so of those on a single PNG file and the pieces of the PNG file will display depending on CSS that ship with Bootstrap, which was nice but it meant that you couldn't scale up the size of that particular icon or change its color easily, because, of course, those are rastrographics.

Since we're now going to be working with fonts, those are vector graphics and we can recolor those on the fly or change the look of them pretty quickly and easily and I'll show you how to do that in a future video. One of the most common questions I get is whether people should be working with a responsive design framework at all, like Bootstrap, or its closest competitor, Foundation. And, my answer to this question is always the same. It depends. It depends on what kind of problem you're trying to solve. If you think about front-end web design over the last few years, there are a couple of approaches that we take to that. Really it just boils down to two.

We either think about front end web design as something that comes off the shelf. We purchase a theme or a template that's used for a content management system, and we plug it right on into that content management system. Maybe we change a color or two or drop in a logo. And we're done. We have a front end for our website. Or, we think about a fully-customized solution where we go and hire a graphic designer. We do three rounds of designs, we do two rounds of divisions. We slice and dice up these beautiful comps and we create our own custom HTML.

Every single time. It's an expensive process, and we may not necessarily reuse a lot of the code that we write from one project to another. I'd like for you, though, to think about these responsive design frameworks as a middle ground. Some of the work is done for you, so that you don't have to think about certain aspects of your designs. For example, the grid system is a great way for laying out webpages. You don't necessarily need to write your own grid system for every website that you're going to be building. It's still very, very customizable. And Bootstrap, with its very flexible CSS, including the LESS CSS. LESS being a CSS pre-processor system that you can use to centralize your styles. This allows you to.

Make Bootstrap look exactly as you wish it to look. But best of all, Bootstrap never has to look like Bootstrap. One of the common criticisms, especially among graphic designers, is that all Bootstrap sites look the same. That doesn't necessarily have to be true. It's only true if you want your website to look like a Bootstrap site. And some people would just like to get a quick prototype out there. Maybe they'll just use Bootstrap off the shelf, maybe change a color or two, and call it done. But if you wish to customize lots and lots of styling in Bootstrap, you certainly can.

There are of course disadvantages to working with the frame work as well. There's a lot of code bloat that people talk about in regards to frameworks, and what they mean by that is they may take ten or 20 lines of code to write, while for a custom side might only take a line or two of code, and of course the reason that so many lines of code are required in a framework is to increase the flexibility of the framework to address different styling situations. So while the code that you might write for your own custom site might be more efficient, the code that you're going to get from a responsive design framework, has definitely got a lot more, stuff in it.

And the reason why is because it has to address a number of different situations. So your code's not going to be as efficient with a responsive design framework. And of course you have to learn the responsive design framework. That can be a deterrent to some people. You have to actually learn somebody else's code and you have to know how to work with it. So, should you use a responsive design framework in your own work? Well, it depends. It depends on how much control you want over the situation. How much control you need over your project, whether you have the time to go and learn somebody else's code or not.

But I would encourage you to think of these responsive design frameworks as a way to get a lot of work done relatively quickly, that you can deliver more customized solutions to you clients. And for your websites than you can writing a bunch of custom code out of the box. You can get more done, more quickly, maybe make yourself a little bit more money too in the end and still have pretty decent quality code and a pretty good project.

Find answers to the most frequently asked questions about Up and Running with Bootstrap 3 .

Expand all | Collapse all
please wait ...
Q: I don't see the respond.min.js file at the URL mentioned in the Chapter 1 movie "Adding JavaScript to a Bootstrap HTML file" (https://github.com/scottjehl/Respond). How do I access the file?
A: It appears the respond.js author updated the code or rearranged the file structure. You can find respond.min.js at this URL: https://github.com/scottjehl/Respond/tree/master/dest.
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.

* Estimated file size

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


You have completed Up and Running with Bootstrap 3.

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

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.