How to change layout of Bootstrap depending on mobile or desktop
Daniel Walter Scott
Lesson Info
107. How to change layout of Bootstrap depending on mobile or desktop
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
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.
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding