Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Bootstrap is "the most popular HTML, CSS, and JS 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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Bootstrap was created by the developers
at Twitter back in 2011, and
0:00
just like it says in big bright
letters on its homepage,
0:03
Bootstrap is the most popular HTML, CSS
and JavaScript framework in the world for
0:07
building responsive,
mobile first projects on the web.
0:13
Over 7 million apps and sites across
the web are built using Bootstrap.
0:15
Many web designers,
front end developers and
0:20
programmers use Bootstrap to help them
build projects faster and easier.
0:22
Even popular companies and agencies
like NASA, FIFA, Spotify and Lyft,
0:26
use Bootstrap in their websites.
0:30
So, let's take a closer look.
0:33
Bootstrap is a front end framework.
0:35
So what, exactly, does that mean?
0:37
A framework is a reusable platform that
helps you build higher level projects,
0:39
without worrying about the lower level,
repetitive details.
0:43
For instance, when building a website or
app, you'll want to have a presentable
0:46
layout that works on most devices and
screen sizes.
0:51
In the layout, you may have lots
of UI components, like nav bars,
0:54
buttons, headers, forms, modals and more.
0:58
Many of these components will appear
in different places of the site or app.
1:02
So instead of creating your own
custom solution for each of these,
1:06
you can use a framework, like Bootstrap
as an out of the box solution for
1:09
implementing your layout and
components in little to no time.
1:13
In other words, a front end framework
solves many of the common layout,
1:17
typography and browser compatibility
problems from the starts, so
1:21
you can simply focus on your content or
design.
1:26
To view the latest documentation for
Bootstrap, visit getbootstrap.com.
1:28
Now the website you're seeing,
may look a little different than mine, and
1:33
that's okay.
1:36
That just means you're working with
a more recent version of the Bootstrap
1:37
documentation.
1:40
And the layout, content, and
component styles we're about to cover,
1:40
should still work the same way.
1:43
But be sure to check the teacher's notes
of each video as they're up-to-date
1:45
information about everything
covered in this course.
1:48
Knowing your way around the Bootstrap
documentation will give you a head start
1:51
when building projects because
the docs contain information and
1:56
examples on just about
everything in Bootstrap.
1:59
You can see exactly how
something works right away,
2:02
right here in the DOCs without having
to test it on your site first.
2:05
So it's always a good idea to
keep the documentation handy,
2:08
because you'll reference it many, many
times throughout the development process.
2:11
As I mentioned earlier, Bootstrap provides
code for a lot of the common content and
2:15
layout styles,
as well as JavaScript code components for
2:20
user interface tasks commonly
used in website and app projects.
2:24
Click the documentation navigation link,
and in the docs sidebar navigation,
2:28
you'll find links to pages containing
download and installation instructions,
2:33
and the all the ready made classes for
layout content and UI components.
2:38
For example, the layout section contains
the style options you use to lay out your
2:42
project, and
set up your responsive grid system.
2:47
And the content section
lists the style options for
2:51
displaying your content including CSS
resets, typography, images and more.
2:55
Now the bulk of the docs is here in the
component section, as you can see there
3:01
are dozens of prebuilt components
each performing a different UI tasks.
3:06
Now some interactive components
like dropdown, modals and
3:11
collapsing elements require
JavaScript to work.
3:15
Well the good news is you can skip writing
that JavaScript yourself because Bootstrap
3:19
already provides it.
3:23
So instead of spending hours building and
testing a responsive navigation,
3:24
a fluid column layout, a button group or
a drop down menu for example,
3:29
I can simply browse through the docs,
find the examples I like and copy and
3:33
paste the provided code snippets
into my project's HTML file.
3:38
Bootstrap also comes with several handy
utility classes to help you control
3:42
the spacing, alignment,
colors even the visibility and
3:47
accessibility of your content.
3:50
And you can find those by clicking
the Utilities sidebar link.
3:51
For example, utilities include classes for
3:56
assigning responsive friendly margin and
padding values to an element.
3:59
There's also responsive floats
enabling flexbox behavior, and
4:04
center aligning content.
4:08
Normally in your CSS,
4:11
you might include redundant declarations
to style your content a certain way.
4:13
Well, Bootstrap provides classes for
these common repetitive tasks,
4:18
so you don't have to write them.
4:22
And you don't have to use or
4:24
even download all the tools Bootstrap
provides because it's easily customizable.
4:25
For instance,
some developers use Bootstrap for
4:30
the predefined design styles and grid so
4:33
they can quickly build a well-presented
site with a rock solid responsive layout.
4:35
Some use only the grid for
laying out their pages and
4:40
add their own design with custom CSS.
4:43
And some may use it just for
the JavaScript components.
4:45
And most projects you'll likely use the
grid in only a few of these components.
4:49
In this course, we'll use popular
components like the Nav Bar,
4:54
Jumbotron buttons, forms and
a few others to see how you can
4:57
build a full fledged website design and
lay out with Bootstrap.
5:00
You can view a showcase of some of
the best designed websites using Bootstrap
5:04
at expo.getbootstrap.com.
5:09
So be sure to check out a few
of these websites to get
5:11
a better idea of what's
possible when using Bootstrap.
5:14
You'll also find links to useful Bootstrap
resources like additional showcases,
5:17
themes, code snippets and
more over in the Resources page.
5:23
Coming up in the next video,
we'll look at the ways we can download and
5:27
install Bootstrap, then start
building the full stack conf project.
5:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up