Bootstrap was created by the developers at Twitter back in 2011, and

just like it says in big bright letters on it's homepage.

Bootstrap is the most popular HTML, CSS and JavaScript framework in the world for

building, responsive, mobile first projects on the web.

Over 7 million apps and sites across the web are built using Bootstrap.

Many web designers, front end developers and

programmers use Bootstrap to help them build projects faster and easier.

Even popular companies and agencies like NASA, FIFA, Spotify and Lyft,

use Bootstrap in their websites.

So, let's take a closer look.

Bootstrap is a front end framework.

So what, exactly, does that mean?

A framework is a reusable platform that helps you build higher level projects,

without worrying about the lower level, repetitive details.

For instance, when building a website or app, you'll want to have a presentable

layout that works on most devices and screen sizes.

In the layout, you may have lots of UI components, like nav bars,

buttons, headers, forms, modals and more.

Many of these components will appear in different places of the site or app.

So instead of creating your own custom solution for each of these,

you can use a framework, like Bootstrap as an out of the box solution for

implementing your layout and components in little to no time.

In other words, a front end framework solves many of the common layout,

typography and browser compatibility problems from the starts, so

you can simply focus on your content or design.

To view the latest documentation for Bootstrap, visit getbootstrap.com.

Now the website you're seeing, may look a little different than mine, and

that's okay.

That just means you're working with a more recent version of the Bootstrap

documentation.

And the layout, content, and component styles we're about to cover,

should still work the same way.

But be sure to check the teacher's notes of each video as they'll up-to-date

information about everything covered in this course.

Knowing your way around the Bootstrap documentation will give you a head start

when building projects because the docs contain information and

examples on just about everything in Bootstrap.

You can see exactly how something works right away,

right here in the DOCs without having to test it on your site first.

So it's always a good idea to keep the documentation handy,

because you'll reference it many, many times throughout the development process.

As I mentioned earlier, Bootstrap provides code for a lot of the common content and

layout styles, as well as JavaScript code components for

user interface tasks commonly used in website and app projects.

Click the documentation navigation link, and in the docs sidebar navigation,

you'll find links to pages containing download and installation instructions,

and the all the ready made classes for layout content and UI components.

For example, the layout section contains the style options you use to lay out your

project, and set up your responsive grid system.

And the content section lists the style options for

displaying your content including CSS resets, typography, images and more.

Now the book of the docs is here and the component section, as you can see there

are dozens of prebuilt components each performing a different UI tasks.

Now some interactive components like dropdown,modals and

collapsing elements require JavaScript to work.

Well the good news is you can skip writing that JavaScript yourself because Bootstrap

already provides it.

So instead of spending hours building and testing a responsive navigation,

a fluid column layout, a button group or a drop down menu for example.

I can simply browse through the docs, find the examples I like and copy and

paste the provided code snippets into my projects HTML file.

Bootstrap also comes with several handy utility classes to help you control

the spacing, alignment, colors even the visibility and

accessibility of your content.

And you can find those by clicking the Utilities sidebar link.

For example, utilities include classes for

assigning responsive friendly margin and padding values to an element.

There's also responsive floats enabling flexbox behavior, and

center aligning content.

Normally in your CSS,

you might include redundant declarations to style your content a certain way.

Well, Bootstrap provides classes for these common repetitive tasks,

so you don't have to write them.

And you don't have to use or

even download all the tools Bootstrap provides because it's easily customizable.

For instance, some developers use Bootstrap for

the predefined design styles and grid so

they can quickly build a well-presented site with a rock solid responsive layout.

Some use only the grid for laying out their pages and

add their own design with custom CSS.

And some may use it just for the JavaScript components.

In most projects you'll likely use the grid in only a few of these components.

In this course, we'll use popular components like the Nav Bar,

Jumbotron buttons, forms and a few others to see how you can

build a full fledged website design and lay out with Bootstrap.

You can view a showcase of some of the best designed websites using Bootstrap

at expo.getbootstrap.com.

So be sure to check out a few of these websites to get

a better idea of what's possible when using Bootstrap.

You'll also find links to useful Bootstrap resources like additional showcases,

themes, code snippets and more over in the Resources page.

Coming up in the next video, we'll look at the ways we can download and

install Bootstrap, then start building the full stack conf project.