Skip to main content

How to change layout of Bootstrap depending on mobile or desktop

Lesson 107 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

How to change layout of Bootstrap depending on mobile or desktop

Lesson 107 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

107. How to change layout of Bootstrap depending on mobile or desktop

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

Student Work

RELATED ARTICLES

RELATED ARTICLES