Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll add callout buttons using Bootstrap's predefined button styles. The buttons will link users to the conference registration form and list of speakers.
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 we're going to add call to action,
or callout, buttons to the page.
0:00
The buttons will link users to
the conference registration form and
0:04
a list of speakers,
as shown in the mock up.
0:07
I'll show you how to quickly
create stylish buttons
0:10
using Bootstrap's
predefined button styles.
0:12
First, back in index.html,
I'll scroll down to just below
0:15
the schedule content and
add a comment for my callout button.
0:20
So Bootstrap has nine
predefined button styles,
0:29
they even include hover and active states.
0:33
I like the design style of the outline
button shown here which apply the color
0:37
to the borders and text only.
0:42
And the info theme matches the blue
background color of the jumbotron.
0:44
So I'll copy the button snippet with
the class button outline info, so
0:49
the third one from the bottom, and
paste it below my callout button comment.
0:54
The call to action for this button
will be Don't Miss Out, Register Now.
1:01
The callout button is an important
component of our site.
1:16
After all, we want to make sure that
people come to the conference, so
1:20
it should make a big statement by taking
up more visual space on the page.
1:24
And I know from reading the Docs
that you can make a button larger
1:29
using the class button large.
1:33
So I'll give my callout
button to the class btn-lg.
1:35
And I see that the button currently
displays on the same line as other
1:42
content.
1:46
So to display the button
on a separate line,
1:46
I'll first give it the Bootstrap
utility class d-block,
1:50
and this sets a button's
display value to block.
1:55
Then to center the button via left and
right margin values,
2:00
I'll use the horizontal
centering utility class mx-auto.
2:05
All right, so now to create more
separation between the button and
2:14
content appearing above and below it.
2:18
I'll add a top and
bottom margin shorthand class of my-5
2:21
Next, we'll add the main registration and
2:33
speaker's callout buttons
inside the jumbotron.
2:36
Instead of displaying the two large
buttons side by side like this,
2:39
we can make a group of buttons more
visually interesting with button group.
2:43
Button groups group buttons together
on a single line either vertically or
2:48
horizontally.
2:52
So I'm going to copy this basic example,
button group snippet, into my
2:53
jumbotron component right below the lead
paragraph, then I'll customize it.
2:58
First, I'll give the button
group a top margin of 1.5 rem by
3:09
adding the class mt-4, and change
the aria label value to Callout buttons.
3:14
I only need two buttons
inside this button group, so
3:23
I'll delete the third button and change
the first button's text to Register Now.
3:27
I want the callout button
to stand out visually, so
3:36
I'll set its background color to a dark
blue with the class btn-primary.
3:39
And increase the button size from small
to large, using the class btn-large.
3:44
The register callout buttons
will open up a modal or
3:54
pop-up window containing a form,
and we'll build that part later.
3:57
Now the second button in
this button group will link
4:02
to the speaker section of the page,
so it needs to be an anchor element.
4:06
Fortunately you can apply these
same button styles to a tags, so
4:10
I'll change the second set of button tags
to a tags and delete the type attribute.
4:14
Then I'll change the text to See Speakers.
4:24
And I'll add an href attribute to link
the button to the speaker section.
4:31
Then I'll make this button lighter
with the class btn-light and
4:39
increase the button size from small
to large with the class btn-large.
4:44
All right, so now to link
the button to the speaker section I
4:54
can give the speaker's
heading the id speakers.
4:59
Our page is coming along nicely.
5:12
In the next video we'll
build a footer nav and
5:15
use the drop down component
to display a list of links.
5:18
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