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

Instructions and Help about What Form 2220 Columns

This is part 5 of bootstrap tutorial in this video we'll discuss the concept of offsetting the grid columns we'll also discuss some of the bootstrap classes that are available to style an image element when creating website layouts using the grid system you may want to move grid columns to the right for alignment purpose let's understand this with an example let's say we want to create a layout that looks like this in the first row we want to equal columns and in the second row we want four equal columns we can very easily achieve this using this HTML notice within the container we've got two rows that's our first row and this is our second row with in the first row we've got two columns each columns planning three columns within the 12 column bootstrap grid system and within our second row we've got four columns again each column spanning three columns within the 12 column bootstrap grid system I have this exact same HTML already typed within visual studio so when we view this in the browser this is how it looks like now what we want to do is Center the two columns in the first row like this to achieve this we will have to push the first column in the first row to the right by three columns and this is exactly the purpose of offset classes in bootstrap just like how we have different grid classes for different screen sizes we have the corresponding offset classes as well so to offset a column on an extra small device we use call - XS - offset class to offset a column on a smaller device we use call - sm - offset class so on and so forth now we want to push this column the first column in the first row to the right by three columns so I am going to use call MD - offset - three on the first column on in the first row so this is going to push this column to the right by three columns which is going to push the second column as well to the right in our by three column so we get these two call centered let's look at this in action so let's slip to visual studio so this is our first column in the first row so in addition to call - MD - 3 I am going to use call - md - offset 3 so this is going to push this first column to the right by 3 columns so let's save our changes and when we refresh this page look at that the two columns are nicely centered as expected now let's say we want to create you know six columns gap between the first and second columns in the first row like this to achieve this we will have to push the second column to the right by 6 columns the first column will stay where it is okay so we only want to push the second column to the right by 6 columns so we can very easily achieve this by using call MD offset 6 on the second column like this so let's flip to visual studio so I'm going to remove the column MD offset 3 from our first column and apply this on our second column in the first row and since we want to push it to the right by 6 columns I'm going to use MD offset 6 so let's save the changes and when we reload this page look at that we get 6 columns gap between the first column and second column now let's look at a simple example of where this offset feature could be useful let's say we want to create a layout that looks like this within our second row we want three equal columns and within our first row we want just one image and that image should be centered now this can be very easily achieved so within our second row notice we want three columns so each column here is spanning four columns in the 12 column bootstrap grid system that's our second row in the first row we have an image element we have set the source of the image and we have the class attribute here we want the image also to span four columns within the 12 column bootstrap grid system so we are using call MD for and in addition to that since we want to the image to the right by four columns we using call MD offset for I have this exact same HTML already typed within our notepad so I'm going to copy that and paste it within our index dot HTML so let's delete this and paste it okay now we need this image so these images are present at this path so I mean I'm on Windows 7 operating system so the path on my machine is C users public pictures sample pictures so we want this tulips image so I'm going to copy that and I'm going to add a new folder to a project and I'm going to name it images let's paste the image into this folder okay so we have our image there so let's save our changes and look at this when we reload the page we get three columns here and in the first row we have the image nicely centered but now there's a problem here look at this the image width is not the same as the width of this column that's because we are applying a margin of three pixels on all the four sides instead let's include a margin only on the bottom so I'm going to change this margin - bottom let's save the changes and when I reload this page notice the width of the image is the same as the width of the column there is another