Preview
Video Player
00:00
00:00
Getting Started
3:14There are a few ways to quickly get started using Bootstrap 4, each way might appeal to a different skill level or use case.
There are a few ways to quickly
get started using Bootstrap.
0:00
Each way might appeal to a different
skill level or use case.
0:03
To download Bootstrap,
0:07
you can click the big Download button here
on the main page at getbootstrap.com.
0:07
And this brings you to
the Download section of the docs,
0:13
where you're presented with a few
different sets of instructions for
0:15
how to download and
install the Bootstrap framework.
0:18
For example, you can download the compiled
and minified CSS and JavaScript, and
0:21
link them to your HTML file.
0:26
Or download everything, including
Bootstrap's source Sass, JavaScript, and
0:28
documentation files.
0:32
And if you wanna pull in Bootstrap's
source files into a new or
0:34
existing project, you can use package
managers like npm, Bower, even Composer.
0:37
Now, the fastest way to get a project
up and running with Bootstrap
0:43
is using the Bootstrap CDN,
or content delivery network.
0:47
So if you don't want to download or
install any files and
0:51
get started right away, simply use the CDN
links provided here in the download page.
0:54
And when you add these sets of links to
your HTML, you load Bootstrap's CSS and
1:00
JavaScript remotely from the CDN servers.
1:04
So now, I'll click the Introduction link.
1:07
And the Starter template of this page
1:10
provides all the CDN links you need to
include Bootstrap in your web page.
1:13
You can also use this Starter
template as a basis for your page.
1:17
So, in this course, we're going to build
our website using the Bootstrap CDN.
1:22
That way, we won't have to worry about
using additional tooling, like a build
1:27
system, to compile our code and
view our latest changes in the browser.
1:31
We'll simply focus on the CSS and
JavaScript tools Bootstrap provides,
1:34
without having to download or
install anything.
1:38
But you can check the teacher's notes for
resources and
1:41
related videos on downloading,
installing and
1:44
using Bootstrap with other methods listed
here along with other front end tools.
1:46
Now, if you feel comfortable using
Bootstrap by downloading the source files
1:52
or installing it with a package manager,
then go for it.
1:56
Just make sure,
you follow the instructions carefully, and
1:58
have all the required dependencies
installed on your computer.
2:01
And if at some point you feel like you've
strayed too far off course, that's okay.
2:04
You can always launch
the latest workspace,
2:07
or download the project files and
pick up right where I left off.
2:09
Speaking of which, go ahead and
launch the workspace with this video or
2:13
open up the project files,
if you're using your own text editor.
2:16
I already have a Bootstrap 4 starter
template all set up for you.
2:18
The template contains a link to
Bootstrap's CSS as well as the responsive
2:22
viewport meta tag to ensure proper
rendering and zooming for all devices.
2:28
Now, the page needs a title.
2:32
So inside the head tag, I'll add a title
tag with the text, Full Stack Conf.
2:33
Let's also change the h1
content to Full Stack Conf.
2:45
I'll give this a Save.
2:53
And when you preview index.html in
the browser, it doesn't look like much yet
2:55
because besides the heading,
there's no other content.
2:59
We'll add that next.
3:02
We've setup our starter template, so
3:04
we're ready to begin building
a simple webpage with Bootstrap.
3:06
In the next video,
3:09
you'll see how Bootstrap makes it really
easy to style and lay out your content.
3:10