How to create uneven col widths in Bootstrap 4

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi guys, the goal for this class is to fill out this top Navigation, or finish it off at least. At the moment they are evenly spaced. I want the Logo to be smaller than the Nav. My drawing's not great there, but this one here is the width. It's just shorter than this one, so I'm going to show you how to kind of have different size boxes, and then I'll show you just an example of where these things are nested, inside of things that are nested, inside of things that are nested. Just to have a really good understanding of that before we move on. I hope you're ready, I'm ready, let's go. 

So what we're going to do is build in this kind of middle part as well, and we'll make uneven boxes here. My drawing here has been-- that's meant to say this is smaller than this box. I'm not sure I exaggerated it enough. So we're going to do uneven box widths, and we'll also do nesting inside of nesting, just to show you what it all kind of does and looks like. 

So first up, into VS code, they're uneven boxes, so we've got two of them here, right? We've got my first row, which is going to be my Logo, and let's put some text in it so we know which, who's is who. It's going to be Logo, and this one is going to be the Navigation. So my drawing here shows about four, so the rest will be six. So up here, we looked at it a little earlier, but I want to put this in its own little video, and show you a couple of different ways. 

So if I say this first one is a col of '-4', it has to be written exactly like that. It will do amazing Flexbox stuff, and before. And this will just guess and fill the rest of it, because it's in the same row, which is inside the Container, which is inside the Container Fluid. So all this nesting is useful, although it looks a little messy in the HTML. So you don't need to write explicitly that this is the width of 6. You just need to say that this is 4. 

Other thing you can do is you don't have to use the columns, just so you know. You'll run into websites that do this. Instead of col4, you can say it's a width of, let's say 25%. So W for width, hyphen 25, 'W-25', hit 'Save', and we'll get a similar sort of result. Width 75. Shifts it across the other side. So it doesn't matter whether you want to use percentages, all those columns. I use columns, some people use percentages, no problem with the percentages, is they only have some real basic defaults. 

So in the 'Documentation', under 'Utilities', under 'Spacing', you can do width of 25%, 50, 75, or 100. There's no like in-betweens, so if you try and type in 52, it will freak out. There is an option for the height as well. So you can do H 25%, height of 50%, 75, it's of the Parent. So if you did it inside of our Header, or inside of, which part? Inside of this, we've given it a height of 200. So it will use that as its, like 25% of this Container that's it in. So I've put it back to column 4, and I want to show you a couple other things. 

So we're going to put in this big Hero div, and we're going to put these two guys inside, to show you how that kind of nesting works. It's not terribly complicated, but it's sometimes good to just to see it. So we've got our Fluid Container, and it opens there, and remember, if you click inside of it, highlights it down here, which is kind of where I want that one to end. I don't want to start putting my next part inside of that Fluid Container, otherwise it will get gray down here, and I want to leave that gray box finished just there. 

So we're going to start a new Container afterwards. I don't need this to be fluid, I don't need a color going to the outside, stretching across. Even if I did I probably would just color the Body Copy, uh, the Body Tag, which is underneath it all. I'd just probably color that if you did want to do that. So got a Container, and there's only one box in it. We'll do this in a second. So we have one row, remember you've got to have a row, and inside of it we're going to have a column. So you always have a row even if you only want one column. Inside of this we're going to put some Lorem Ipsum. We'll put in 100 words. Let's have a quick little--

They need to go inside the P-tag. So what I might do is do that first, P-tag, then do Lorem 100. Let's have a look in the browser. Perfect, it's kind of matching my design at least. Also what I want to do is I want to make it red, because I'm going to wrap it all up in this Mybox1. All of you, I'm going to go inside that. Remember, 'Command-Shift-P' on a Mac, 'Ctrl-Shift-P' on a PC. I'm going to wrap with abbreviation, and this one's going to be '.mybox1'. Let's have a little look now. There we go. Hey, you're like, "Man, there's a lot of nesting going on", but it's not too bad, right? 

Where it gets even more complicated, is we want to split Mybox into a couple of extra parts. We want to get these two green guys inside. They're going to be equally split, even though my bad drawing looks like this one's bigger than the other, you can do what you want. So nesting again, so where does this go? It needs to go inside my Mybox, because I want it inside, because that guy will make some red, right? Mybox up here, says, be this tomato color. So I want it inside of that, so I'm going to click on the 'Div'. It tells me that's where it ends. 

So it needs to be inside that. I'm going to put a 'Return' in, and I'm going to put in another row and two columns. You're like, "But we've got a row." Every column needs to be the direct descendant of a row for this to work. Like we did in Flexbox, that's why we kind of spend a bit of time here, learning Flexbox, so we need a row, we're going to try to be fancy here, and inside of that row I need two cols, but we'll have two of them; nice. 

I'll actually apply a Class to this. 'Command-Option- down arrow' to get your cursor doubling up, or 'Ctrl-Alt-down arrow'. You're getting sick of the shortcuts, you're going to dream of these shortcuts, but you're not going to forget them. This one's going to use the other green Class. So this one is going to be called 'Mybox2'. Inside of them I'm going to type in 'Feature', no, what is that one? Nested one, it's called Nest1. I'm looking at my little drawing here that I hand drew for you fellas. This one, Nest2, let's have a look in the browser, there we go. 

So that's kind of strange, nesting inside of other existing columns. You need the second row, that's what these guys need. So that they get their power, and so that you can later on, maybe on mobile, stack these guys on top of each other, and it's really easy to do when hose columns are inside a row. So the big takeaways for this video, is uneven sizes, because if you leave it by default they will sit side by side, 50%, occupying the space, unless you put 3 in, then they'll occupy kind of just three spaces, all being about 33% each. They'll just divide it up amongst them. If you want to force them, you only really need to force the first one. In our case we did the col4, but you could do 'w-25' to get something similar. All right, friends, I will see you in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024