Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:18Length:1.9 hours
Bootstrap3
  • Overview
  • Transcript

5.5 Footer, Scrollspy and Responsive Changes

In the final lesson of the course we'll build the footer, implement the ScrollSpy plugin and also adjust the layout's appearance on various screen sizes.

5.5 Footer, Scrollspy and Responsive Changes

Hey. Welcome to the final lesson of this course. Now, in the previous lessons, I've built all of these sections right here, ending with the Contact section. But we also need a footer for our page. And in the footer, I want to place pretty much the same content that I used in this well right here. As well as the traditional, copyright information. So right here I'm gonna say FOOTER. I'm gonna create a footer tag. I'm gonna do an hr to separate things. And then basically, I'm gonna copy, let's see, where is it? FAQ, container, okay. So I'm gonna copy this content, [SOUND] from here. And I'm gonna put it in the footer. So, let's see how it looks like. Okay. Now, below this, I'm gonna do another hr. And below that, I wanna add some links to a Twitter and Facebook. And I'm gonna use an ul, or a list with a class of list-inline. Now, this will allow me to display the list items on the same line. And it will contain a list item, times 2 with an anchor tag. And in here, I'm just gonna say Twitter and Facebook. All right, now once this done, I'm gonna create another paragraph and put the traditional copyright information. All right, let's have a look. And that is our complete page. So, you saw just how fast it is to create a complete page that's already styled by using bootstrap. Now, before I finish this course, I just wanna make a few tiny changes to how this page looks like on smaller devices. So for that I'm going to bring up the inspector. And I'm gonna start resizing to see, exactly what happens at different break points. So the first breakpoint is less than 1,200 pixels. [BLANK_AUDIO] Which is here. And notice my gallery looks good. My testimonials should be on three columns because there's enough room here. And what else? The features. Again, they should maintain their appearance just like they did on the higher brick point. Same goes for these. And also for the contact. So let me go down even further, to 992 pixels. That's another break point right there. See? So, right here there is another change. And my testimonials are placed correctly on different rows, because having them on three separate columns here is not really a good idea. Let's see. Features. These could still be organized in two columns, same goes for the smaller features. [SOUND] All right so, here's what we're gonna do. We're gonna go back to our code, to our testimonials. And I'm gonna change, instead of lg I'm gonna put md. Which basically means, from medium size screens upwards, they're gonna be organized in columns. Yeah. Just like that. And on small devices, which is the break point I'm on right now, they are stacking. Okay, cool. So testimonials, it's all figured out. Even on smaller devices they look good. Now, the features. The features should maintain their columns even on small devices. So let's go. Features call lg, I'm going to replace the lg. [BLANK_AUDIO] With sm, which is small. Refresh, and there it is, now the images are resized. This is where the img responsive class kicks in. Okay. And also, keep the same column structure on these features. So, instead of lg here, I'm going to do sm. Okay, just like that. So, now, these staying columns. At small device sizes, medium device sizes, which is this, and large. Okay, what else? Gallery looks good. Contact looks good, as it should be. Okay. So, going down even further, this is the last breakpoint. Notice that the navigation, is now a drop down. Let's see, testimonials, features. The features should now be displayed like this. [BLANK_AUDIO] Notice the inline form is now on two different rows, their their elements. [BLANK_AUDIO] Okay. [BLANK_AUDIO] And that's basically it for the responsive part. Now, I just realized I forgot something I said in the beginning I'm gonna add scroll spy to, to this menu here, so that when I scroll to a specific, section the corresponding menu item will become active. So let's do that real quick. The way to do that is to go to body, because this is what you want to track for scrolling. And you're gonna say data-spy="scroll". So, what's the event that you wanna track? It's the scroll. And then, what's the, the navigation that you wanna target for the scroll spy event? And that's going to be data-target="main-navbar". It's this one right here. So, now, if I refresh and I scroll to a specific section, these links will lit up. Gallery, FAQ and Contact. So, if you click on them, it's gonna go to, on the correct sections. And that's it basically. Now as I said, using Bootstrap to build this page is really awesome, but you gotta take it one step further from here you can experiment with different fonts, different colors. You can tweak different styles to your liking, because Bootstrap basically offers you the skeleton to build on. Okay, that was the last lesson. Thank you for watching.

Back to the top