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

What is Bootstrap?

From: Up and Running with Bootstrap 3

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.

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.

Show transcript

This video is part of

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

37 video lessons · 23148 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.