Join Ray Villalobos for an in-depth discussion in this video What we'll build, part of Bootstrap Layouts: Responsive Single-Page Design.
- Before we get started, I wanted to show you some of the features of the website we'll be building in this course. This is a responsive single-page website built with Bootstrap, and it doesn't look like any Bootstrap site you've seen before because the purpose for this project is to make sure that you know how to design something that doesn't use any of the Bootstrap defaults. So, for example, we have a navigation that doesn't look like the Bootstrap navigation, and where if you click on any of these links, you'll see that there's a smooth scroll down to that area.
Also, if we go back home you'll notice that the navigation looks different when you are in this top section. As you scroll down, when you get to a certain point, the navigation will change to a slightly different version through CSS. We'll get this sort of darker brown bar here, and also the different pages highlight as we scroll through the different places on this site. If we make it back home, you'll notice that this is a full-screen carousel. If we resize this window, you'll notice that no matter what size I make the window, our content immediately follows the first screen.
So if I scroll down, you'll see that Our Mission follows right here. And if I make this this size, you'll notice that as soon as I scroll up, Our Mission shows up. Regardless of how big I make the site, this top area is always gonna take the full width of the browser window, and also adjust to whatever height I have. So let's take a look at some other stuff right here. You can see that this is a two-column layout at a certain size. And when I make this a little smaller, it'll go to a single-column layout.
So we're gonna use Bootstrap classes to handle different layouts, depending on the width of the screen. So if we go to Services, you'll notice that right now we're using a two-column layout. If we make this a little bit smaller, you'll note that it'll go to a one-column layout. And if we make this a little bigger, you'll notice that this will go to a three-column layout. So we've got quite a lot of interesting layout tasks in this course. Also, if you notice right here in the Staff section, this particular layout takes up the entire width of the browser, so if I were to make this a lot wider, you'll notice that no matter how wide I make it, it's not like this previous layout, which has a little bit of padding on each side.
If we adjust the width of the browser, you'll notice that this layout also changes. Now they're side by side with these photos right next to them. And if we get to a smaller size, you'll notice the photos actually get to be a little bit bigger for a while. And then it'll go to a single-column layout as well when you go into a mobile size. So let's go ahead and make this bigger again. Same thing is happening with these photos right here. We have a rollover sort of effect that happens when you go over the photos. Also notice that these three dots disappear when I expand the window.
So let's make this a little smaller. You'll notice that sometimes this will be in a single-column layout format, and sometimes it'll go to a two-column, and sometimes it'll go to a four-column layout. So everything in this website is fully responsive. It's got some animation effects, a lot of layout, and a lot of different techniques so that you can learn how to make a responsive Bootstrap website that doesn't look like a Bootstrap website at all.
- Analyzing your markup
- Creating simple column layouts
- Creating basic navigation and a simple carousel
- Modifying Bootstrap styles
- Working with branding and toggle styles
- Adding interactivity