Enhancing the Page

Now that we have all the necessary landing page elements in place, 0:00 let's add a few finishing touches. 0:03 For instance, the page looks a little boring with the dark text 0:05 against the plain white background. 0:08 So let's make the page more exciting by adding color. 0:10 Again, the handy utilities include classes or colors. 0:13 You can quickly set the background of an element to any 0:18 of these colors using one of the contextual classes. 0:21 And I think the bg-info background color will look good in my page. 0:24 So back in index.html, 0:29 I'll give my body tag the class bg-info. 0:33 This looks better, but now we should change the heading and paragraph text 0:41 color to white to give the content a nicer contrast against the blue background. 0:45 So back in the code snippets, you'll see that some examples use the class 0:51 text-white to make the text white. 0:55 So I'll add this class to my body tag. 0:58 The Sign up button is also looking a little too plain so 1:05 let's change the color. 1:08 To do that, I'll click over to Components and Buttons, and 1:11 I'll use on of the six predefined button styles shown here. 1:15 I think this primary dark blue color will look sharp against 1:20 a light blue background. 1:24 So I'll go ahead and copy the class btn-primary, and 1:27 back in index.html, I'll replace btn-secondary with btn-primary. 1:31 Give that a Save and what a difference adding a little color could make. 1:39 Finally, the content on the page would look better and 1:42 feel less cramp if we added white space between the top edge of the page and 1:46 the headline and between the lead text and sign up form. 1:51 Currently the spacing is looking a little too tight, so, back in the docs. 1:55 If I click over to the Utilities section, 1:59 the spacing page shows a wide range of shorthand responsive margin and 2:02 padding utility classes that let you modify an element's appearance, perfect. 2:08 So these class names use a certain format that sets the vertical and 2:15 horizontal padding or margin of an element. 2:19 Each class specifies the property, side and size, so if you see an m 2:22 in the class name that means it’s setting a margin, and p sets the padding. 2:28 And the sides are defined using letters like t, b, l, and r, 2:34 which sets the top, bottom, left and right sides, respectively. 2:38 So, for example, mt-0 means margin top 0, 2:42 meaning it removes the top margin of an element. 2:46 You see, Bootstrap uses the CSS rem unit to set margins and padding. 2:50 Rem which stands for root is a flexible CSS unit 2:57 that's always relative to the font size of the root element of the page. 3:01 So the numbers in these class names are multiples 3:05 on Bootstrap's at global default value of 1 rem. 3:09 For example, 1 sets the margin or padding to 0.25 rem, 3:13 2 will set it to 0.5 rem, then 4 to 1.5 rem, and 5 to 3 rem. 3:18 So for instance, .ml-1 means margin-left 1, 3:25 which sets the margin value to 0.25 rem. 3:30 So for example, to create more space between the headline and 3:34 the top of the page, I can give the H1 a top margin using the class, 3:38 mt for margin top, followed by dash and the amounts. 3:46 So let's set it to 3 rem using the number 5. 3:51 And I'll do the same for paragraph, 3:56 this time I'll apply a bottom margin of 3 rem using the class mb-5. 3:59 The space around the content looks great. 4:09 Now, it's less cluttered which improves the readability of the content. 4:11 All right, so our landing page for Full Stack Conf is now complete, and 4:16 it looks like we nailed all the design requirements given to 4:19 us by the conference organizers in what? 4:22 Ten minutes or so, that's impressive. 4:25 Now, you'd still need to program the sign-up form yourself to collect your 4:28 users email addresses. 4:32 Bootstrap doesn't have that feature since it's a front-end framework. 4:33 But after this course, you could check out other Treehouse courses that will teach 4:37 you how to program a form, using a programming language like Java Script, 4:41 PHP, Ruby, Java, or Python. 4:45 You've seen how you can quickly build the functional layout and 4:48 design in just a few minutes using Bootstrap. 4:51 Now, we're ready to start building the website for Full Stack Conf. 4:54 In the next section, I'll walk you through the project we're going to build, 4:57 then you'll learn how to use Bootstrap's mobile-first grid system to lay out your 5:01 content and UI components. 5:05