Bootstrap 07 – Responsive Design

So one of Bootstrap’s core goals is to make responsive design easy. It does this by supporting 4 main break points based around common device sizes. Remember, the break points are widths and heights that we, the designers, decide are where we want our layouts to change. We use media queries with these breakpoints to add conditional CSS to our style sheets so that our pages show different designs on different devices. Let’s take a quick look at an example to better understand where the designers at Bootstrap and the wider community have decided to place the breakpoints. The 4 general breakpoints in Bootstrap are Large (above 1,200 px), Medium (above 992 px), Small (above 768 px), and Extra Small (below 768 px). You’ll see that currently all of these breakpoints are active, as we’re looking at them at a very large resolution. As we change the resolution of our screen, we’ll see that these breakpoints deactivate as the screen gets smaller. So remember that Bootstrap is a mobile-first design framework. This means that the smallest breakpoint is always considered active, and it’s only above certain resolutions that the other breakpoints become active. You’ll remember that in the last unit, we were using the “col-xs-x” class to implement our grid. The Bootstrap grid systems is actually totally responsive and supports all 4 of these breakpoints on screen by default. Let’s look at how the default grid container element behaves at the various breakpoints. So in this demo, you’ll notice that we have a single grid container element in the middle of the page. Note that we’re not using the “container-fluid” that we saw in the last lesson. This is a fixed width container that’s centered in the page. As we change the screen resolution, you’ll notice that the total width of the container changes. So let’s look at that in detail. By default, the container width is 1,170 px at the largest breakpoint. As we move down to medium resolutions, it changes to 970 pixels. As we go down to the small breakpoint, it changes down to 750. And finally, on extra small resolutions, it becomes full-width or 100% of the screen width. So the takeaway here is that depending on the device width, our container element will have different fixed widths. Now that we understand what Bootstrap’s breakpoints are and how the container operates, let’s look at how the columns in the grid behave and how we can bring it all together to create unique layouts across devices. In this example, as we travel through the various resolutions, you’ll see 4 totally different configurations as our screen shrinks in size. So let’s look at that a bit more slowly. To begin with, we have 4 equal columns at the largest resolution. At medium resolutions, we have a staggered configuration. Below that, at the small screen size, we have 2 half columns and 2 full columns And finally, at the smallest resolution,
we have 4 single columns. Let’s use the chrome dev tools on the right to see how this works. To achieve this, we overload each column with the appropriate width we want for each breakpoint. Let’s take the first column, column A, as an example. We use the “col-xs-12” class to indicate that by default, on mobile devices and above, we want this column to stretch the entire width of the row. We use the “col-sm-6” class to indicate that on small resolutions, like tablet and portrait, we want this column to occupy half the width of the row. We use the “col-md-4” class to indicate that on medium resolutions, like tablets and landscape, we want this column to occupy a third of the row. And we use the “col-lg-12” class to indicate that on large resolutions, like desktop, we want this column to occupy a quarter of the row. So now let’s go ahead and see what happens when we actually change resolutions. If you look at the style tabs on the right, you’ll see that Chrome is showing you that the “col-xs-12” class is the dominant class that’s dictating how this row is currently styled. But when we make the resolution a little wider, we’ll see that our small breakpoint has become active, and the appropriate Bootstrap media query has also become active, changing the layout. Again, as we move up to the medium breakpoint, we’ll see that our column has now become 33% wide, or a third of the width. And finally, at the large breakpoint, we’ll see that our column has become 25% of the width, or a quarter. So by manipulating these great classes, we can build complex layouts for different devices. Now that we understand how the grid is used with responsive design, we can introduce it into our Whiskey Drop landing page. We’ll augment our current, very basic, mobile design to include a more sophisticated layout on bigger screens. Before we start, let’s put together a quick wireframe of what we want our landing page to look like at each breakpoint. Instead of a single column of information, both our “Quotes” and “Features” will change to a side-by-side layout for both medium and large resolutions. Note that the only difference between the medium and large is that we’ll hide one of the features on medium resolution, only showing two, while on large we’ll show all three. Although our layouts are quite basic for this example, it’s still a good habit to get into when developing. You’ll see that we’ve spotted something here that we might have otherwise missed. It would have been very easy to simply break our page into 3 rows: one for the callout, one for the quotes, and one for the features. This would have caused us an issue though, as our quotes and our features header element would have been included in those rows. Instead we’ll break those h2 headers out into their own rows, giving us 5 rows in total. This is the sort of oversight that we might otherwise miss without wireframes. So let’s jump back over to our Cloud9 workspace. On our landing page, remember that we already included a “container” class in an earlier lesson. So what we’ll do first is break the sections of our page into our rows. We’ll begin by adding a row around our callout. Below that, we’ll add a row around our quotes header. We’ll then add a row around both of our individual quotes. We’ll then add a row around our features header. And finally, we’ll add a row around all 3 of our individual features. Notice that I’m doing about a lot of copying and pasting here, and I’m using a shortcut to reform up my code afterwards. You can find the shortcuts here in the sidebar menu. This operation is called “format code”, and for me, on Mac, it’s “shift + command + B”. Elsewhere, you’ll hear this operation called “beautifying” your code. It involves the editor automatically reformatting the HTML to keep it nice and neat. Shortcuts are a great way to improve your efficiency. They can be hard to remember at first, but soon they become muscle memory. Anyway, now that we have 3 basic rows, let’s add our columns. Remember that we’re designing for mobile first, so let’s start by maintaining the current design and having our content remain in a single column down the page for mobile devices. To do this, we’ll first add a single column around our callout and give it a “col-xs-12” class. We’ll then do the same for our quotes header. Below that, we’ll add a column around each of our individual quotes, a column around our features header, and then, finally, a column around each of our individual features. Let’s see what our page looks like in the browser. It should look exactly the same, which is great. This means our mobile design is still intact. Now let’s layer on the medium resolution column layout. We don’t want the callout to behave any differently, so we can leave that as it is. The same for the quotes header. But for each of our individual quotes, we want them to occupy half the row, so let’s add a “col-md-6” to each of them. Our Features header can also stay the same, but for each of our individual features on medium resolutions, we only want to show 2 features side by side. So the first 2 elements, we’ll add “col-md-6”. For the third element, we need to hide it on medium resolutions. Luckily, Bootstrap has a number of helpers for this. We can add the “hidden-md” class, so that this element will remain hidden on medium devices. Note that unlike the column classes, these hidden classes only apply specifically for the breakpoint you specify, so this element will not be hidden on large or small, only on medium. That’s great. Let’s check it out in the
browser. Finally, we only have to make a few
changes for large resolutions. We want all 3 of our features to be displayed side-by-side, with each occupying a third of the screen. To do this, we’ll add the “col-lg-4” class to each. Okay great, so let’s do a final check in the browser. Let’s change the resolution just to see it move from break point to break point. So now that we have a fully functioning grid layout, in the next unit, we’re going to layer on some extra functionality using the Bootstrap component library.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *