How to use Bootstrap Layout Grid Experiment 1
Daniel Walter Scott
Lesson Info
103. How to use Bootstrap Layout Grid Experiment 1
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 use Bootstrap Layout Grid Experiment 1
Hi there in this video, we are going to look at bootstraps, lay out a little bit more. Okay, we're going to mock up this one here. It's going to turn into this over here. There's gonna be some key takeaways that we need to learn before we start building a big old website. Alright, let's jump in and learn how to do it. Alright. To get going with our first bootstrap layout kind of experiment, we're going to close down our kind of main site and create A bit of a throwaway file. So we're going to call this one layout a html. Let's add in our html stuff at the top. And remember we need to update this one here. Um you can always go back to the previous stuff we've done in your exercise files though in project for in your text document that I've made, there's a bunch of stuff in here to help us out. So this is the updated view ports. Okay, so up here remember it just has that extra shrink to fit equals No for Safari. And I've also put in there, what else have I put in here? The C. S. S. Now, ...
you should get this from get bootstrap in case things change, but I've got one in here for you and I remember going at the top, we're not going to put in all the javascript at the moment because we don't need it for the grid. Okay, It's just all those fancy kind of sliders and stuff and we are going to put in our own CSS and actually we might just be lazy in this case and just style it in this document instead of an external sheet. It still needs to be underneath this CSS. Okay, so we can still do it but it needs to be underneath it. All right, let's put in our container. Okay, So in here we're gonna put in dot container. Okay. And inside of it we're just going to put stuff because I want to have a quick little preview. Make sure it's all working. Bootstraps connected. Okay, so I'm going to turn it off, turn it on again. I'm gonna load a different document on different screen. You can kind of see it's working because I know it's centered it's centered on the slide screen. There's a big gap over here that's one of the perks of using bootstrap but we've already learned that one. So let's delete the text in there and we've proved it works. We're gonna put in our top part So our mock up here you would have seen at the beginning is in your project for Okay. It is called wireframe. Okay. That's what we're gonna be building in this case. This bootstrap layout a we're going to put a 5050 split of the logo and nav there's going to be a box at 100 and then there's going to be three boxes down here. So let's put in this first to the logo and the Nav. So the way it works is Rose and containers. You can't ever skip the row. Okay so dot ro Okay and inside of that you put your two columns. Remember the row name is the thing that gives the columns there flex box power and it's a nice wrapper for them so that they don't break into other parts or other rows or connect up. So I want column. Okay but I want times two of them awesome. So now we put our text and this one is going to be the logo and this one is going to be the nav awesome. Let's have a little look and it's split them off nicely. Now let's say I want to add some color to these boxes. Okay this is going to bring up a really good point and a really good explanation of how to use Bootstrap is we shouldn't just rely on the coal the coal you should use as a rapper and you shouldn't start styling it. If I start adding padding to the coal and and doing background colors probably won't hurt it. But there are lots of things that will this little thing here. Don't try and override. Just let bootstrap control that one And inside of these fellas add your own class. So you're going to have like triple nested thing. Okay so inside of coal here we're going to put in our own class. Okay I'm going to give it a name of my box now you'll see now actually I'll put that down on its own line and we'll do it for two of them in a row, command option down arrow or control down arrow to get two of them. Okay. And I'm gonna put in actually put it in return and then I'll put in my box okay. I call things my box or my anything when I'm dealing with Bootstrap because there are like, if I want to do a column, I'd call it my coal just in case because Bootstrap has a bunch of stuff that's already named a whole lot of classes and you're like, if you start being clever like calling something bold, you're liable to override or start messing with one of bootstraps classes. So I always put mine in the front of it so I know which ones are mine and which ones are theirs? They've got no class. That starts with my in bootstrap. So it just means that I'm safe because I've been styling things and it's not working. You're like, why aren't you working? And then you find out Bootstrap got something called exactly the same. Trying to do a different thing now inside of these. This is where I can start doing my stuff. Okay, so multi curses. I'm using the old key or option key on a Mac or a Pc to click twice and I don't want to do that, do I? I don't want to go and never. Okay, so logo nav, let's have a little look now. It's gonna look the same. Okay, but now I can go off and start styling my box. Okay, so up here in my little styles thing here, I'm gonna say dot my box, it's going to let's just add some basic stuff to it. Let's add a background color so we can see Okay, has to be lower case background call background cole you can smash in any kind of letters there and predictors pretty good. We're gonna use hot pink to match our little mock up there. We'll add some padding to it. Just well it's a minimum height as well And in the heights with 200 pixels. I still got my creaky voice started way too early this morning and coffee is not even helping. So we're going to imagine, we'll do top and bottom of about 20 pixels just to push them apart so there's a bit of white gap between them. Okay. And we'll do top and bottom of 10 pixels. Let's have a little look how we're going looking good. Maybe some padding on the inside of these guys. Okay, so a little bit of padding all the way around of about 20 pixels. Alright. And just I only adding this stuff here. It doesn't need to be there at all. Okay, I just want to show you what to do if you do want to style the columns. Don't actually style the columns, You could put dot com up here and start messing with it and it will fall apart and we're adding it so that we can actually see it rather than just kind of like me say, don't worry, it's there. Trust me. Alright, next thing I want to do is where's my mock up? Okay, I want this big hero box in the middle. This brings up another good bootstrap strangeness. Okay, what I'm going to do is put a few returns here, just so that I'm really clear about kind of the outside wrapper and all these internal ones. So I want one line, I can't just put in a call okay, and start styling that it needs to go inside of a row, even if you just need one of them. Okay, because remember the row rapper gives the coal its superpowers okay, with its flex boxy goodness. Plus otherwise these guys, if I put another coal underneath, they're gonna start rolling together and all try and squeeze onto the same line. So our roads kind of like a line break as well. So in this case it's going to be my hero box. Let's have a little look, it's not going to work well, it's kind of going to work. I want to put in that div on the inside. Okay, so in here I'm going to have one called my box and in here I'll call this one hero box Nice. Alright, the last part of our mock up is let's have a look at him. It's 123 kind of all across evenly spaced. Okay, this is a nice, easy one to get a start with in bootstrap. Alright, so we're going to do a row but let's do some fancy. Let's go. Let's do some stuff. A row inside of it. That little less greater than Okay. Um, inside of that. I want a child of coal. How many do I want? I want three of them. Cool. Right, one row, three columns. And this is going to be feature 1, 2 and 3, 2 and three. Have a little look at what we got going kind of forget every time. Okay, let's delete, let's get rid of that stuff and let's say I want to put in my dot my box And then I want times that by three, that's not what I want to do. I'm just not thinking. It's early. Let's say I want to do it all in one go. You're like, show me how you do it all in one go can do. So let's get rid of that as well. Okay, so we want to row with inside of that row. Okay, we want to put a coal inside of that call. We want to put in my box. But I want three of them. But if I just do it like that, it's going to kind of give me a hard kind of what I want. Okay, so what I want to do is wrap this part in brackets. Okay, so that predictive and tries to put in their closing bracket as well. So I want all of this Wrapped up together and then times it by three. Sometimes you got to kind of start again. There you go, fancy. Alright. I'm gonna put in my flashing cursor here and we're going to do feature and we'll do feature command feature one, two and three. Let's have a little look nailed it. There you go. There's our mock up, that's it in Bootstrap. Super easy. But the takeaways for this one is making sure okay, you use Rose even if you want to use just lines by itself. Okay. Just one old column all stretching all the way across the other takeaway is to make sure you don't style the row or the column or the container. Okay. It's best to add your own classes to it and let it do its thing. I could start the container here, but it might be nicer to add a second class called my container. Okay. Or something else, whatever you wanna call it. So there's two things applying. You're not trying to mess with that one. They're all kind of Yeah, it's just a good general rule for bootstrap and why do we like it? A it's done the flex box stuff for us and it's added media queries for us and it breaks down nicely. Okay. To smaller devices and let's go right click inspect and see what it does at mobile. By default, let's make sure your device preview little toggle switches on. Okay. And I'm gonna go down to iphone X and it breaks down nicely. Alright. That is our first experiment done. Let's move on to the next one.
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