1
00:00:00,320 --> 00:00:03,520
Bootstrap was created by the developers
at Twitter back in 2011, and

2
00:00:03,520 --> 00:00:07,870
just like it says in big bright
letters on its homepage,

3
00:00:07,870 --> 00:00:13,070
Bootstrap is the most popular HTML, CSS
and JavaScript framework in the world for

4
00:00:13,070 --> 00:00:15,950
building responsive,
mobile first projects on the web.

5
00:00:15,950 --> 00:00:20,710
Over 7 million apps and sites across
the web are built using Bootstrap.

6
00:00:20,710 --> 00:00:22,912
Many web designers,
front end developers and

7
00:00:22,912 --> 00:00:26,483
programmers use Bootstrap to help them
build projects faster and easier.

8
00:00:26,483 --> 00:00:30,859
Even popular companies and agencies
like NASA, FIFA, Spotify and Lyft,

9
00:00:30,859 --> 00:00:33,130
use Bootstrap in their websites.

10
00:00:33,130 --> 00:00:35,190
So, let's take a closer look.

11
00:00:35,190 --> 00:00:37,180
Bootstrap is a front end framework.

12
00:00:37,180 --> 00:00:39,320
So what, exactly, does that mean?

13
00:00:39,320 --> 00:00:43,460
A framework is a reusable platform that
helps you build higher level projects,

14
00:00:43,460 --> 00:00:46,820
without worrying about the lower level,
repetitive details.

15
00:00:46,820 --> 00:00:51,336
For instance, when building a website or
app, you'll want to have a presentable

16
00:00:51,336 --> 00:00:54,224
layout that works on most devices and
screen sizes.

17
00:00:54,224 --> 00:00:58,575
In the layout, you may have lots
of UI components, like nav bars,

18
00:00:58,575 --> 00:01:02,470
buttons, headers, forms, modals and more.

19
00:01:02,470 --> 00:01:06,430
Many of these components will appear
in different places of the site or app.

20
00:01:06,430 --> 00:01:09,840
So instead of creating your own
custom solution for each of these,

21
00:01:09,840 --> 00:01:13,850
you can use a framework, like Bootstrap
as an out of the box solution for

22
00:01:13,850 --> 00:01:17,490
implementing your layout and
components in little to no time.

23
00:01:17,490 --> 00:01:21,860
In other words, a front end framework
solves many of the common layout,

24
00:01:21,860 --> 00:01:26,019
typography and browser compatibility
problems from the starts, so

25
00:01:26,019 --> 00:01:28,906
you can simply focus on your content or
design.

26
00:01:28,906 --> 00:01:33,539
To view the latest documentation for
Bootstrap, visit getbootstrap.com.

27
00:01:33,539 --> 00:01:36,450
Now the website you're seeing,
may look a little different than mine, and

28
00:01:36,450 --> 00:01:37,048
that's okay.

29
00:01:37,048 --> 00:01:40,026
That just means you're working with
a more recent version of the Bootstrap

30
00:01:40,026 --> 00:01:40,740
documentation.

31
00:01:40,740 --> 00:01:43,630
And the layout, content, and
component styles we're about to cover,

32
00:01:43,630 --> 00:01:45,380
should still work the same way.

33
00:01:45,380 --> 00:01:48,850
But be sure to check the teacher's notes
of each video as they're up-to-date

34
00:01:48,850 --> 00:01:51,750
information about everything
covered in this course.

35
00:01:51,750 --> 00:01:56,470
Knowing your way around the Bootstrap
documentation will give you a head start

36
00:01:56,470 --> 00:01:59,560
when building projects because
the docs contain information and

37
00:01:59,560 --> 00:02:02,320
examples on just about
everything in Bootstrap.

38
00:02:02,320 --> 00:02:05,207
You can see exactly how
something works right away,

39
00:02:05,207 --> 00:02:08,890
right here in the DOCs without having
to test it on your site first.

40
00:02:08,890 --> 00:02:11,311
So it's always a good idea to
keep the documentation handy,

41
00:02:11,311 --> 00:02:15,530
because you'll reference it many, many
times throughout the development process.

42
00:02:15,530 --> 00:02:20,604
As I mentioned earlier, Bootstrap provides
code for a lot of the common content and

43
00:02:20,604 --> 00:02:24,158
layout styles,
as well as JavaScript code components for

44
00:02:24,158 --> 00:02:28,165
user interface tasks commonly
used in website and app projects.

45
00:02:28,165 --> 00:02:33,206
Click the documentation navigation link,
and in the docs sidebar navigation,

46
00:02:33,206 --> 00:02:38,396
you'll find links to pages containing
download and installation instructions,

47
00:02:38,396 --> 00:02:42,939
and the all the ready made classes for
layout content and UI components.

48
00:02:42,939 --> 00:02:47,803
For example, the layout section contains
the style options you use to lay out your

49
00:02:47,803 --> 00:02:51,520
project, and
set up your responsive grid system.

50
00:02:51,520 --> 00:02:55,200
And the content section
lists the style options for

51
00:02:55,200 --> 00:03:01,750
displaying your content including CSS
resets, typography, images and more.

52
00:03:01,750 --> 00:03:06,590
Now the bulk of the docs is here in the
component section, as you can see there

53
00:03:06,590 --> 00:03:11,228
are dozens of prebuilt components
each performing a different UI tasks.

54
00:03:11,228 --> 00:03:15,365
Now some interactive components
like dropdown, modals and

55
00:03:15,365 --> 00:03:19,240
collapsing elements require
JavaScript to work.

56
00:03:19,240 --> 00:03:23,285
Well the good news is you can skip writing
that JavaScript yourself because Bootstrap

57
00:03:23,285 --> 00:03:24,360
already provides it.

58
00:03:24,360 --> 00:03:29,012
So instead of spending hours building and
testing a responsive navigation,

59
00:03:29,012 --> 00:03:33,242
a fluid column layout, a button group or
a drop down menu for example,

60
00:03:33,242 --> 00:03:38,144
I can simply browse through the docs,
find the examples I like and copy and

61
00:03:38,144 --> 00:03:42,960
paste the provided code snippets
into my project's HTML file.

62
00:03:42,960 --> 00:03:47,380
Bootstrap also comes with several handy
utility classes to help you control

63
00:03:47,380 --> 00:03:50,690
the spacing, alignment,
colors even the visibility and

64
00:03:50,690 --> 00:03:51,860
accessibility of your content.

65
00:03:51,860 --> 00:03:56,320
And you can find those by clicking
the Utilities sidebar link.

66
00:03:56,320 --> 00:03:59,240
For example, utilities include classes for

67
00:03:59,240 --> 00:04:04,040
assigning responsive friendly margin and
padding values to an element.

68
00:04:04,040 --> 00:04:08,199
There's also responsive floats
enabling flexbox behavior, and

69
00:04:08,199 --> 00:04:09,915
center aligning content.

70
00:04:11,986 --> 00:04:13,354
Normally in your CSS,

71
00:04:13,354 --> 00:04:18,510
you might include redundant declarations
to style your content a certain way.

72
00:04:18,510 --> 00:04:22,270
Well, Bootstrap provides classes for
these common repetitive tasks,

73
00:04:22,270 --> 00:04:24,162
so you don't have to write them.

74
00:04:24,162 --> 00:04:25,801
And you don't have to use or

75
00:04:25,801 --> 00:04:30,939
even download all the tools Bootstrap
provides because it's easily customizable.

76
00:04:30,939 --> 00:04:33,588
For instance,
some developers use Bootstrap for

77
00:04:33,588 --> 00:04:35,731
the predefined design styles and grid so

78
00:04:35,731 --> 00:04:40,830
they can quickly build a well-presented
site with a rock solid responsive layout.

79
00:04:40,830 --> 00:04:43,600
Some use only the grid for
laying out their pages and

80
00:04:43,600 --> 00:04:45,900
add their own design with custom CSS.

81
00:04:45,900 --> 00:04:49,306
And some may use it just for
the JavaScript components.

82
00:04:49,306 --> 00:04:54,443
And most projects you'll likely use the
grid in only a few of these components.

83
00:04:54,443 --> 00:04:57,833
In this course, we'll use popular
components like the Nav Bar,

84
00:04:57,833 --> 00:05:00,915
Jumbotron buttons, forms and
a few others to see how you can

85
00:05:00,915 --> 00:05:04,850
build a full fledged website design and
lay out with Bootstrap.

86
00:05:04,850 --> 00:05:09,200
You can view a showcase of some of
the best designed websites using Bootstrap

87
00:05:09,200 --> 00:05:11,830
at expo.getbootstrap.com.

88
00:05:11,830 --> 00:05:14,550
So be sure to check out a few
of these websites to get

89
00:05:14,550 --> 00:05:17,700
a better idea of what's
possible when using Bootstrap.

90
00:05:17,700 --> 00:05:23,277
You'll also find links to useful Bootstrap
resources like additional showcases,

91
00:05:23,277 --> 00:05:27,290
themes, code snippets and
more over in the Resources page.

92
00:05:27,290 --> 00:05:30,543
Coming up in the next video,
we'll look at the ways we can download and

93
00:05:30,543 --> 00:05:33,870
install Bootstrap, then start
building the full stack conf project.