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