Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Bootstrap Basics!
You have completed Bootstrap Basics!
Preview
Now it's time to create our first project using Bootstrap 4! In this video, you'll build a simple "Coming Soon" page for Full Stack Conf.
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
Now it's time to create our
first project using bootstrap.
0:00
Later on in this course we're
going to build the website for
0:04
Full Stack Conf,
a conference about all things JavaScript.
0:07
In the meantime, we've been asked to
create a simple Coming Soon landing page
0:10
for Full Stack Conf while
the actual site's being built.
0:14
The conference organizers even gave us
a mock-up of how the page should look.
0:17
As you can see, the page should have
a big headline with the conference name,
0:21
a short description below it,
and a sign up form so
0:26
users can receive information
about the conference.
0:29
I think you'll be surprised by just
how quickly we can build this page.
0:32
So let's dive into the Bootstrap
documentation and get to work.
0:36
Bootstrap comes with lots of global
styles and settings for your content.
0:40
For example, it uses the Normalized CSS
reset, which provides many base styles so
0:44
that HTML tags render the same across
different browsers and operating systems.
0:48
Then it further builds
on those base CSS rules
0:53
with a custom set of styles called Reboot.
0:55
These are element-specific CSS
styles that help display common HTML
0:58
elements like headings, forms, text and
more in an elegant, yet consistent way.
1:03
So Normalize and Reboot is what will make
your project look the same in browsers
1:08
like Chrome, Firefox, Safari, and IE.
1:12
We already have our page heading, so
let's add more content to the page.
1:15
Back in index.html,
right below the heading,
1:19
I'll create a paragraph
with the text Coming Soon,
1:24
a One-day Conference About
All Things JavaScript.
1:29
I'll give this a save, and in the browser
we're seeing the default text
1:41
styles created by normalize.css and
reboot.
1:45
The content is nicely styled, but
the conference organizer's mock-up
1:49
shows that the heading and
text need to be larger with more presence.
1:53
Well, with Bootstrap,
you can customize typography for
1:57
headings, body text, lists, and more.
2:00
So let's click over to the Typography
page and see what classes we can use.
2:03
If I click to the display heading section,
I see that I can use
2:07
one of these display heading classes
to make my heading stand out.
2:12
And I want the largest heading
of the four, display-1.
2:15
So in my HTML,
I'll give the h1 the class display-1.
2:20
The heading is now the right size, but now
to give my page balance I should increase
2:32
the font size of the paragraph below.
2:37
Back in the docs, right
below the display headings,
2:39
I see that you can also make a paragraph
stand out by giving it the class lead.
2:43
So I will copy this class attribute and
2:48
paste it inside my
paragraph's opening tag.
2:51
This looks much better, it looks like
we got the size of the content right,
2:57
all with just two simple classes.
3:01
Well, now we should wrap
the content inside a container.
3:03
That way the content isn't flush
with the left edge of the page.
3:06
Containers are the most basic
layout element in Bootstrap.
3:10
They wrap your content and components, and
3:14
as you'll learn in a later video, they
provide the foundation for page layout.
3:16
So back inside index.html,
I'll place my h1 and
3:21
paragraph inside a div, and
I'll give the div the class container.
3:25
And just like that, we have
a responsive container for our page.
3:39
Now there's more space around the content.
3:43
And if I resize the browser,
notice how the content adjusts and
3:46
resizes to the new break point width.
3:50
Bootstrap containers can
either be fixed or fluid.
3:53
So the class container-fluid
creates a full width container
3:58
that spans the entire
width of the viewport.
4:02
Later you'll learn more about how
containers are used to contain
4:04
the grid system.
4:07
So our content would look better if it
was center aligned inside the container.
4:09
I know that the Utilities page has lots
of helper classes I can use in my layout.
4:14
So I'll click over to Utilities,
then Text.
4:19
And here I see that there is a section for
text alignment.
4:24
And if I scroll down, I see that the
second code snippet displays a class named
4:27
text-center that center aligns
text on all viewport sizes.
4:32
So I'll copy just
the class text-center and
4:37
paste it in my container's
class attribute.
4:41
I'll give that a save, refresh.
4:46
And now all of our content is
center aligned on the page.
4:48
Let's add the sign up form next.
4:53
Bootstrap provides custom styled
form elements that look consistent
4:55
in all browsers.
4:59
We'll use many of these later on
when we build the Full Stack Conf
5:01
registration form.
5:04
For now, I just need a simple
text field and submit button.
5:05
So if I click on to Input group,
I'll see a lot of options for
5:08
adding text and
buttons on either side of an input field.
5:13
And I really like the button
add-ons example here,
5:19
because it aligns the button and
text field flush against each other.
5:22
And it looks like the second
example is exactly what I need for
5:26
my simple landing page.
5:29
So I’ll select and
copy just the second div with the class
5:31
col-lg-6, and paste it below my paragraph.
5:36
So the lg in this column class stands for
large.
5:45
This means the sign up form is
inside a div that spans the width of
5:50
6 columns in Bootstrap's
large breakpoint range.
5:54
And you'll learn all about grid columns
and breakpoints in the next stage.
5:58
So in the form snippet I'll
change the placeholder text and
6:02
aria-label to Enter your email for info.
6:06
And I'll change the button
text from Go to Sign up.
6:16
Give that a save.
6:23
It's looking good, the input
group combines the text field and
6:26
button on the same line.
6:29
We still need to center the sign up form.
6:31
Back in the docs, I'll click the Utilities
link and scroll down and click Spacing.
6:35
In the right sidebar navigation,
6:44
I see that there is
a Horizontal centering example.
6:46
Well, Bootstrap provides
a class of mx-auto for
6:49
centering fixed width block level content.
6:54
So in other words, content that
has display block and a width set.
6:57
So I'll add this class to my column's
class value by simply copying it
7:01
from the docs and pasting it
inside this div's class attribute.
7:06
The class sets the div's left and
right margin values to auto,
7:13
which horizontally center
aligns it on the page.
7:17
So now the form is aligned with
the rest of the page content, good.
7:20
Up next, we'll talk about how
to enhance this simple page
7:23
with Bootstrap's utility styles and custom
styles for button and background colors.
7:27
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