Video instructions and help with filling out and completing How Form 2220 Columns

Instructions and Help about How Form 2220 Columns

Music let's dig into the grid system just a little bit more and create a slightly more nuanced responsive layout let's say that beneath the main content area of our page this whole row rather that we've created let's say beneath all that we want to have four little info boxes with kind of like some promotional information some some real buzzword e-type marketing stuff we're going to start off just the same way we created our main body in our sidebar so open up your index.html file make sure you're in the right place we want to be in between the closing tag for our row div and the closing tag for our container div so right here let's add a new row this is a new row because it's a whole nother level of the page so this is one row then beneath it will be another row so we'll start off with a div with the class row go ahead and go down and close that and then inside this row again we want four little areas four columns and bootstraps grid system language so for now we'll just do div and then closed it and we'll do that four times and in each of these let's put an h3 header and we use some real buzzword of stuff innovate sustain lead and and inspire now we'll also go and put a small paragraph beneath each one of these so you can go ahead and open and close your paragraph tag I'll go back to blind text generator comm grab maybe two or three sentences of text paste that in and I'm just going to use the same thing for each of these just to keep things simple so we don't have to spend too much time copying and pasting stuff so now inside this new road if you should have four additional div each containing an h3 header with some word and a paragraph right beneath that with a couple sentences of text make sure that all looks right save it go back to your site and refresh and it'll look like this that's fine we haven't created our columns yet make sure this is how it looks and if it does then go back to your index dot HTML file and we'll start adding our classes so let's start off just like we did before in the first div beneath row again we want these to be going all across the page all for on desktop monitors so medium and large so to do that we have the class call - MD - one fourth of 12 which is three again it's a twelve column layout we want four of equal size so these are going to each span three of those columns and we don't have to add call large three as well because keep in mind if we don't specify the large column or the columns for large screens then this defines everything including medium and up so we only have to do this for the smallest one that we want here so we want everything below a medium-sized screen to exit differently and we want medium and up to be three columns each so we need to go add this four these div class call em d3 class call and d3 and class call em d3 okay save that go back to your site refresh make sure it looks like this that's starting to look pretty good but we haven't done anything new yet we want to test this out just to make sure it's working so we can make our browser smaller we see once it goes beneath a medium desktop screen size this would be considered tablet size everything takes up the full width just like it did before but we're going to do something a little bit different this time let's say that when the screen is smaller when we're viewing this on a mobile phone or on a tablet instead of each of these elements taking up the full width of the screen we want them to take up half of the screen so we would see innovate and sustain on one line and then beneath that we would see lead and inspire we're going to keep our main content in our sidebar acting just the same as they are with each one taking up the full width of the screen but on these smaller screens since these are really small pieces of content they can each take up half the width of the screen we can have two side by side to do that we simply add another class to each of these divs so again we want this to be extra small and small so we only have to specify the extra small size because that'll go up and include small as well and then since we've also defined medium separately that will take over at that point and override the settings for extra small and set the settings for medium and large so we're going to add another class call X X X s rather for extra small six because we want this to take a path to screen with twelve columns half of that is six we want this to take up six columns we need to add these for the rest of them call XS six call XS six and call XS six so we have two classes defining different types of behavior for different screen sizes make sure you save go back to your website once again refresh notice you won't see any changes yet because we didn't change the way it works on a medium or large screen but once we start making it smaller let's see what happens then here we go this will be considered a medium or tablet sized screen if we went really small if we go really small we'll see it stays that way for