Bootstrap 5 Crash Course Tutorial #8 - Grid Layout (part 2)

Key Takeaways

all right then gang so now we've seen the basics of the grid system i want to use it again to start our web page design for the ebook that i showed you at the start of this series so our web page is going to have several different sections in it and i've marked those out as comments as you can see here so we can keep track of where we're putting all our code so to begin with we'll be working on the intro section at the top of the page just under the nav bar which we've not created yet so this section is going to include some text on the left and an image on the right so we're going to use a grid to space those two things out in a row now to begin with i'm going to start every section every different part of this website inside a section tag and i'm going to give each section an id and that's so that later when we work on the nav bar we can scroll to those different sections using the id inside an anchor tag so this one is going to be intro and also i've created this little style inside the head where we're starting each of the sections because by default bootstrap is not going to style those for us i'm just giving each one a bit of padding to the top and the bottom now i could use classes if i wanted to but i wanted a specific 60 pixel value here instead okay so now we can get to work on the grid inside here so first of all remember every grid goes into a container so let's create that container div dot container and then this is going to contain the large break point so remember that means it's going to be 100 in width until it reaches the large break point at which point it's going to go into that central column kind of structure all right so inside the container we need a row so we'll say div dot row also i'm going to give this some other classes i'm going to say justify content center we'll come back to another class later on to be honest for now i want to create the columns so we're going to have two columns on the left we're going to have a column of text to say what this is and on the right we're going to have an image so we'll say div and then dot call and md hyphen 5 and that means first of all it's going to be 12 columns in width for extra small size screens and then when it reaches the medium-sized screen getting bigger at that point we're going to have five columns of width for this element now also inside this i want to align the text to the center so text hyphen center we've seen this one before and also for small or rather for medium size screens and up we want to move that text to the left again so i'm going to say text hyphen md hyphen and then start so let me explain this again for small size screens the default is going to be in the center of this column the text then as the screen gets larger when it reaches the medium break point it's going to go to the left all right so we'll see that in action in a second inside here i want an h1 and inside the h1 2 divs so a div and then i'm going to use the class display hyphen 2 to style this text and that's going to say black hyphen belt underneath that i'm going to do another div and that's going to be display hyphen 5 so slightly smaller text and that will say your coding skills like so i'm also going to apply text hyphen muted to this to make it more of a gray color so this will be darkish and this will be quite light gray alright then so let me save this for now just to preview this over here in the screen so we can see that it's taking up this section on the left if i inspect this right here then i notice that i've not spelt call correctly so let me do that and save it again and okay so now we can see that it's five columns in width this div right here now i also want to add in another column but before i do that in fact let's add some extra text underneath the headings so a p with a class of lead and also i'm going to say m y hyphen 4 to give this some margin up and down and again text hyphen muted all right so i'm just going to say lorem 8 for some text right here and then underneath that paragraph i'm going to do an anchor tag this is going to go to the pricing section later so we'll do the href to be hash pricing and then inside the anchor tag i'm going to say bye now like so now i want to give this some classes as well to stand it like a button so remember we do the button base class then i'm going to say button hyphen secondary to give it that gray background color and button hyphen large to make it a bit bigger all right so if i save this again and preview this is what it looks like okay so now let's do the content on the right and by the way this is sitting in the middle of the screen at the minute because we said justify content center and that justifies all the columns to be in the center remember okay so let me now come down here and do another div and this div is going to have a class of call hyphen md hyphen 5 again which means 12 columns on extra small screens when it reaches the medium break point it's going to be 5 columns in width also we're going to say text hyphen center to centralize the image it works on images as well okay so then inside here we want an image so let's do the image tag and the source is going to be from the assets and we want the ebook cover oops there's nothing in there at the minute i thought i put them in obviously not so let me try dragging those in drag them over there okay so we want the ebook cover which is this image right here so the source is going to be forward slash assets then forward slash ebook hyphen cover dot png all right then so the alt will just say ebook cover now if i preview this check it out the image is huge right and as we make the browser smaller then it doesn't get any smaller so basically it's coming out of the constraints of the column it's in now in order to make this a fluid image a responsive image all we have to do is give this a class so i'm going to say class is equal to fluid hyphen image and then what that is going to do oops it's not fluid image sorry it's image hyphen fluid and what that's going to do is make it 100 width of the parent element so this thing right here so it's going to take up all of those five columns in width all right so this is looking pretty good right but notice this when we get to really small screens it just doesn't look right on smaller screens so what i want to do is display this as none for slightly smaller screens and then when we get to medium-sized screens and up then we can display as block so to do that we're going to say d hyphen none so that means it displays none by default or smaller screens then i'm going to say d hyphen md hyphen block and that means display as block when we get to medium size screens and up so now for smaller screens it shouldn't show on the page and for large ones it does like that pretty good right and also notice the text we said over here text center which is the case for smaller screens all the text is in the center right then when it gets to the medium size break point it goes to the start which is the left so let's see that in action yep goes over to the left now it's left aligned all right cool so there's one more thing i want to do i want to bring this content down a bit into the middle and the way we can do that is by coming to the row which is right here i'm using an align class so i can say align items and then center and what that does is align all the items in the row in the center of the row like this vertically so if i save this now you'll notice it come down to the center so again this is just like flexbox so there we go friends that's the first section of the website done that little bit of grid right there next up we're going to work on the nav bar at the top