This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to change layout of Bootstrap depending on mobile or desktop

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_108

Comments

Video transcript

Hey there, in this video we are going to look at adjusting the Bootstrap Layout or the Grid, depending on the different device size. At the moment we are on a really nice big large screen. We've got four Feature boxes down the bottom, and two-- the Logo and Nav side-by-side. We want to get down a bit lower. Can you see, it breaks into three Feature boxes. These guys are still side-by-side but when it gets to the really small screen, they all just go full width. So Logo, Nav, and all the features stack on top of each other. That is the goal of this video. Let's jump in and work out how to do Feature boxes. 

If you're following along, let's close down our last little project, and make a new one. This is going to be called 'layoutc.html' In this case we're going to make a LayoutC CSS file as well, because we're going to get a little bit further into things like Media Queries. So we're going to do 'layout-c.css'. I'll link the two together in a sec. So I'm going to separate them out so they're side-by-side. We're going to work on the HTML, we're going to add, actually, let's go and cheat, and grab most of this stuff from LayoutB. Copy it all, move it across, paste it. We're going to delete out the styles. Actually we might keep a Box1, or we'll use him, but everything else in the Style Tag, we're going to delete, and everything in the Body Tag is going to go as well. Thank you, very much. 

Just down to a nice simple page that includes a link to our CSS. They're Bootstrap CSS, now we want to link to our own CSS. So we're going to link to the one we just made there, and this one is called, not Style, it is called-- Predictive can be useful, and sometimes painful. Was trying to add the quotation, the kind of opening and closing, which is kind of cool, but not really what I wanted then. 'layoutc.css' Just check it's working before you go off, we want to-- let's call this one H1 with Mybox applied. So H1 with a Class of Mybox1. We'll put some text in here. It's best to do this, especially when you're learning, because you're like, you might get quite far through it, and you're like, "Hey, I'm pretty good at this", and then something's broken, you're like, "Where did I break that?" It would stage, just that unpicking it. So here we go. 

I know it's working because I got an H1 with a big tomato background. So it's working, that's what I wanted him for. Let's look at our mock-up, it is in your Project4 Exercise Files, and it's this last one here, you'd be like, "You didn't draw it", and I started drawing it, and I was like, "Actually, it's easy just to show like this." Mainly because of the weird spacings and stuff in here, and show them in kind of, in comparison to each other. My page is too small. So we're going to have a Large, Medium, and Mobile version. And this is kind of really important when it comes to, it's a little-- gets easier, I know that-- so I did my design in XD, or let's say Photoshop, Adobe Illustrator, whatever you did it in. You're going to have to consider, like what happens on this mobile device especially. And you can see what we've done, on Desktop, Logo, Logo, side-by-side. 

On Tablet we decided, actually it's fine still, but on Mobile we're going to split it, so that the Logo is on top of the Navigation. That's really important because I want these to be in a row here, but not in a row over here. I'm going to show you how to split that. Yeah, that's the reason, like, this one, this one, and this third one aren't in a row. They need to be separate, because at no stage through all these different designs does the Hero Box join up with these three. That's what you got to kind of think, like, can I put a rubber band around all three of these, at any stage, on one line? None of them, they're all separate, whereas the Feature boxes, all of these guys, even though they're separate here, they're all together on this one. 

So they need to be in one row. I'm just going to make them 12 columns wide, so they fill up the whole thing on Mobile. Don't worry if you don't get it right first time, but you do start need to-- you kind of start looking at it and going, "Okay, so these were all going to be on this side", so I'm going to wrap them in a row, and stick little columns, and separate them out later on. So let's do this first chunk first. It's kind of reiterating what we've done. We'll do a few little shortcuts as we go along. So we're going to start with '.container', because we don't need it to be Fluid. Inside of here we're going to put a row. Inside of that row is going to have two, times two columns, and inside of that we're going to add the Mybox. So we're going to do another Container called 'Mybox1'. So, 'Enter'. If that's syntax, and you're like, "Man, I can never get that, it takes forever," it does, like I'm not even that good at it. I know that it saves me a lot, so it's worth kind of getting used to it. And that works, I've got a Container with one row. There's two cols inside of it, with Mybox Div inside of those. Let's have a look in the browser, turn it off, turn it on again. There it is. 

We'll go from tomato to random other color. Actually you just click in tomato, and I'm going to pick-- We haven't used yellow yet, let's use a kind of a warm, or, yeah, sunshine, let's call that color. So we've got that first part, what else we need to do? We need to do the Hero Box, so this can be in its own row, on its own column. So let's say, underneath, so Container before that closes, I'm going to put in a good few spaces just so I know where everything is. Same with you, cool. I'm going to show you a little bit of coding syntax. So I'm going to make, we've done this, okay, row, I want just one column inside of it, but I want some text inside of it, instead of having to write it, and you put it in curly braces-- have we covered this before? I don't know, can't remember if I did. 

Curly braces at the end of this means it's going to put in some Placeholder text. I'm going to say, Hero box, at the end of this we're going to hit 'Return'. No, we're going to put in a curly brace again. You need this, you need to kind of like this to activate every time, which is a little annoying. So I kind of just deleted it and started again, it kind of went, "Ah, you mean Emmet shortcuts?" You're like, "Yep." You can see it's put in text, just Placeholder text, if you've got brackets at the end. Let's have a look in our browser, we've got another box. Actually I forgot, and you're like, "That didn't work, Dan." I know. So now we're going to put in 'Mybox1', with the curly braces inside, called 'Hero box'. Not much of a shortcut now, but you get what I mean. 

I've got a pop quiz for you, I want you to pause it, and I want to see if you can make these four, all in the same row, there's going to be a row, four columns. Inside of these four columns is going to be our Mybox Div, and inside of the Mybox Div, I want text, all same feature. Don't put the 1, 2, and 3, it will just put the same thing in every one. Just put the word 'Feature', and you can add 1, 2, and 3 afterwards. So pause it now, and get frustrated, and try and see if you can make it work with the sweet syntax. You can just type it in, I'll show you in a second, you go do it. 

Did you do it? If you've not, I'm going to try and do it with you. This is where it is, like a bit of a mind bender. So I want a row, inside of that row I want a column. I want four columns, that's where most people get wrong. They add the times 4, 'x4' kind of further on, after the Mybox. So I want four of them. times four, even. Inside of that though I want a '.mybox'. Inside of those Mybox I want the word 'Feature'. I'm going to hit 'Return' on my keyboard because it's really, you can see the little-- I'm pointing at the screen, you can't see me pointing, but you can see the little predictive, I'll move my mouse, there it is there. It's ready to go.
 
Did that work? Kind of. I'm going to leave it, it's the-- I don't know, exotic sounding feature. Let's have a little look, didn't work at all. I called it Mybox, and not Mybox1. That's okay. It is hosing down outside, I'm not sure if you can actually hear that. That's quite cool, little bit of rain. So what we want to do is, let's actually just add the text to our logo. We're going to add it to our Nav, let's have a quick look. We want to do a couple of things, we want to, let's look at our example. Desktop, it's split in two, but here, it's not, it is 100% width, so they split on top of their own lines. 

So you always start working with Mobile First in mind, when you're working with Bootstrap. So let's just say I want these two cols to be 12. I don't actually need to tell this one to be 12, but we'll do anyway, just to be consistent. And why am I not putting in, say XS? Because I want it to be a real small one, remember, you know, they assume that if you don't give it a measurement, they assume you mean the smallest possible size, which is XS, or the Mobile view. Let's have a little look, and let's right click it, go to 'Inspect'. Make sure the Device Preview is on. Let's go to Responsive, let's go down to the smallest one. And it's true, it's made it 12, goes all the way across, but because we've done 12 on the bottom one and it flows upwards, they're all 12.

So what we need to do at some stage, when you decide, actually it needs to be bigger. What we're going to do is we're going to leave it as 100% there, but once we get to this view, which is, remember, XS, SM, MD for Medium, that's what I wanted to change, a Tablet size. So I'm going to say, you're going to be 12 right up until you get to 'col-md', and I want you to be 6, which is kind of half of the 12, and here the weird thing is you don't need to do, I don't need actually anything in this. I can leave this just as col, because-- we'll have a look first. Let's have a little look.

So at Small version it's 12-across, then I get to this Medium, and it splits into two. The reason I don't have to do anything with the Nav, is the Nav just goes, I'll do whatever I'm told, based on the guy in front of me. So this guy or girl says, I am, so it actually goes along, and I'll fill the rest of the row. If this one says 12, he goes, well, I'll go down to the next row, because there's no room; very obedient, second child. It's not showing my family, but, hey ho. 

Next thing I want to do is I want to mess around with these Feature boxes. The Hero box doesn't need anything doing, it's 12, 12, 12. It's these feature guys, so by default I want them to be 12-across. So they fill up on my mobile device, but then later on I want them to be three in a row, and then four in a row, and there's one missing from this, which we'll turn off a little bit later. So we need to go in, and we need to say, Feature boxes, we need to say, I would like you-- let's just see what it does by default. Let's have a look, let's go down. Can you see, when it gets down to a really tiny size, it actually goes, "I can't hack it." Your Feature boxes need to go 100%, because there's just not enough room for the text to fit, the text goes, can you see, it's just when the text goes, if you had a bigger bit of text in here, along the word, it would break earlier, and you're like, "Oh, I can leave it like that." 

You're like, "No, let's be really specific with it, let's tell it, when it is at XS." So I don't need to write XS, I want it to be 12. Actually let's do it for all of them. So multi cursor, holding down 'Option' key on a Mac, 'Alt' key on a PC. We're going to say, "I'd like the col to be 12." So all of these guys are going to be 12 by default. Let's check in the browser, all the way up. That is not true, what is it doing? I've done something wrong. Mybox, there's col, oh, I did it on the wrong thing. So I did it in here, inside my little internal box. You need to do it to this guy. I'm going to do 'Command D' just to throw in more shortcuts. So 'Command D' on a Mac, 'Ctrl D' on a PC, because I got col, col, col. I'm going to say, actually it is 'col-12'. Let's have a look at the preview. 

You can see there, it is, Feature is all the way across. 12 on all of them. So now what I want to say, I'm going to flow upstream, I'm going to say, actually, when I get to MD, so 'col-md', I would like to do, what are we doing with that one? We need to divide 12 by 3. That's 4, I think. Let's have a little look. There we go, so at Small, it is 12-across, but when I get to this Medium there, they divide into three units, because I've divided the 12 rows by 3, which equals 4, and we're going to turn that one off in a sec. Let's do the last one, when it gets up to Large, which is this one, I want to switch it out to 4 rows across. So let's go 'col-lg', and it needs to be 3, 3, 3, 3 equals 12. So that should work. 12 across, 4 across, 3 across. 

I'm talking about columns here, we're getting confused, but you get what I mean, right? All we need to do is just make sure we use this syntax. The other thing-- a couple things I want to do, let's turn it off first, and let's turn this fella off. Actually we'll do it in the next video. So what I want to recap before we leave this, is that, "Hey Dan, you're only designing for these three." "Why haven't you done one for XL, or SM?" Because it's five Media Queries. There's Extra Small, Small, Medium, Large, Extra Large. "Why have you not mocked those up in your mock-up here?" And I find that I can't make really good design decisions without actually seeing it being responsive. So I do kind of like big stops, so I'll do Small, Medium, Large, and then, only once I've kind of add this-- so I'll sell the client on this, and then I will adjust for the other ones only if I need to. I won't make really big conscious decisions, because there's so many different sizes. 

So I kind of mock it up for this, and then only now or when I start getting, some of the images and some of the text in, will I start going, actually it's doing weird stuff, between this one and this one, and I'm just going to, on the fly, instead of going back to my mock-up tools, like XD or Sketch, I'm just going to actually just do it on the fly in code, and go, that image look like it would have fit, but it doesn't, or that text break's weird. So I'm going to add, for this particular Feature box, I'm going to say, I'm going to do the, maybe the XL, so I can fit five of them across. That's why I'm ignoring the other Media Queries. You can ignore all of them and just use cols, and just assume Mobile is going to be for your site. 

You probably need a minimum of, dealing with the Extra Small, the tiniest size, and the Large. Those are the two, like minimums, do big version, small version, and then anything in between, that's up to you whether you want to, like how much time you want to spend on the different in-betweens, but probably the really common one is Small or Extra Small, Medium for Tablet, and then Large for kind of Desktop stuff, Then, not worry about the giant screens, or the kind of weird landscape mobile phone, which is SM, the small one. 

Now these are just Dan's rules, don't think, like if you're working at a bigger company, they will so use all Media Queries, and they might actually add some of their own ones. They might add seven of them, ten of them, just to make sure that their browser works the best, you know, Amazon are going to worry about it, they want full screen, best usage of the screen. For me and my clients, I'm doing small jobs for smaller companies. So I end up just kind of doing enough, and not making exact best usage, of all the different screen sizes, just because I don't have either the capacity or the budget to do so, that is my rent. Rent over, let's get onto the next video.