Lessons

Lesson Info

How to change layout of Bootstrap depending on mobile or desktop

Hey there in this video, we're going to look at adjusting the bootstrap layout or the grid depending on the different device sizes at the moment. On a really nice big large screen. We've got four feature boxes down the bottom and to the logo and nav side by side. We want to get down a little 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 with 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 ventura boxes. Alright. If you're following along, let's close down our last little project and make a new one. Okay. This is going to be called layout si dot html. In this case we're going to make a layout, see CSS file as well because we're gonna get a little bit further into things like media queries. Okay. So we're going to do layout hyphen c dot c S s or link the two together in a sec. Okay, So I'm gonna sep...

arate them out to the side by side. We're gonna work on the html. We're going to add actually let's go and cheat and grab most of the stuff from layout B copy it all, move it across, pace it. Okay. And we're going to delete out the styles actually we might keep a box. One will reuse him. Okay. But everything else in the style tag. We're going to delete Okay. 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 our link to our CSS. Okay, the bootstrap CSS now we want to link to our own CSS. So we're going to link to the one we just made there. Okay. And this one is called not style, it is called and predictive can be useful and sometimes painful. It was trying to add the quotation, the kind of opening and closing, which is kind of cool but not really what I wanted then. Okay, layout si dot CSS. Just check it's working before you go off and we want to um let's call this one. Each one with my box applied. So each one with a class of my books one. Okay, we'll put some text in here. Especially do that. Especially when you're learning because you're like, you might get quite far through and you're like, oh I'm pretty good at this. And then something's broken. You're like, where did I break that? At which stage you're gonna start on picking it. Okay, so here we go. I know it's working because I got an H one with a big tomato background so it's working. That's what I wanted him for. Okay, let's look at our mock up is in your project for exercise files and it's this last one here and be like, you didn't draw it. And I started drawing it and I was like actually it's easier 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 pages too small. So we're gonna have a large medium and mobile version. Okay. And this is kind of really important when it comes to its little gets easier. Okay, I know that. So I did my design and XT or let's say Photoshop or 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 this top logo, logo, cyber side on tablet. We decided actually it fits 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 and I'm gonna show you how to split that. Yeah, that that's the reason like all this one, this one and this third one aren't in a row. Okay, 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 okay. They're all separate. Whereas the feature boxes, all of these guys, even though they're separate here, they all together on this one. So they need to be in one row. Okay. And we're just gonna 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. Okay? But you do start need to you know you do start need to you you're going to start looking at it and going okay? So these are all going to be on this side. So I'm gonna wrap them in a row and still little columns and separate them out later on. All right. So let's do this first chunk first of its kind of reiterating what we've done. We'll do a few little shortcuts as we go along. But so we're going to start with a dot container because we don't need it to be fluid inside of here. We're gonna put a row and inside of that row is going to have to Times two columns and decided that we're going to add the my box. So we're going to do another container called my box. one enter if that syntax and you're like man that 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 as that works, I've got a container with one row, there's two calls inside of it with my box div inside of those. Let's have a look in the browser, turn it off, turn around again. There it is. Okay. We'll go from tomato to random other color. Actually just clicking tomato and I'm going to pick, we haven't used yellow yet. Let's use a kind of a warm sunshine. Let's call that color. Okay, so we've got that first. But 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. Okay, 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. The same with you. Cool. I'm gonna show you a little bit of coding syntax so I'm gonna make we've done this. Okay ro 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 the curly braces. Have we covered this before? I don't know, I can't remember if I did curly braces at the end of this means it's going to put in some placeholder text, we're going to say hero box at the end of this, we're going to 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 a little annoying. So I kind of just deleted it and started again and it kind of went oh you mean Emmett 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 at our browser. We've got another box actually I forgot like that didn't work then. Alright, so now we're gonna put in my box one with the curly braces inside called Hero box. Not much of a shortcut now but you get what I mean? All right, I've got a pop quiz for you. I want you to pause it and I want you to see if you can make these four. Okay? All on the same row there's going to be a row. Four columns inside of these four columns is going to be our mailbox native and inside of the mailbox div I want text or same feature. Don't put the 1, 2 and three, it'll just put the same thing and everyone just work the word feature and you can add 12 and three 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. All right. Did you do it? If you're not? I'm gonna try and do it with you and 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 four kind of further on. Okay after the my box. Okay so I want four of them times for even Okay. Inside of that though I want to dot my box and inside of those my box I want the word feature. Okay I'm gonna return on my keyboard because it's really you can see the little point to get to 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 it's exotic sounding future. Okay let's have a look. It didn't work at all. I called it my box and not my box one that's okay. Alright. It is hosing down outside, I'm not sure if you can actually hear that, it's quite cool, a little bit of rain. Alright so what we wanna do is let's actually just add the text to our logo. Okay I'm going to add that to our nav and look and we want to do a couple of things. We want to get our example desktop, It's split in two but here it's not okay it is 100% with so they split onto their own lines. So you always start working with mobile first in mind. Okay when you're working with bootstrap. So let's just say I want these two calls to be 12. Okay. And I don't actually need to tell this one to be 12, but we'll do it anyway just to be consistent. And why am I not putting in say excess? Okay, because I wanted 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 excess or the mobile view. Let's have a little look and let's right, click it, go to inspect, make sure the device previews on and 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, we need to decide actually needs to be bigger. And what we're gonna do is we're gonna leave it as 100% there. Okay? But once we get to this view which is a member excess sm MD for medium, that's where I wanted to change a tablet size. So I'm going to say You're gonna be 12. Right up until you get to Cole MD and I want you to be six. Okay. Which is kind of half of the 12 and the other weird thing is you don't need to do I don't need actually anything in this. Okay. I can leave this just as coal. Okay. Because we'll never look first look. So at a small version, it's 12 across. But then I get to this medium. Okay. And it splits into two. And the reason I don't have to do anything with the knob is the knob just goes, I'll do whatever I'm told based on the guy in front of me. Okay. So this guy or girl says I am six. He goes, well, I'll fill the rest of the road. If this one says I'm 12, he goes, well, I'll go down to the next row because there's no room. Okay. Very obedient. Second child. It's not true in my family, but Hey ho, Okay. Next thing I want to do is I want to mess around with these feature boxes, gearbox 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. Okay. And there's one missing from this, which will turn off a little bit later. Okay. So we need to go in and we need to say future boxes. Okay. We need to say, I would like you, let's just see what it does by default. And sometimes let's have a look. Let's go down. Okay. Mm hmm. Can you see when it gets down to really tiny size? It actually goes, I can't hack it. Your fixture boxes need to go 100% because there's just not enough room for the text to fit the text goes. You can see it's just when the text goes. If you had a bigger bit of text in here, a longer word, it would break earlier and you're like, oh, I can leave it like that. And you're like, no, let's let's be really specific with it. Let's tell it when it is at um excess. Okay. So I don't need to write access. I want it to be 12 and actually let's do it for all of them. So multi cursor holding down the option key on a Mac. OK. On APC. And we're going to say I'd like the call to be 12. All of these guys are gonna be 12 by default. Check in the browser all the way up. That is not true. What is it doing? I've done something wrong. My box this coal. Oh, I did it on the wrong thing. Okay, so I did it in here. Okay. Inside my little internal box, you need to do it with this guy. So well, we're going to do command D just to throw in more shortcuts, command Z on a Mac or control d on a Pc because I got cold. Cold cold. And I'm going to say actually is cole hyphen 12. Let's have a look at the preview, you can see there? It is, sure is all the way across. 12 on all of them. Okay, so now what I want to say, I gotta flow upstream, I'm gonna 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 three Because four, I think let's have a little look. Okay, so there we go, so it's small, it is 12 across, but when I get to this medium there, Okay, they divide into three units. Okay, because they've divided the 12 rose by three, which equals four, 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? Okay, I want to switch it out to four rows across, so let's go cole lg and it needs to be 3333 equals 12. That should work. 112 across four across 3 across. I'm talking about columns here getting confused, but you get what I mean? Right now, all we need to do is just make sure we use this syntax. Okay, And the other thing a couple of things I want to do, let's turn it off first and let's turn this fellow off actually, and 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 Excel or sm Okay, because there's five media queries. There's small or 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, I'll do small, medium large and then only once I'm kind of at 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 and 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 flying code and go, okay, that image looked like it would have fed, but it doesn't or that text breaks weird. So I'm gonna add, you know, for this particular feature box. I'm going to say, all right, I'm gonna, you know, do the maybe the Excel because I can fit five of them across. That's why I'm ignoring the other media queries. You can ignore all of them. Okay. And just use coals. Okay. And just assume mobile okay is going to be for your site but you probably need a minimum of dealing with the extra small. The tiny size and the large. Those are the two like minimums do big versions. Small version and then anything in between it's up to you whether you want to like how much time you want to spend and the different in betweens. But probably the really common one is small Okay Or extra small medium for tablet and then large for kind of desktop stuff and then not worry about the giant screens or the kind of weird lands landscape mobile phone, which is S M the small one. Now. These are just dance 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, 10 of them just to make sure that their browser works the best you know amazon are going to worry about it. They want the full screen best uses 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 that either the capacity or the budget to do. So that is my rent rent over. Let's get on to the next video.