Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Buttons and Button Groups5:22 with Guil Hernandez
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.
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 valleys, 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 That'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 up