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

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

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

2,000+ classes ranging from fundamentals to advanced techniques.

How to use Bootstrap Layout Grid Experiment 1

How to use Bootstrap Layout Grid Experiment 1

Lesson Info

103. How to use Bootstrap Layout Grid Experiment 1

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

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

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks