FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Adding a Sidebar and Source Ordering

In this lesson we’ll add a sidebar to our blog posts page and do some source ordering to make sure our navigable elements are presented first on mobile devices.

Related Links

4.2 Adding a Sidebar and Source Ordering

Welcome back to Power Up Your Portfolio With Bootstrap. I'm your instructor, Corey Simmons. In our last lesson, we broke ground on the blog page. But, it's still not done. What blog is complete without a nice sidebar? In this lesson, we'll add that sidebar, and learn how Bootstrap's source ordering works. First, let's add the sidebar. Open up our Blog.html file and right above our post column let's add in a side element with a class sidebar. And class Call-Md-4. Inside of that sidebar, just type the text, sidebar. Save and refresh, and we can see our sidebar on the left side of the page. We don't want this. We want our sidebar on the right side of the page when visitors are looking at the page on anything but a mobile device. If they're on a mobile device, we want the sidebar to simply stack on top of the post container. To accomplish this, we have to use something called source ordering. Navigate to get Click on CSS then on Grid system, then on Column ordering. All we have to do is append col-md-push-8 to our sidebars classes and col-md-pull-4 to our posts container classes. Save and refresh and viola, our sidebar is now on the right side of the page on tablet and above, but I still don't like how close this sidebar is to the main content, so let's offset it a bit. To do this, let's change the sidebar from col-md-4. To call-md-3, and add the class, call-md-offset-1 to it. Excellent. Now, let's add some widgets to our sidebar. First one will simply be an about me section, wrapped in a div with a class of widget. The next widget will be a list of links to recent posts wrapped in a div with the class of widget. [BLANK_AUDIO] And the last widget will be a list of recent projects. We'll give this one a class of widget, or also a class of recent dash projects, so we can do some custom styling to this element. Inside of it, we'll have a header tag like the other widgets, but then let's add a UL with the class of row and put our anchored images within list items that are part of a grid. Each of these list items a class of call dash MD dash four since we want three items per row. And we'll just use dummy placeholder images inside of these. And don't forget to apply the image response class to these dummy images. Then duplicate your recent project several times. Save and refresh and our sidebar is looking all right. Well let's add some styling to it to make it look a bit better. Firstly, we don't want the bottom of our sidebar touching anything, so we'll add sidebar margin bottom one rem to our style sheet. Same with our widgets, so add sidebar widget margin bottom three rems. We don't want any of our lists and our sidebars to have padding on them or bullets, so let's add sidebar UL. Padding zero, list-style none. Well we want our list items to have some margin below them to help push the links off each other, so sidebar li, margin-bottom 0.5 rem. Let's give our anchor text a nicer muted color so it fits in with the sidebar better. Side bar, LIA, color 696969. And let's replace the hover underline with a dotted border as a nice effect. Side bar, LIA, hover text-decoration none border bottom one pixel dotted 838383. [BLANK_AUDIO] Finally, let's add some custom styling to our recent project's widget. Let's push these images off each other vertically, with a bit more, margin bottom of one rim. And let's add the same border radius and gray scale effect to them that we've been adding to all the other imaging throughout the site. [BLANK_AUDIO] Save and refresh, contract our viewport. And our side bar looks great. In this lesson, we learned about the important concept called source ordering and how to offset columns to give them some breathing room. We finish up our blog page and in our next lesson, we'll add a simple contact page and wrap up our portfolio build.

Back to the top