What do you want to learn?
Skip to main content
Responsive Websites With Bootstrap 3
by Mark Zamoyta
Learn to create a modern, responsive website using Bootstrap 3.
Start CourseBookmarkAdd to Channel
Table of contents
Hello, and welcome to this course titled, Responsive Websites With Bootstrap 3. My name is Mark Zamoyta. The purpose of this course is to help you design and implement a responsive website, and we'll be using Bootstrap 3's grid system and CSS classes to help us out. Hopefully by now you understand the value of a responsive website, so I won't be trying to sell anyone on that idea. I'll be assuming you need a single website to handle large browser windows, smaller tablet-sized screens, and the smallest smart phone screens. And that's what we mean by responsive. We need a single website that responds to the size of the user's viewport, no matter how big or small. This is a very practical, hands-on, and visual course, so let's take a look at everything we'll be building. We'll start off by learning some fundamental patterns of responsive design. These patterns were written up and named by Luke Wroblewski, a popular speaker, author, and software developer. Each responsive design pattern will be demonstrated using this 3-column sample website. The columns will make use of Bootstrap's 12-column grid system, and when we implement the responsive patterns we'll use several other Bootstrap classes. I'll give you a brief overview of the design patterns now. The first pattern is called Mostly Fluid. In this pattern, the page design keeps its form for most screen sizes. The page only changes its layout for the smallest smart phone sizes. You can see here how the three columns get stacked on the smaller devices. The next pattern is called Column Drop. As the screen size gets smaller, columns start dropping and getting stacked vertically one by one. Here we can see our large screen size with three columns. On a smaller tablet screen, one of the columns drops and gets stacked vertically on the page. On the small smart phone screen, all of the columns are now stacked vertically. Another pattern is called Layout Shifter. This is where the page layout changes significantly from one form factor to the next. Here we can see that on a large screen size our list of sports icons are stacked vertically within their own column, but when viewed on a smaller table the icons rise to the top of the page and get displayed horizontally. This is accomplished with CSS media queries based on the viewport size. The final pattern is Content Reflow. This pattern isn't for an entire page, but rather for the layout of a single-page element. Here we can see our mountain ranges are comprised of an image with a title underneath. On a different smaller form factor it makes more sense to place the title to the side of the image. Content can be made to reflow this way in CSS using media queries. After the module on responsive patterns, we'll focus on building a modern, single-page, responsive website using Bootstrap. Here's the web page running in a large browser window. You can see the navigation area on top, containing the site's logo along with links to the various sections of the page. We'll see how to use Bootstrap's nav bar component to create this menu. Also notice that as I scroll down the page, the menu will shrink at a certain point to get out of the way, leaving more room for content. Returning to the top of the page will restore the larger menu size. Of course, this menu also needs to work on smaller devices, and this functionality is built-in to Bootstrap's nav bar. In the following module, we'll take a look at responsive images and video. Bootstrap offers some classes to help us create and style responsive images, so we'll look at those in depth. Notice the full-screen background image here at the top of our page. This image is fully responsive and always takes up the full size of the viewport. I'll use Chrome's Developer Tools to resize the viewport, and we can see how the image responds. We'll also see how to fix an image to an exact position so that it doesn't scroll, yet our website content still scrolls over the image. This is a popular feature on modern sites. In addition to full-screen images, we'll also see how to add full-screen video to our web page. We could host the video file on our site, or we'll see how to use a video from YouTube. I'm going to dedicate an entire module to scrolling. A modern trend in web design is to have these super long web pages, and navigating them needs to be easy and fluid. You can see the down arrow on our page letting the user know there's more content below. Watch what happens when I click the arrow. The site smoothly scrolls to the next section, making heavy use of an easing animation. Likewise, when I click on a link in the nav bar, the page also smoothly scrolls to the correct section. We'll also take up parallax scrolling. Parallax scrolling is when content scrolls at different speeds over the same area. Notice what happens when I manually scroll this page. The site logo and down arrow button move quickly off the page, while the background image moves much slower. This effect looks great and is popular in modern sites, and we'll see how to implement it. In the final module, titled Animated Elements, we'll take a look at how to animate our page elements as they come into view. Notice how our three activity items are animated as they appear for the first time. We'll also work with Bootstrap's carousel component to show a simple slide show, and we'll work the popular jQuery Gallery plugin to add a responsive image gallery to our site. By the end of this course, you'll be able to use Bootstrap to help you create everything you've seen in this introduction. Everything we'll be doing is fully responsive and works on the latest iOS and Android smart phones, tablets, and larger browsers. So let's get started.
Responsive Patterns Using Bootstrap
Welcome to this module titled, Responsive Patterns Using Bootstrap. My name is Mark Zamoyta, and in this module we'll be looking popular patterns used to layout a responsive website. We'll also see how to implement these patterns using Bootstrap and its 12 column grid system. We're looking at Luke Wroblewski's blog found at www.lukew.com. Luke is a popular author, designer, and developer who played a large part in the move to mobile first and responsive design. In this column, Multi-Device Layout Patterns, several web page layout patterns are presented. We'll be looking at four of these patterns in this module, and we'll use Bootstrap to implement them. The first pattern is called Mostly Fluid. As the name states, the layout is mostly fluid all the way down to the smallest screen size. For these narrow devices, the columns and the designs stack one on top of the other. The next pattern is called Column Drop. As the screen size gets smaller, columns start dropping one by one to the bottom of the page. Unlike the Mostly Fluid pattern, which only changes on the smallest device size, this column Drop pattern can drop columns at any visual breakpoint. The third pattern is called the Layout Shifter. This is where significant changes to the layout happen across devices sizes. A column shown in a large browser may become a row in a medium-size device, and entire sections of the page move around as the designer sees fit. We won't go into the fourth pattern, Tiny Tweaks in this module, however, the following modules of this course will go into single-column web pages in detail. Using a simple, single column for a web page or even an entire website is currently a big trend in web design. The Tiny Tweaks pattern is all about making small changes to a single-column page across different devices sizes. We'll also be looking at another pattern not listed in this article named Content Reflow, where content moves around in relation to other content based on the device size. An example of this is having a caption under an image for one device size, while a larger device size may have the caption to the right of the picture. In order to work with all these patterns, I've put together a demo website for us to work with. You can see the site has three columns, a list of mountain ranges in the Rocky Mountains, a column for articles or blog entries, and a column containing sports icons. We'll make heavy use of Bootstrap's classes in order to implement the four responsive design patterns mentioned, Mostly Fluid, Column Drop, Layout shifter, and Content Reflow.
Bootstrap's Grid and Visual Breakpoints
Let's take a look at the Bootstrap classes we're going to need to work with the Bootstrap grid. First of all, everything needs to happen within a container, and we can use the Bootstrap container class and assign that to the body or to some other div or other grouping element. We can also specify a class of container-fluid. The key difference between these two classes is that the fluid container is always going to take up the full width of the browser or viewport, but if we leave the - fluid off, Bootstrap, especially on the larger browsers or laptop or desktop computers, it's going to center the content within the viewport, and we'll see examples of that later in this module and course, but for now just know that if we're going to be working with the grid, we're going to need a container somewhere. Inside of the container, we're going to need another div or some other grouping element that has a class of row. And, of course, we can have several rows per container, and the row is where we have our 12 column grid. So here we see the 12 columns, and we can also see some of the classes that are used to spread out a visual DOM element across those columns. The first class, col-sm-4, when this gets assigned to a DOM element, it'll take up the first 4 columns of the grid. Likewise, col-sm-8 will take up the next 8 columns of the grid. And notice it's very important that when we're working within a row that all the columns add up to 12. If they're less than 12, things might get aligned more towards the left of the viewport, and if the columns add up to more than 12, things might start wrapping in strange ways, so we just always want to make sure that our column classes add up to 12. Now you'll notice the sm for small there, that's called a visual breakpoint, and let's take a look at those. There are four visual breakpoints in Bootstrap. And looking at this table, we can see that the extra small devices, which are essentially smart phones or feature phones, even, use the symbol xs for extra-small, and those will be active when the viewport is <768px wide. Then the smaller devices or tablets, use the sm symbol as we saw before, and those take effect when the viewport is >=768px wide. Now these pixel values are pretty arbitrary. They could be set to anything if you modify the less variables, but 768 was probably picked out because that's the width of an iPad in portrait mode. So looking at the next breakpoint for medium devices, which would be desktops, it uses the md symbol and it's >=992px. And the largest breakpoint there is, is lg, and that's >=1200px. So let's take a look at some classes that use these. Here we have col-sm-8. So if we assign this class to a visual DOM element, it's going to take up 8 grid columns for small devices, and everything larger. So for small, medium, and large devices, the DOM element will take up 8 grid columns, but if we're at the extra-small devise size, this class doesn't take effect, and the DOM element will take up the whole width of the viewport. So if we're looking at this DOM element on a smart phone, less than 768px wide, it'll take up the complete width of the screen, but in tablets and desktops and everything larger than small, it'll take up 8 columns. Let's look at another class. Here we have col-xs-4. So if you assign this to a DOM element, no matter which breakpoint is active, it's always going to take up 4 columns, because on an extra-small device we're specifying it'll take up 4 columns there, and everything bigger than an extra-small device will also take up 4 columns. Let's look at another example. We can actually apply multiple classes to a DOM element. Here we have .col-sm-4 and .col-lg-2. So starting at the extra-small breakpoint, a DOM element assigned these two classes will take up the full width of the screen. It's not until we hit the small breakpoint where the DOM element will take up 4 grid columns, and that comes from the .col-sm-4 class. For medium, the DOM element will also take up 4 grid columns, but for large we're specifying another class, .col-lg-2. So for large devices, >=1200px, the DOM element will take up 2 grid columns. Now it's kind of hard to talk about this without seeing examples, so in the rest of this module, we'll take a look at all of these classes in more detail and see how they get displayed visually.
Setting Up a Multi-Column Page
So let's create a web page we can use for working with the grid in Bootstrap. I'm using Visual Studio Express 2013 for web. This is a free version you can get online or you can feel free and use your favorite editor. I'll create a project and I'll call it ResponsivePatterns. And I'll just create an empty template and make sure we have no authentication, we're not using Azure, and everything is unchecked. So we have our project and let's add an html file. We'll just call it index. And just to keep this organized, I'll also put this into a folder. So if you're using the exercise files, I'll store this in Video 03, and nothing's in the before folder, and we'll be working in our after folder. So the first thing I'm going to do is add Bootstrap. I will Manage NuGet Packages, and we'll go Online, and we'll search for bootstrap. And here we have version 3.2 and we'll install that. I'll go to Content, and I'll take our bootstrap.min.css, and I'll add that as a link. So now our page is bootstrapped. I'll also get rid of this namespace, we don't need that. The next thing I want to do is add a Google font. Let's go to google.com/fonts, and instead of using the regular sans-serif fonts, whether it be Arial on a PC or Helvetica on a Mac, let's just grab the Open Sans file. I'll click the Quick-use link, and we'll just keep the default of Normal 400 selected, and let's grab the link code right here. I'll copy that, and we'll paste it above bootstrap. Now another thing we're going to need is our own css file to work with, and I'll add that to the Content folder as well. I'll add a Style Sheet, and I'll just call it app.css. And let's just make sure that we're going to use that Open Sans file. I'll set the font-family to 'Open Sans', and it'll fall back to a sans-serif. And let's make sure we take our app.css and also add that as a link. And to start adding some content, let's add a header. We won't be working with the header much, but I'll add an (h1) tag called HEADER, and I'll create a footer. We'll add an (h1) called FOOTER. We won't put anything important there yet. And when we start working with the grid we'll be working in between the header and footer. For now let's set our browser to Chrome and let's make sure that this works. So we have our header and footer. Now I'm going to go ahead and add some styling to this. So looking at our app.css file, I added this styling to the header and footer. We set a dark background color and a light font color, we add some padding, and we center the text. So if we look at this, so far so good, we have our HEADER and FOOTER. So not let's focus on putting the grid and adding 3 columns between these two elements. I'll add a div, and I'll set the container class here. Inside the container we'll add a row, giving it a Bootstrap class of "row", and we'll create 3 columns, an , this will be the first column on the left, and then we'll have a section that'll contain articles in the middle, and we'll have another column on the right side, another . Now let's have the first take up the first two columns of our grid, so let's make sure we're in a container and we're in a row, so we can go ahead and add classes for the grid. We'll add a "col-sm-2", so that'll be our first column, which is 2 grid columns wide. In our section, we'll add a "col-sm-8". And for our final on the right we'll add a class of "col-sm-2". And these do all add up to 12, 2+8+2. And I'll just add some quick labels here, Col 1, Col 2, and Col 3. Now it's a little bit hard to see, but we do have our Col 1 on the left, and Col 2, and way on the right we have our Col 3. So the next thing I'm going to do is I'm going to add some content to these three columns, and I'll also add some styling. So I added a lot of content and styling. I added an images folder, and there are several images in here for the site. And I added a bunch of markup and CSS. Let's just take a look at this first and see what it looks like in the browser. So we still have our HEADER and we have our 3 columns. The first column is a list of mountain ranges, and that's just an aside, 2 grid columns wide, and our central section is our main area, and this will have some kind of articles for the website, and our final column is just a bunch of icons with links. You'll also notice that the FOOTER is still the same down at the bottom. So let's take a quick look at how I set all this up. Now one minor thing you might notice is that the HEADER expands out past the edge of the first column, and the reason for that is because it's not included in a container. So I'll just take the class container, and copy that and add it to both the header and the footer as well. So both the header, footer, and middle section will all have their own grid system, and now the left side lines up fine. Another thing you'll notice is the breakpoints. We do have space on the left and right side margins, and as I resize the browser you can see it jump to where there is a lot of room. When we hit a visual breakpoint, Bootstrap is going to adjust the margins for us and it's going to center the content in the middle. And the way around that is instead of using our container we'll use "container-fluid", and I'll add that to the header and middle section as well. So now that it's fluid, we can see as we resize the browser, the content is always going to take up the full width of the browser, and we don't get the jumping that we saw earlier. You also notice when I took it down low we hid our extra-small breakpoint and our columns lined up. Our first column of mountain ranges is first, and then the middle column, our content, and then our list of icons is last, our third column. Now you might think this is a good way to test this on a mobile device, let's say like an iPhone 5, but it's actually not. If we ran this on an iPhone 5 right now, it actually wouldn't work, and let's take a look at why. First off I'm going to hit F12 to bring up the Developers Tools in Google, and you can see a device icon right here, Toggle emulation enabled, and this will toggle on and off device emulation. I'll make sure I have emulation selected as a tab down here, and our device is set to Apple iPhone 5. You'll also notice a warning at the bottom, You might need to reload the page for proper user agent spoofing and viewpoint rendering. So just make sure, I'll hit F5 to reload the page. And as you can see it's not showing up properly on the iPhone 5. I can pan around and get access to the entire page, but on this small device, what we want is to have this page be responsive. And the way to do that is to set up the viewport properly on the smaller devices. We'll go to Bootstrap's website getbootstrap.com and we'll click on the CSS tab. If we scroll down a little bit we'll see the Mobile first section, and we can see how to set up the viewport properly. We need to add this meta tag if we're going to let our content get scaled properly. And if we want to prevent the user from scaling themselves, we'll use this tag, and I'll go ahead and grab this second one here. I'll copy that and place it in our header. I'll actually place that just below the title here. And you can see the meta tag has the name of "viewport", and for content we're setting the width to the device-width, we're scaling it to 1, we're not letting it scale any larger than what we expect, and we're setting user-scalable to no, so the user can't pinch in or out in order to get the page to resize on a device. So I'll save this, go back to Chrome, and I'll refresh, and now we can see it showing up properly on the iPhone. We can scroll down and get our content and our buttons. So remember, it's not good enough to just test it by resizing your browser. You really need to try it on a device emulator, or better yet the actual device, and don't forget this meta tag, because that's what lets it be responsive on the smaller devices. So I'll just take this out of device emulation for now, and we're all set up, we're ready to go. In the rest of this module, we'll be looking at how to work with all of these elements on the screen and how to adjust that as we work with the different device form factors.
Markup and Styling for Our Website
Let's take a quick look at the markup in css that makes up this sample project. I'm in the 04 folder, after, and let's make sure that we set our index.html file here as the startup page, Set As Start Page, because what happens is if we go back and forth between index.html and our css file, Visual Studio might pick up an older index.html file, so just always make sure you set that to the startup page. So let's take a quick look at the markup here. Looking at our first column, which is an aside "col-sm-2", we have our title, Mountain Ranges, and that's within an h4 with a class of "range-title". And we'll look at the CSS shortly. Then we have the class of "range-list", and this is what holds all of our mountain ranges. We create a link, an anchor tag with an href, and within that anchor tag we have our image and also our title for the image, which is an h4, and this pattern is followed for each one of the mountain ranges. We have five of them here. Next, if we look at our section it's made up of articles with the article tag. It has an h2 header, add and img, and then we create a div, which is its own "row". The reason why it's a row, is we want another grid, and the grid will hold text on the left side in the first 10 grid columns, and in the second 2 grid columns we'll put a button that says More. And for the sample, this button isn't active at all yet. So our article is repeated two more times with exactly the same html, it just has different content in there. And our third column is the aside, which is a col-sm-2, and we have an anchor tag which is comprised of an image and an h6 heading, and these are the smaller icons we have on the right side. Again, to take a look at this, we have our 3 column setup, the mountain ranges, the content in the middle, and buttons or icons on the right side. So looking at the css for all this, we've already seen the body and the header and footer. we give our asides a light gray color, and we center everything and add padding to the top. We add some simple padding for our range-list, and our range-list h4 gets the dark orange color and bold, and there's nothing really too special about this markup. If we were using LESS, we could go ahead and add this h4 directly into our range-list up here, but for those who aren't familiar with LESS, I'm just using standard css. Then we have our img within our range-list. Right now I'm setting the width and height to 100%, and the max-width and max-height to the image size. We'll take a look at responsive images later in this course, but for now this is good enough to give it a nice fluid layout that fits within our grid system. Looking down, we have our sports-icon-list, that's the third column on the far right side with the icons. And let's just make sure this is getting applied, I'm not sure this is getting applied, because it has a darker background color. I'll add that class to our aside right here, and there we go, now it's picking up the styling properly on the right side for our icons. So we have the dark background and padding, white color for the font on the anchor. We set some margins, and the images are fixed at 70px. And for our articles, we give it some padding, and our img for our articles are also fluid at 100%. And for the drop-shadow effect that you see we're adding a box-shadow tag. So in the rest of this module we'll take a look at modifying this markup and rearranging things for the various device form-factors and making sure everything is responsive.
The Mostly Fluid Pattern
So what we've built so far up to this point is the Mostly Fluid pattern. The website is fluid all the way down to this smallest screen size, which is our extra-small visual breakpoint. We're looking at it now in a browser and we have our three columns, if we pull up the Developer Tools and go to the Device section, remember we need to hit F5 to refresh when we select a device. We can see that on the iPhone device all of our columns get stacked vertically. We have our first column of mountain ranges, our content column, and finally our icons, our third column. Let's take a look at this on the iPad. I'll select Apple iPad 3/4, and this is our small visual breakpoint, and you can see we still have our three columns, and anything larger than this is also going to have three columns. If we increase the size of this panel, we can see that we can essentially rotate the device 90 degrees by clicking this back-and-forth button, Swap dimensions. So here we can see that on the iPad in portrait mode we also get our three columns, because the width is 768, which is our small breakpoint, not our extra-small. If we go 1 pixel lower to 767, we can see we get our columns stacked for the extra-small breakpoint, and I'll just switch that back. So one of the problems we have when we're working with web design and we're going from a multi-column layout down to a single-column layout, is how exactly do we want to stack the columns. There's no hard and fast rule, and it's totally up to the web designer, but in a lot of cases you might want your major content to come first. So instead of listing out the mountain ranges first, we would want to list out our articles, our middle column, and let's take a look at how to do that. Let's collapse the markup a bit just so we can see it all at the same time. We have our aside, which is our left column, our section, middle column, and the aside on the right. Now Bootstrap is a Mobile first technology. Things work out better if you arrange things for mobile, and on mobile we're going to want this section to be first, so let me copy the aside, and I'll place that after the section. So we start with the section, which is our main content, our articles, and then we'll have our mountain range list and then our sports icon list. Let's take a look at this. Okay, so we're looking at this on a desktop, and things are arranged properly for a small smart phone. We'll pull up the Developer Tools and look at it on an iPhone, and this is what we want. We want our articles, and then our mountain ranges, and then our sports icons. So now we just have to make sure that when we're on a small or larger device we take our mountain ranges and place them to the far left. And we do that with special classes from Bootstrap called push and pull classes. I'll open these back up, and what we want to do is we want to take our section, and when we've reached the small breakpoint we want to push this section 2 grid columns to the right. So I'll do a col-sm-push-2. Again, on the small breakpoint we're going to push this section 2 grid columns to the right. And push and pull always relate to the left-most column, and that's our section. And then on the aside for the mountain ranges, we're going to want to pull that to the left. I'll go col-sm-pull-8, and we have to pull it 8 grid columns because our section is 8 grid columns up above. And I'll save this and let's take a look at it. And now we get our main content pushed to the right and our mountain ranges pulled 8 columns to the left. It's now on the far left side. If we look at it on the iPhone again, we can see that we are getting our main content first. And just to check it out on an iPad, because this is at the small visual breakpoint, we are getting the mountain ranges lined up on the left, which is what we want. So the important things to remember when you start shifting columns around for the different visual breakpoints, is you want to start with mobile first. Your groups, whether they be sections, asides, divs, or what have you, need to be arranged for the smallest screen size, the extra-small breakpoint. And then for the larger breakpoints we want to push and pull the columns to the locations we need them. Here we're looking at the small breakpoint and when we reach that or anything larger than small, we're going to push this element 2 grid columns to the right. Likewise, in our aside, when we reach the small breakpoint and anything larger than the small breakpoint, we're going to pull this content 8 columns to the left. So push and pull are always relative to the left side of the browser.
The Column Drop Pattern
There's another pattern called Column Drop. This pattern will drop columns one by one to the bottom of the page as the screen size gets smaller. The columns never go away, instead they just stack up on the bottom of the page. So far we've seen how to rearrange things, only for the extra-small screen. Now let's take a quick look at it where we stand right now. So we have three columns all the way down until we get to the smart phone size. Let's look at it on the iPhone, I'll hit F5 to refresh, and we lose our columns and everything just lines up the way we want it. But let's say we wanted things to change again on the small screen size. Small screen size would be an iPad. Let's say we only wanted two columns here. Let's take the mountain ranges and the main content, and we'll leave those here, and we'll take our buttons and we'll drop that column down underneath. So for this Column Drop pattern we'll have three layouts, one for the extra-small phone size, and then one for the small tablet size, which is this, and then anything larger on the medium and large form-factors, we'll keep these three columns. So looking at our markup, let's take a look at our first section. I'll get rid of our push and pulls just to keep things simple, and we'll add those in later, but for the small breakpoint we're going to want the main content to be 9 columns now. And when we get up to the medium breakpoint, we're going to want this to go back to 8 columns. So this is small. So for the extra-small breakpoint this will still just be outside of the grid, it'll just take up the full width of the device. For a tablet, such as the iPad, it'll take up 9 columns, which means our mountain ranges are going to have to take up 3 columns. So I'll keep this at col-sm-3. And then on the medium size and larger, we want to take up 8 columns. So 8+4 is 12, so we have to add another class col-md-4. And looking at our final column of the sports icons, we're setting col-sm-2, but just to be clear, we can set col-xs-12. So that way, on the extra-small and larger devices, we'll take up the full width of the screen, until we hit col-md, in which case we'll only take up 2 columns. So just keep in mind that when we jump from extra-small up to medium, we're skipping small, so small is going to take this characteristic of being the full width of the screen. Now we don't have pushes and pulls in there yet, but let's take a look at this as it stands now. So on our medium and large size, everything is looking good, keeping mind we're going to be putting in the pushes and pulls soon. And when we look at this on the iPad in portrait mode, remember we have access to this button right here, which we'll swap the dimensions, turn it from landscape into portrait and vice-versa. We can see that we do have our 2 columns, which is what we want. If we scroll down, we can see that our third column, the sports icons, are now stacked underneath the first two columns. Likewise, if we look at the iPhone we have our content on top, and as we scroll down we have our mountain ranges and our sports icons right before the footer. So we're getting three different layouts, the single-column for the iPhone, the 2 column for the iPad in portrait mode, and then anything else, such as the iPad in landscape mode. So let's go in and push and pull these columns properly so that they line up as we expect. So looking at our section, our main content, we're going to need to push this off of the left side. So we'll add the class col-sm-push-3. And the reason we want to push it 3 grid columns is because our mountain ranges are going to be 3 grid columns wide at the small level. Likewise, at the medium level the mountain ranges are going to be 2 columns wide, so we're going to have to make sure that we have a class col-md-push-2. And we need to pull our mountain ranges. We want the mountain ranges to always show up on the left side of the screen, so we'll add the class col-sm-pull-9, and let's just verify that. Right at the small level, our main content is going to be o9 columns wide, and at the medium level our content is going to be 8 columns wide. So this is correct, and we need to add col-md-pull-8. So let's take a look at this. So in our desktop browser everything looks fine. The mountain ranges are getting pulled over to the left side. I'll pull up Developer Tools. And things look a little bit off, but you've got to remember that when you pull up the Developer Tools you're always going to want to refresh. I'll hit F5, and that fixed the problem. Things look good in the portrait iPad right now. If we scroll down, we do get our icons on the bottom still. And if we go down even smaller to the iPhone, things are looking good, we have all three columns stacked. So just keep in mind that when we're working with the Bootstrap grid things can get a little bit confusing, and the key thing to keep in mind is that you always want your elements to add up to 12 columns, so at the small level we have 3-grid columns, which means our main content needs to take up 9 columns. And then at the medium level our main content is taking up 8 columns, and our mountain ranges are taking up 2 columns, so we need to make sure that the final column takes up 2 columns for medium. And we look down at our sports icons, and yes it's set to col-md-2. And the other thing to keep in mind is that we always push and pull from the left side of the page. At the small breakpoint we need to push it over to the right three grid columns, and at the medium we only need to push it over 2 columns. And pull is the exact opposite. We want to pull it over 9 columns for small, and we want to pull the mountain ranges over 8 columns for large.
The Layout Shifter Pattern
The Content Reflow Pattern
Let's look at the Content Reflow pattern. Sometimes we're going to need to adjust our markup, and adjust the way images are visually aligned or the way labels are attached to images. Let's take the mountain ranges as an example. Here we have a narrow column, so it looks fine with the image on top and the label underneath it, but what if we view this on a smart phone? Let's take a look. We have our mountain ranges, and there's just a lot of empty space on the left side and on the right side. The margins are too wide, and one thing we could do is we could take the image, move it towards the left margin, and then take our label, like in this first mountain range, the Wasatch Range, we can move that text to the right of the image. And that's what we mean by Content Reflow. We're going to change the display characteristics of some of our HTML elements depending upon the screen size, and the way we do that is with media queries. So I'm in the 08 folder, and one thing I did is I copied our css file here because we're going to make some significant changes to it, and our index.html file now points to the local app.css file. So let's go to this app.css file, and we'll go down to the bottom, and let's add a media query. I'll add @media, and we'll specify the max-width of 767 pixels. So this media query is going to be active for our extra-small screen size. That would be from 0 pixels up to 767 pixels, because if you remember, 768 pixels is the visual breakpoint that gets us into the small range, so we're working with the extra-small smart phone size now. So our mountain ranges have a class of range-list, and the label is an h4 header. So let's modify this. Normally a header has a display of block, which means it'll be on its own line, but in this case we want it to be next to the image of the mountain range, so we'll set the display to inline. Now we also want to modify our anchor tag. Let's just take a look at that quick. Here's the h4 tag that's going to be inline now, so this will show up next to our img, but the problem with that is we're going to lose our natural line break after the h4, so we're going to need to put a line break after the anchor tag. And one easy way to do that is to treat the anchor tag as a block, instead of its normal inline display characteristic. So we'll take our range-list and modify the anchor tag. We'll set the display to block. I'll refresh, and we're closer to what we want. We have our images showing up on the left side and the labels on the right, which is fine. It looks a little bit off because our images are still the same size. So let's modify the image tag for the mountain ranges. So I added the selector .range-list img, which will take all our mountain range images. And we'll cover responsive images later on in the course, but for now I'm just going to set the width and height to 33%, and I'm going to add a little bit of a margin to the right and bottom. I'll refresh, and now our mountain ranges are looking better. We have a small image on the left and the label on the right, and if we compare that to the browser view, we're still getting the images on top and the label on the bottom, which shows our media query is working fine. I think the only problem is that the alignment is off a little bit on the label, let's take a look. It would be good if we increased the font a little bit on the label, and made sure that the centers were aligned between the image and the label. Let's add that to the media query. So going back to our media query, let's increase the font size a little bit and we can also add some margin to the top of the image. And I'll refresh, and we get the smaller image lined up with the label on the right. So for this Content Reflow pattern, an easy way to move things around are within the media queries and changing the display. Changing the display to inline will allow things to show side by side, and changing the display to block will add line breaks after an element.
Same-Sized Columns in Bootstrap
Let's handle the problem of different sized columns. The best way to see this is to pull up the Developer Tools, and I'm looking at the Google Nexus 10. That's wide enough to be set greater than 1200 pixels, so that's the large breakpoint. And here we can easily see that our columns all have different heights. The mountain range column ends right here, and our sports icons ends a little bit higher, and the middle column is the longest. That goes down to the bottom to the footer. But in a lot of cases we want all three volumes to be the same height and go all the way down to the footer. Let's see how we do that. I'm in the 09 folder, and if you look at app.css, I pasted in some code from the internet. Here's the link. It's at minimit.com, and this is code that's pretty popular on Stack Overflow and search results to handle this problem of making columns the same height using Bootstrap. And let's just see how it works. First of all, we have some classes, container-xs-height, but we're more interested in getting our three columns to all of the same height, and that starts at the small level, so here's the media query that deals with the small level. And we have a container-sm-height, a row-sm-height, and a col-sm-height. The container-sm-height will get added to our container. Likewise, the row-sm-height will get added to our row. And for the three columns that we're working with, we'll add the col-sm-height class. And looking at how this works, essentially what it does is it sets the display to table. Now if you worked with html in the 90's, and even the 2000's, a lot of people were using the table html tag, and that's not what we're talking about. We're talking about setting the display to table, and that works very well in HTML5. So the container becomes a table, and the row becomes a table row, and each one of our columns becomes a table-cell. And because there's only one row, all the cells will have the same height. So we're working on the small breakpoint, but if you needed to work on the extra-small breakpoint or the medium breakpoint or the large breakpoint, there are media queries set up for all of those as well. Now before we start adding these classes to our markup, we need to do one small fix. We have our header, and that's container-fluid, its own container, so that's fine, that could be modified however we want, but we're grouping in our sports-icons at the top like the horizontally laid out sports icons, along with our three columns, and we can't really do that. So let me copy this div right here and we'll close this out after the sports icons, and we'll just add a new div with class of "container-fluid". And all this will have is one row with our three columns. And if you remember, our three columns are a section, which is filled with articles and the two asides, the first aside and the second aside. So these three columns are where we want to apply our classes, starting with the container. I'll just copy container-sm-height, and I'll add that to our container. Next I'll grab row-sm-height, copy that, and add that to our row. And lastly I'll grab the col-sm-height, and we have three columns, so I'll add that to all three columns. Here's our section, and then our two asides. Here's our first one and our second one. So with these new classes, this container is going to be set up to display as a table, and we'll get all three columns to be the same height. Let's take a look at it. I'll hit Refresh. And now we can see that if we look at the right column with the sports icons, that now goes all the way down to the bottom to our FOOTER. Likewise, if we look at our mountain ranges you can see a slightly grayed out background color, and that also reaches the very bottom. So, once again, you're going to need to pick up the CSS with these media queries. And this is very popular code that you'll find on minimit.com, as well as Stack Overflow.
Let's take a look at Bootstrap's Navbar Classes for navigation. Here we have the sample navbar from Bootstrap's site, and this is actually a pretty complex example. A lot of times, all you're going to have in the navbar is your Brand on the left, and a bunch of Links, but here we can see more than that. We can see a Dropdown menu and a Search form embedded within the navbar. And, of course, since this is a Bootstrap native control it's fully responsive. If we shrink down to the small or extra-small size, we'll get this navbar on the bottom, which only contains a brand and a button. So let's look at the classes for these. The full wide navbar can be styled with .navbar-nav, and the smaller responsive version can be styled with .navbar-header, so you have some control over how each of these gets laid out and styled. The Brand on the far left side can be styled with .navbar-brand, and after the brand, the navbar gets divided into the left side and the right side. The left side can be styled with .navbar-left, and the right side can be styled with .navbar-right. The Search form that we see in the middle can also be styled with a .navbar-form. And you see these a lot for things like search, but also signing in, logging in with a username and password or even registering. Looking at the .navbar-header, it also has the .navbar-brand logo, and the button on the far right side can be styled with .navbar-toggle. Now when that toggle switch is pressed, it's going to take the horizontal layout of the navbar and lay it out vertically. I'll just show these _____ here, and when you press the toggle button you can see that each element gets displayed on its own line within the Dropdown. So this is great for small devices like smart phones, and maybe even tablets that are pretty narrow in portrait mode. So we'll see this in action in the next video.
Adding the Navbar
Styling the Navbar
So up on top here we have the default navbar from the sample at the Bootstrap website. In this video, we're going to fix it up with CSS mostly, and turn it into something useful for our site. We'll get rid of these Links, and the Dropdown, and the form, we'll fix the color, and let's start with that. We'll take out this old header color. So I'm in the css file, and we can see our header right here. I'm just going to delete this because we only have that in there for testing. Next I'm going to go into the index.html file, and let's cut out everything from the sample. We're going to keep our navbar-header right here for the extra-small screen size, but down below we can take out our navigation right here, we can take out the form, and let's keep in one Link, because we're going to want to add some Links, but I'll delete everything else, such as this dropdown. And I'll copy the link a few times, and I'll quickly fix this up. So we added links for Sights, Sports, Activities, and Contact Us, so I'll save this, and let's take a look. Alright, so it's getting closer to what I wanted. Now I want to make the whole navbar darker, and we can do that by adding the navbar-inverse.css class. You can see on our nav we have a navbar-default, but to invert it and make it dark, we can add the class navbar-inverse. And it's getting closer to what I want. Now there are a few problems here. The navbar isn't lining up with the left side or the right side, it seems to be centered a little bit, and there seems to be some kind of margin, and that's probably caused by a faulty container. If we look at our header and we give it a class of container-fluid, but in the Bootstrap sample they also give a class of container-fluid to a div within the navigation. So let's just take it out of our header, we won't give it a class, and we'll see what that does. And that fixed it, now we get alignment on the left side and right side. The next thing I want to do is get rid of this gap between the navbar and the main content, the two asides we can see are clearly down a bit. Now I'm not exactly sure what's causing that, so let's pull up the Developer Tools with F12. And if your tools are on the side, you can always press this icon right here to switch it from the side view to the bottom view, and I'll hit the Search icon and I'll click on the navbar. In order to see this better I'm going to click on the Computed tab. I'll uncheck Show inherited properties, and there's probably a margin, so I'll make sure the margins are in view, and we're looking for a margin-top or a margin-bottom being set somewhere. So it's not on this div. I'll click on the div above it. Again, there are no margins listed here or in the box above, so I'll keep going up higher, still no margins. And here we go, I clicked on the nav, and now we can see that there's a margin of 20 shown right here, and if we scroll down and look at our margin-bottom it's set to 20 pixels. We can also see it if we mouse over the nav, we can see a message, and we can see that the gap is actually highlighted, showing that that is, in fact, the margin. So let's find out exactly where this margin is. I'll click on Styles, and we'll look for our margin-bottom right here, and that's being set in our bootstrap.min.css file with a .navbar selector. So let's add our own .navbar selector to override that. Navigation is going to be at the top, so I'll put that in the top of the css file as well, and I'll add the navbar selector, and a margin-bottom of 0px. And I refresh, and the margin is gone. Now the asides and the content go right up to the navbar, which is what we want. One other fix I want to make is, well we're going to fix the Brand in the next video, we're going to add an image here, but the default colors are a little bit too dark for these links here. It's fine when you mouse over it, it gets nice and bright, but I want these links to be a little bit lighter. So, again, I'll pull up the Developer Tools, I'll click on the Search button and click on Sites, and right at the top here we can actually see where the color is being set to a dark gray, #777. And let's just change this to bbb, which will be lighter, and that looks better. It still lights up a little bit more when you mouse over, and that's good, but overall if you compare it to the brand it's still looking pretty good now. So just because we made the change here, doesn't mean it's going to be saved anywhere. So let's copy this change and I'll paste this into our css file. So we have .navbar-inverse, .navbar-nav, list item, and anchor. We'll be setting the color to light gray. I'll save it, just to make sure, and I'll refresh, and now we're getting our lighter links, which is good. Now we're not going to hook these up to link to the document yet, we'll look at that in a future module on scrolling, because when we click on these links we're going to want to scroll the page down to the appropriate area. We're going to be building a large, one-page website. But for now, everything's looking good, and in the next video we'll take a look at changing the Brand to an image.
Adding a Logo Image
In this video we're going to address the Brand in the upper left corner. Instead of having text there, let's add an image. So I'm in our index.html document, and I'll scroll down until we find the brand, which is right here. We can take out the word Brand, and add in an image called site-logo-white.png, and I'll drop that in there, and I'll reformat it a bit. And I want to take out this class of "navbar-brand", because working with an image, we're going to have to adjust things ourselves. So let's see what we have. So here's our image. It's the mountain top along with this text. Now I didn't want to pull in an extra font, so I decided to just put this text in the image, and that's fine for a small menu like this. Now the only problem is that this logo is a little bit too big, I want to shrink it down, so let's do that with css. I'll go to the app.css file, and I'll set up a selective for .navbar img, and we can set the width to 70%, and the height to 70% as well. So that's a good size now. I guess the problem is it seems to need a bit of padding, like it shouldn't bump up right against the top and the bottom the way it does. So let's fix that up in our css as well. We have our navbar selector, and we'll set up padding for the top and bottom at, let's say, 30px, and the left and right can be at 15px, let's try that. And that looks good. It may look a little bit tall, with a little bit too much padding on the top and bottom, but in the next video we're going to work with that and we're going to work on shrinking it so that as we scroll down the page the menu will shrink, but I think this looks good enough now for our purposes. Let's just test it and see how it looks on different devices. I'll hit F12, and one thing you'll notice is that Chrome just updated their browser, and the tools for testing on various devices are a lot better. For one thing, it's warning us right here on top that we're going to need to reload the page, so I'll do that by hitting F5. And when we look at models to emulate in our emulation tab, you can see that it added the newer Apple devices, the iPhone 6 and the iPhone 6 Plus. Let's try it out on iPhone 6, and I'll hit F5 again to reload the page, and that looks good. Things are aligned. Looking at it in the iPhone 5, it's also looking good. On a tablet such as the iPad 3/4, it looks like we're good to go. We tried out a bunch of different form-factors and the menu is fine on each one. Now with this new version of Chrome, we could also drag these tabs that you see here. And as we drag it to the left, you can see our responsive website in action. If we look at the model, we can see the model changed away from the iPads as we changed it, but instead of reshaping your browser, you can go ahead and just drag this tab right here. So in the next video we'll work on animating our menu by getting it to shrink and probably be transparent as well as we scroll down the page.
Animating the Navbar When Scrolling
In this module, we looked at Bootstrap's responsive navbar, and many of its CSS classes. We styled the navbar with several classes including .navbar-right, to align our links to the right side, .navbar-inverse to switch from the default light styling over to dark styling, and .navbar-fixed-top to fix our navbar at the top of the screen, even as the viewer scrolls down. We added a logo image in place of the standard text used for branding the navbar. Then we worked on animating our navbar based on the scroll position of the page. We used code from a GitHub project named cbpAnimatedHeader to accomplish this. We also needed a dependency for this project called classie.js. This animation was accomplished using CSS transitions, and we made sure our navigation still functioned properly in IE9, which doesn't support the transition property for animation.
Responsive Images and Video
Hi, my name is Mark Zamoyta, and in this module I'll be showing you several techniques to add responsive images and video to a web page. Getting an image to appear properly on any size device is easy with Bootstrap or just plain CSS. Videos can be a bit trickier, and they don't always display on smaller devices because of bandwidth and user interface constraints, but we'll see how to work with video using a popular GitHub project. We'll start off by using the Bootstrap class img-responsive to get an image to resize along with the size of the viewport. We'll also do some work on our logo image in the navbar. You can see how we use fluid techniques to get the image to resize, however, that may not always be desirable. The logo seen here is much too big. We'll see how to make the image non-responsive, giving it a static size for larger screens. We don't really need our logo to be a responsive image. A static image in the top left corner is good enough for a logo, but we'll add a media query to make it responsive and shrink on smaller devices. Next we'll look at styling responsive images with Bootstrap classes, as well as usual CSS properties. We'll see how to create an oval or circular cutout of an image, create a thumbnail style, and create rounded corners for an image. We'll also do some styling by adding an image border and drop shadow. A modern technique we see on many sites is to place a full-screen image, usually called wallpaper or backdrop, on top of a long single page. This image needs to be responsive in order to display on a wide variety of devices, and we also need to be able to place content over the image. We'll see how to do this using CSS properties. Another technique we see on modern web pages is to have a static background taking up the entire viewport, while allowing content to scroll over it. You can see that happening here. We'll see how to do this for large devices, but unfortunately many smaller devices don't allow for this. We'll see how to gracefully fall back to making these fixed images scroll when needed, giving the user a better experience on smaller devices. Full-screen images used as wallpaper for a site are cool, but full-screen video wallpaper is even cooler. We'll use a popular GitHub project to add video wallpaper to our site. We'll also see how we can use any YouTube video as wallpaper for our site. Many smaller devices won't play background video on a web page, so we'll see how to show a poster image instead of a video on those devices.
Responsive Images in Bootstrap
Let's take a look at responsive images with Bootstrap. I'm here in the 02 folder, and I'll take a look at index.html. I'm going to collapse the header, and I'll also collapse the footer, and you can see that what I did was I cut out all of our content from our sample website, and all we have is a fluid container with a single row. Let's just take a look and see what this looks like in Chrome. Okay, so there's the HEADER and FOOTER and that's it. Let's just add a simple image and see how that behaves responsively. I'll take lake.jpg, and I'm not going to add any special styling to it, and I won't add any new classes, I'll just save it, and we'll take a look. When we pull up the developers Tools, I'll hit F12, and I'll go into Device mode, and Refresh, and I'll use the handle on the right to resize it. So in the larger size form-factors you can see we can see the image, but as we shrink down, nothing happens with the image, it just stays the way it is, so it's definitely not responsive as is. So to fix this, Bootstrap has a class. I'm at getbootstrap.com, and I'm in the CSS section, and I'm going to hit the Images link on the right. We can see that Bootstrap does help us out with images. There's a class called img-responsive, and we also see that that sets the max-width to 100%, and the height to auto, and that's pretty much all it does. That should be enough to get our image behaving properly. So in our image tag I'll add the class "img-responsive". Now let's take a look. I'll refresh it, and now we can see that as we resize the screen it does expand and contract the way we would expect it to.
Working With a Logo
So we saw how to make an image responsive with the img-responsive class. Let's take a look at the app again and I'll pull up the Developers Tools, and let's take a look at the logo in the top left corner. We can see that as we resize it, it stays the same on the larger sizes, but when we get down to the smaller sizes, first of all we get a slight error here for a few pixel values the menu drops below the icon, but then when we hit the smaller screen size we get a much bigger logo, and it does look a little bit pixelated. This is bigger than the image that we have, and as I shrink down more you can see the logo gets smaller in size. Now we don't want the logo to be responsive, we want it to just be a static image in the top left corner, and we also want to get rid of the problem here where our menu drops below the logo. So let's take a look at how we can fix that. The first thing I'm going to do is go into the images folder, and if we look at our site-logo-white.png file, you'll notice that we had to shrink that. The file is too big to begin with. When we originally added that, we cut the width and height down to 70%, but we don't want to have to do that. Let's just delete this and I'm going to add in an image that's 30% smaller. So I added in site-logo-white-70pct, and that's going to be our new image in the top left. We have our image tag right here, and I'll just add in the proper name. Let's save it and take a look. So everything looks fine, and I'll shrink it down and see if we can find our bug, and that looks good, the menu didn't drop down like it was doing before. Again, I'll move it to the left and we get our button, which is working fine. And our logo is staying the same size, and that's great. So while the image of the lake and the content of this page is responsive, we want to keep the logo static. If we make the screen size really small, there's not going to be enough room for both the button and the image. If you wanted to actually swap out this image for a smaller one, you would just add a media query. If the pixel value was below 400 or so, you could just swap in a different logo. So let's fix this image problem with a media query. I'm in our css file, and we have our navbar selector here. Let's put the media query right after that. We saw that we have the problem after 400 pixels, so we'll create a media query with a max-width of 400px, and we're going to want to look at our navbar and the image inside of it. Now one of the problems we're going to have as we resize this image is that it's going to be aligned to the top of the navbar, but we need to center it vertically. Centering it vertically is going to be hard, because the navbar actually grows and shrinks, so we can't hardcode a height value, so one way that we can center it vertically is to give it an absolute position. And we can set the top to 0, and the bottom to 0, and we'll set the margins to auto. Now since we're positioning it absolutely, we need to go to its parent, which is the navbar header. And let's just confirm that by looking in index.html. We have our image, which is part of an anchor tag, which is in our navbar header. So we'll grab our navbar header and position this relatively. And remember from CSS, that if we have something absolutely positioned, it's going to look for a parent with a relative position, so we just need to make sure we set that. Now one other thing we need to do is actually shrink this image, and we can just do that by setting the width to 70%. So, again, we're setting up a media query where the width is going to be less than 400px. And we're going to take our icon image and shrink it down to 70%, and these selectors right here are just going to center it vertically. Let's take a look in Chrome. So I'll shrink down the screen to under 400 pixels, and now we can see that the Rocky Mountain Outdoors icon is shrinking as we move to the left, and it's staying centered vertically, which is great. Let's select the iPhone just to make sure everything is good with that. I'll go with the iPhone 5, and that looks fine, our menu is still functional.
Let's look at styling our responsive image, both with the Bootstrap styling, and also with some regular CSS styling and positioning. So I'm in the 04 folder, and what I did was I just took out the header and the footer, so all we have is the plain image. And this will keep things simple as we focus on styling it. If we go to the css, let's just add a temporary selector here for the responsive image. And the first thing I want to do is get it off the left side of the page a little bit, so I'll add a margin to the left. Okay, so that's good. Now there are a few classes that Bootstrap gives us that we can apply to the image. There's an image img-circle, and you can see that applies a circle around the whole frame of the image. It's a little bit of an oval because we have a rectangular image, but if it were a square image it would be a perfect circle. We also have img-thumbnail, and that gives us a very light border around the image and it's even a little bit curved if you look at the corners here. And then there's also an img-rounded, which will give us rounded corners. And here we can see in the upper left-hand corner it's just a little bit rounded. So those are the only three classes that Bootstrap gives us besides img-responsive. So let's also take a look at some of the regular css values that we can use. I'll go back to our img-responsive selector, and let's add a border. I'll specify 3px, and then solid, and I'll make it dark blue, and we get our dark border. Another common way to style images is to add a drop shadow, and in css the value is box-shadow. And I'll give it a color of black with a little bit of alpha, I'll put a 0.5 so it's halfway transparent, and we want to offset it by 10px to the right and 10px down. And I'll also specify 10px for the size of the shadow. Let's take a look at this one. So we get our drop shadow to the right and the bottom. Another thing we could do is spread that shadow out a lot. I usually like putting a high value here. Instead of 10 we'll put 60. So it's a much more soft drop shadow, and it even shows up on the top and the left a little bit. And while we're at it, let's just center this image horizontally. There are a few different ways to center an image, but the most popular way is probably taking the margin and we don't care about the top and bottom, but on the left and right we want to set it to auto. And that's going to let the renderer determine how much size there is on the left and right and it'll end up centering the image for us. So if we take a look at this and refresh, we can see that the image is centered horizontally. One thing you'll notice about our css is we set the margin so that it's automatic on the left and right to center it, but we didn't specify that we wanted the image shown as a block element. Normally an image is going to be an inline element, and I'll just add that in there for now, and we'll see that it doesn't work. I refresh, and it pulls the image to the left side. That's because normally an image is inline. But because we're using img-responsive from Bootstrap, our display is getting set to block, and we can just verify that with the tools. I'll select the image, and we can see we're setting our margin right here, and for the img-responsive tag we are setting the display to block, and that's built into Bootstrap. So in the next few videos in this module we'll take a look at adding images to the background of the page or the background of a div, so that we can have full-page images, as well as videos.
Full Screen Background Images
Full Screen, Fixed Images
Fixed Images on Small Devices
There's just one slight problem with the fixed backgrounds that we're using. Let's take a look here on Chrome, and we have our fist image, which is going to scroll, that one's not fixed. So I'll scroll that off the top, and then the picture that's appearing underneath it is fixed, that's not scrolling at all. Our content, this white panel right here, is scrolling over it for now. We'll fill that content in in the next module, but for now, while it's working fine on the browser, it doesn't work in mobile devices. I tried it on iOS 7 and 8, and it's a known problem that these kinds of fixed images don't work. What they end up doing is scrolling off the screen. And in the case of iOS 8, and I think iOS 7 as well, you won't even see the images in some cases. And, again, this is only where we have a fixed background. Let's look at the css. I'm in app.css, and here's where we're setting our fixed-attachment class. We're setting the property background-attachment to fixed. We want to keep this for desktops because it's a pretty cool effect, but for anything smaller we can just have these images scroll with the rest of the content. One way we can do this is with media query. So in this media query, I'll put it right after fixed-attachment, we're going to handle all the screen sizes up to 1024px, so for all the smaller devices and tablets that run iOS or any other operating system up to that point. What we're going to do is we're going to reset our fixed-attachment, and instead of having a background-attachment of fixed, we'll set it to scroll. So let's try this out now. I'll refresh. We're actually going to have to shrink down to underneath 1024px, so I'll just pull up the Developer Tools and make sure we have an iPad, and I'll reload and scroll down. And we can see that our elk image is now scrolling, along with the snowboarder. And if we size it up over 1024, we can see that the image is now fixed, and the snowboarder is fixed as well. So you just need to be careful that whenever we're setting our background-attachment to fixed, the images could disappear on iOS 7 or 8, and possibly some Android devices as well. So the standard thing to do is just to let the images scroll off the screen, and that works fine.
Full Screen, Background Video
Full Screen YouTube Videos
Using the Wallpaper jQuery plugin, we can also include a video from YouTube. I'm here at the GitHub repository again, and I'll go back to the demo. I'll click the View Demo button. And if we scroll down past the videos we can see a YouTube section. And here's a space shuttle taking off, coming directly from YouTube. So we can see here we still can set a poster, and to play the video we need to actually include the url and the VIDEO_ID from YouTube. So let's copy this, and let's go back to the source code. I'll just take out our mp4 and the comments for now, and I'll paste in the video item. Now we need to go grab a video id from YouTube, let's do that. So I'm at YouTube, and I'll search for Rocky Mountains. And we get our results, and let's just find a video. I'll take this one right here. So it's playing the video. You can see some birds flying around and some reflection in the water. Let me pause the video part of it. And if we look up at the URL, we can see youtube.com/watch, and here's the video id that we're going to need for the website. So it says watch?, and then v stands for video equals and then the id. So let's grab that id, I'll copy it and go back to the source code, and I'll paste it right where it says VIDEO_ID, and let's try this out. And the video starts up. We can see a little bit of the reflection in the water and the birds flying around a tiny bit. So the video is coming from YouTube. And you can also see that an advertisement just popped up. And, you know, that comes from using YouTube on your own site, you're going to get those advertisements. So everything is working fine. We can scroll down and get the rest of our site, and scroll up and get back to YouTube.
In this module, we looked at Bootstrap's class for working with responsive images, img-responsive. We also worked with Bootstrap styling classes, img-rounded, img-circle, and img-thumbnail. We saw how to make our logo non-responsive for larger devices, and responsive for smaller devices, using a media query. We added a wallpaper image to the top of our web page using standard css properties, background-size: cover, and background-position: center. We looked at attaching background images to a web page, so that content could scroll over it on larger devices using background-attachment: fixed. For smaller devices, a background-attachment of fixed may cause problems, so we saw how to set background-attachment to scroll. We used the GitHub project Formstone/Wallpaper to add video wallpaper to our page, and we also saw how to use that same project to add any YouTube video as wallpaper.
Adding Content for Scrolling
Let's add some content to our project. If you look in the 02 folder in the before folder, we can see a project from the last module, and I'll just run this. So you can see we have our navigation and a large full-screen image. When I scroll down we have a content area that's empty, we have an image, another content area, and another image, and a content area on the bottom. So in this module, I'll be adding some content so that we can work on scrolling, and I also want to clean up the project a bit. Let's go to the source code, and I'll be working in the after folder, so I'll pull up that index.html. The first thing I want to do is go to the bottom of this file, and you can see we have a