Preview
Video Player
00:00
00:00
Creating a Simple Page
7:31Now 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.
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