What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy 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 Description Transcript Exercise files Discussion Learning Check Recommended Course Introduction Introduction 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 Introduction 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