Styling Content7:39 with Guil Hernandez
Before we start using the grid options and configurations, let's add more content to the columns, then style it using Bootstrap's content, typography, and utility classes.
Before we get into some of the grid options and configurations, 0:00 let's add more content to the columns then style it using Bootstrap's content, 0:03 typography, and utility classes. 0:08 First the content on the page would look better if there was a little more 0:10 space between the headings and the top of the page. 0:13 Well I can apply top padding to the container 0:17 using Bootstrap's spacing utility classes. 0:20 Just like the margin utility classes we used earlier in the Coming Soon landing 0:23 page, we can quickly set the vertical and horizontal padding of an element. 0:27 So to apply top padding, I'll give container 0:32 the class pt for patting top followed by the size. 0:36 I'll use four which applies 1.5 rim of top padding. 0:41 And while we're at it, let's also give the h3 elements a bottom 0:44 margin to separate them from the paragraphs and list. 0:49 This time I'll use the class mb-4 which will apply a bottom margin of 1.5 rim. 0:53 So go ahead and copy this class attribute, 1:00 paste it inside the second h3's opening tag and the third H3. 1:03 And that looks better. 1:10 Now in the first column I'm going to add an image of Portland, 1:11 Oregon, the city that's hosting Full Stack Conf. 1:17 So right below the h3 I'll add an image tag. 1:21 The image I wanna use is located inside the image directory of our workspace and 1:29 it's named pdx.jpeg. 1:34 So in the source attribute we'll add img/pdx.jpg. 1:38 Let's also include some alt text that says Portland. 1:44 I'll also give the image a bottom margin 1:51 of 1.5 rim with the class mb-4. 1:56 I'll give this a save, and right away you can see that the image is huge. 2:00 Well the image's original size is 1024 by 436 pixels, 2:06 so it's taking up most of the page. 2:13 But we need to make the image responsive so that it scales with the parent column. 2:16 Bootstrap provides classes for opting images into responsive behavior so 2:22 they never become larger than their parent elements. 2:27 So if I give the image the class img-fluid, 2:31 The image will scale with the column, so 2:42 now it will never be wider than the column width. 2:45 Back in the docks, click the utilities link, and go to the Borders page. 2:48 And let's use a border utility to apply a border radius to the image. 2:55 So we can change the shape of an element with these border radius classes. 3:00 For example, a class rounded circle gives an element a circular shape. 3:04 I think the first rounded shape here better fits the design we're creating 3:09 because it applies a small border radius on each side. 3:13 So back in my image element I'll add the class rounded. 3:17 And the image looks good. 3:26 Now let's quickly lay some groundwork for the other content sections of our site, 3:28 the speakers and schedule section. 3:32 So back in index.html, inside the container rule, 3:35 right below the closing tag for the about content, I'll add comments so 3:39 we can easily locate the speakers and schedule sections in our code. 3:44 So first I'll add a comment for speakers, and 3:48 below that let's add a comment for schedule. 3:52 Now we'll create headings for these two sections. 4:01 Below the speaker's comment, 4:04 I'll add an h1 tag with the text Speakers. 4:07 And we'll build these two sections out in the next part of the course. 4:12 But in the mean time, I'll add place holder text below the headings. 4:15 So for speakers, I'll write Speaker bios go here. 4:19 And right below that I'll add a comment to indicate where the speaker section ends. 4:27 Next, below the schedule comment, I'll add an h1 tag for Schedule and 4:36 placeholder text that says Conference schedule goes here. 4:43 And below that a comment that indicates where the schedule section ends. 4:52 The site mock-up shows that the speakers and 5:02 schedule headings should be larger and centered in the page. 5:06 So I'll use a display heading class to increase the text size. 5:11 I want the headings to stand out slightly, so I'll give the h1s the class display-4. 5:15 And to center align the headings I can use the same text alignment class we used to 5:30 center align the content earlier and 5:35 the coming soon landing page, which is text-center. 5:37 Now let's add top and bottom margins to each heading 5:47 to separate them from any content placed above and below them. 5:50 By now you know that we can use spacing utility classes where top, right, 5:55 bottom, left margin, or padding. 5:59 Well besides the individual side properties, 6:02 Bootstrap provides short hand properties to set both the top and 6:05 bottom margin or padding, also the left and right margin or padding. 6:09 Even a shortcut to set padding or margin on all four sides. 6:13 So to apply vertical margins, that is top and 6:17 bottom margins, use the class my followed by the size. 6:22 I'll apply a top and bottom margin of 3 rim with my-5. 6:26 Now to give an element left and right margins at once use x and 6:32 the class name, for example, mx-5. 6:36 And to apply margins on all four sides you don't include a side, for example, m-5. 6:39 I'll stick with the class my-5, and apply it to the schedule heading as well. 6:45 Finally I'll add some variety and contrast 6:57 to the page by lightning the heading color with a heading typography class. 7:00 So back in the Docs I'll click Content, Typography, and Customizing headings. 7:05 And I like the medium gray color of this faded text. 7:12 So I can apply this color to my headings by giving them the class, text-muted. 7:16 All right, so in the next video you'll learn more about predefined classes for 7:30 creating grid columns and controlling how columns display in a given breakpoint. 7:34
You need to sign up for Treehouse in order to download course files.Sign up