From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Using a multicolumn format - Bootstrap Tutorial

From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Start my 1-month free trial

Using a multicolumn format

- [Instructor] So, we're beginning a new layout, and it's gonna be called multi-column. Pretty similar to what we did with this paragraph right here when we wanted it to fit in different ways, depending on the width of the device. So for right now, we have this headline plus some text, sort of just like these two right here. And then we have a series of monsters, and we're gonna put them all in a multi-column layout using the same sort of techniques as before. So let's go ahead and get started. We've already created an article tag, and this has our entire layout. And then in there we have a header. So, whenever I want one of these articles or pages, how I call them in my layouts. To have a header I create an individual header for that section. And then I have a container that has a number of other sections. So this section has a number of sections in it. And each one of those sections has an image that has one of the monsters, and then has a monster name. So you may be wondering, when do I use section tags and when do I use article tags? Generally speaking you use articles, or at least I use articles whenever you have something that stands alone on a page. So in this case, these different quote unquote pages that we're creating. This is a single page layout, but I'm calling each one of the different pieces another page, and so I give it an ID of page. So whenever I have an item that will stand alone on a page, then that gets an article tag. So, the individual sections of my layout get an article tag, and then inside that, anything that's a piece of something else gets a section tag. So in this case, for each one of the monsters is a different piece of a set of monsters, right? So, all these monsters are together. What's gonna fit into this other section? The reason this one's a section is because it's a piece of something else. This piece happens to have headers as well as the big section with all the other stuff. And I tend to use divs whenever I am purely using them for layout purposes. So a lot of times when I do rows and columns, those will go in a div. Now this isn't a hard rule for me, so sometimes, what happens if you create an article that only has a section, that doesn't have this header piece right here? Well in that case, you can go either with section, because if you are already using sections whenever you do have a header, I don't know, it feels weird to not use sections when you don't have a header. So, technically you could use a div in that case. But, to keep things semi-consistent, I'm trying to use sections when they're a piece of something else. So hopefully that makes sense, and if you want to learn more about that, make sure you watch HTML Essential Training. So let's get to it. What we're gonna do first is right here. Add some additional classes to our article. So, we're calling these different pages something called page-section. Whenever you want to create a class that's gonna share some similar styles, you just create a new class. And then in here, since all of these elements inside this page, quote unquote page, are going to be centered, then I'm going to use the text-center tag here. And so I'll do that, and you can see that everything is centered. Let's go ahead and just scroll down to this section so you can see there's more than one monster. This title here would be centered. Everything in here is gonna be centered. It's a pretty simple layout. So you could put this text-center tag individually, but because everything in this layout is going to be centered, then you might as well put it in the topmost tag, which is this article tag. You can put text-centers individually, because you want certain things to be centered, and other things not to be centered. But, otherwise I just put it at the very top. Now you can see that the text is really close to the edge of the layout. Right, so the top of this header section here, my new text here is really close, and that's a little too close for comfort. So I'm gonna do a py-5. So this means I'm adding padding in the top and bottom of five units. So I'm gonna save that, and you can see that it's just gonna push this entire page down by five pixels. Now before I have created things like classes that apply a certain amount of space to every, say page section, so if I had a lot of these different articles with a class of page-section, I may do something on my style sheets like just tell it how much space I want before and after. But, a lot of times in these type of layouts, you sort of have like one-offs, or places where you want more or less space, and in that case, I think the Bootstrap padding classes are super useful, because I only want padding on this particular quote unquote page. There may be another layout where I don't need that padding. So it's really nice to have these spacing classes where you can decide, well this element needs a little bit more room. It's an exception to the rule, so you can use these whenever you want. So, let's go ahead and keep on going. So this header, it's going to have a class of page-section-header. And, I'm also gonna make this a container. So I want this particular layout to do the same thing that this text was doing. Remember, we added some columns and rows to make sure that, because this text was very short, we don't really want it to go all the way to the edge, and this is doing the same thing. So what I'm gonna do next is add a container to prevent this header from going all the way to the edge. It's gonna fix it a little bit, but it still doesn't have the flexibility, so it's still too wide in some places. And again, that's sort of one of the advantages of Bootstrap. There are times where you really do want to create rows and columns to make sure that a section behaves a certain way. But if you were doing that with style sheets, it would sort of be a pain to create a style that worked for every instance. So, I'm just gonna copy those, and then put in two divs here. And now this section here behaves much like this other one. Now, if I had a lot more text, maybe I want sort of a different set of rules for when I have more text. Maybe I do want the lot of text to sort of go all the way to the edge. So, having all these sort of ways of laying things out is actually more advantageous with something like Bootstrap. So as before, we'll add a class of page-section-title to these. Title, and then the text is going to be page-section-text. All right so let's work on the actual layout, because right now these monsters are really big. They are SVG files, so they're gonna be just whatever size the window is at the current moment. So we're gonna need to add some class to all these. And again the way that I like to do work whenever I'm doing sort of repetitive work is to use my editor's select or Add Next Occurrence. I make a selection, and then I use the Command key here, and this is Visual Studio Code, to select that same, in this case, section tag over and over. And you've got to be careful, because sometimes I'm scrolling down as I'm going, because there are other section tags. This is not a unique thing in this document. There may be some other ones outside this area. So for example, this one, although this is a closing one. I want to make sure that I don't get this one right here. So you can see only the ones that I want are selected. And now I can go and add a class to all of these. And what I want here is my classes for layout. So much like what I was doing when I decided how these paragraphs were going to work, I'm gonna do the same thing here. And, I'll do a col-10. So, at the default these are always gonna take up 10 columns. And then I'm going to set the other breakpoints. So col-md-6 at the medium breakpoint. It's gonna take up six of the 12 columns. And, lg-4 at the large breakpoint. Four of the columns. And, at the extra large breakpoint, it's gonna take up three of the columns. So that's in every one of these. That means that I also need to have a container class, and I also need to have a row. So in this section that has all these subsections, I need to add some classes. And this is what I call a layout. And it's gonna be called multi-column, and I'm gonna put a container here. And then because I created a container and I have columns, I actually need to define a row. This is a good example of when I'm going to use a div. This div right here doesn't really have a specific meaning. It's not one of these monsters. It's not a layout, so it's really just a piece of code that defines how something looks. So that usually gets a div for me. And let me grab all of these monsters here. I'm gonna cut these out of here. And, I'm gonna paste them in here. So let's paste all those back, and let's go ahead and save them. And I don't know if you can tell, but the monsters are a little bit smaller now. That's because at the smallest breakpoint, or the default sort of look, is for it to take 10 of the 12 columns. And, when I make them bigger, when I get to the medium breakpoint, it's gonna take up six of the 12 columns. That means that they're gonna fit two of them on the 12 column grid. If I keep on going, the next breakpoint is gonna be the large breakpoint. So at the large breakpoint it's gonna take four of the 12 columns. That means that you'll see three of them. And then at the extra large breakpoint, they're gonna take up three of the 12 columns. Which means that they'll fit four up, right? And that's pretty cool, like that's a really easy way to layout. Once you get used to the Bootstrap math, it's gonna be really easy for you to figure out how to design and lay things out. However, right now, you can tell that these are left aligned, so in addition to just adding a row, I need to make sure that I also add justify-content-center, and now when I'm displaying this within 10 columns, those 10 columns are going to be centered in the layout. And then everything else will be centered as well. It's not gonna be left aligned. So that is looking pretty good. Let's go ahead and I'm gonna add some more classes here. I'm gonna use uppercase. This is again a Bootstrap class. It's just gonna make anything in this section uppercase. I don't like the way that the titles are really close to the monsters, so I'm gonna grab each of the elements right here, and I'm going to add a margin-bottom of two units. Ah, let's make it five units. And what that does, it's sort of actually giving me more room in between the monster and the previous text, which is pretty cool. Then I'm going to add some more classes. So, while you have multiple cursors with Visual Studio Code, you can actually just move the cursor down, and every other cursor will also move down. So I usually add some classes here. So the images are going to have a layout-image class. And then the headline for each of the individual elements is gonna have a layout-title, so I can grab them later and modify those later if I want to. And if I wanted to here I could say like padding top, two units, and that would give me a little bit of room on top of each of these pieces of text. And, I'm also gonna add a class here. I'm gonna call it family-sans. And, that's gonna make the text sans-serif, but only within each of the layouts that has the monster. So, let's go back into the style.css. Family-sans is a style that I created before, and it just sets the font to a sans-serif font. This is sort of something that I created myself. Not something that Bootstrap has. You can make those little shortcuts and work in the same way that Bootstrap does by giving you classes like text-uppercase, and justify-content-center. You can create your own and then apply them wherever you need them. Let's go ahead and add some more styles just to finish this layout off. And I'm going to do that over here. I try to sort of do my CSS in order. Now I need to add a color to the background. Actually I want to add a color to the background of these monsters, just to show you. And because I want it to be the background of the entire article, I'm going to actually put it on this article tag. The article has an ID of page-multicolumn, so I'm going to use the ID to target it. So I'm gonna say page-multicolumn. And then I'm going to say background, and use a variable called light-blue here. And I don't think that that variable has actually been created, so that needs to be a color that I'm going to add. Light blue isn't one of the colors that Bootstrap gives you, so I'm gonna need to create that one, just the same way that I created gray-dark. Light-blue, going to be E1F75. That's sort of a pleasant light blue. So there's probably some people cringing because you've heard, never use like an ID to do anything, because it has more specificity than other things. Well, this is sort of like when you go to a theater, and there's nobody on the line, but there's one of those barriers that make you walk in like a snake pattern to get to the thing. But if there's nobody there, do you just go through the snake, or do you just go to the front of the theater? And I usually just go to the front of the theater. I think this is okay, if it makes you feel really bad then go ahead and just create another class here and call it page-multicolumn, or whatever you want. But I think it's okay for this particular piece. Let's try adding some styles to just finish this off. And, because I know that I'm going to want to modify the page-section header titles, like I want all the header titles to look the same as I create more of these. I'm gonna create a class here called page-section-header, page-section-title, and I'm gonna make the font size four ems. Font-family, I'm going to use this sans-serif variable, make it a little thinner. And I'm going to make the color of it the purple variable. So this sort of defines all of my headlines in the header sections, in the entire document, now this purple doesn't really match my other purple. Purple is one of the default variables that you get from Bootstrap, so we have to replace that one, because honestly it's not very pretty. And technically light blue is a page variable because it isn't one that comes with Bootstrap. So I mean, I don't know if you want to be this picky, but it's up to you. So I need to redefine the purple color, so that looks a little bit more like the background. Other than this, let's see, we are going to add another one for the text. And, not so dramatic, we'll just make the font size 1.2 ems. And, we'll just leave it at default, which is the serif font, and it doesn't need to be purple. So that just makes the font bigger, and this style will actually apply to all of the different sections. So this is why sometimes I create classes that will let me target a bunch of different elements throughout my layouts. And sometimes I do things in Bootstrap, and sometimes I override an existing style like in the case of page-multicolumn.

Contents