Hello everyone and welcome back to our bootstrapped course and this lecture.
We're going to be showing you how to make a grade in bootstrap by making rows and columns so in bootstrap
you can put elements into rows and then put elements inside of each row into columns as well as vice
versa.
So let's go ahead and show how we can make a row with columns and how we can set the width of each column.
So first of all we're going to make a row with equal columns.
So I'm going to open up a div with the keyword div and then I'm going to give it a class.
And we're going to give it the bootstrap class of row.
And that means that anything inside of this div is going to be put into a row and each element will
be treated as a column.
So let's put in three divs in here just like this div slice.
Dave Dave and slash div.
So just like that we have three elements inside of our row and each one is going to be treated like
a column in the row and in order to set the width of each row we can either set it explicitly by setting
the width with a bootstrap class or we can let bootstrap immediately set the with by default.
So the default will be that it will all be spaced out in thirds but we can also set it ourselves.
So how we would set it ourselves is to declare a class and give it the class column M.D. for and this
means that the width of the column is going to be four out of 12 units because each row contains 12
units and depending on the width you give to the columns.
It will be this value divided by twelve.
So if you put four as the column with value then it will take up a third of the row width OK.
Similarly we can do the same for the other divs you can give it the class column M.D. for and this will
ensure that they are all spaced out and given the the same with that is one third of the row width.
Now we actually want to see this in action.
So what we're going to do is apply a colour to each div and by applying a colour to each div as well
a border we build to see each div and how it is given its width.
Because right now this div is empty which means if we tried to see it we would not see anything.
So let's go ahead and give it another class called a block and block class is not a bootstrap class.
This is a class that we are going to have to style ourselves.
You're going to give it a color and a border so we can see with the div looks like we also can put in
some text in here to let us know what the div contains.
So right now we know that it contains this column and before us we can just put that right in there
and this is the text that will show up inside of the div a color will be the background of the day of
the text will be calm empty for inside of the div.
Let's go ahead and add some styling to our column to each of the divs in our columns.
We're gonna go ahead and open up CSX because right now in the output we would just see this text right
here if we ran the code would open up CSX here in Spin and just been allows you to immediately add CFS
into your HMO without having to reference it in your header because it is all part of the same bean.
So I'm going to open up the CFS and the CSF that I need here is going to be on my block.
So I'm going to call Dom block to reference this block class that I created here and with my custom
CFS I can style this that I can see it.
So I'm going to give it a background color of dark orange was going to hide the extra mile for now so
you can see the CFS.
So I'm giving you a background color and I'm also going to give it an outline so outline and border
are somewhat different.
And I'm going to work with an outline for this specific case.
So let's set the outline style.
This is going to be solid.
There are other styles I dashed and transparent et cetera.
We can also set the outline color to explicitly black and we can also set the outline with too thick
so we can see it clearly.
So now we've applied all this styling to our block whereas previously it was transparent.
Let's go ahead and test how this.
Yes s combined with our e-mail looks like in the output.
So I'm going to click on the output and I'm going to hide the EU mounts.
Yes so we can see clearly and as you can see we have here the column Andy for the comedy before and
the column empty for.
These are the three columns that we need and they are evenly spaced because you can see they have a
border and they're evenly spaced on the page.
Thanks to this column before bootstrapped class now as you can see it's automatically created at the
very top and very leftmost corner of the page.
And then it continues to fill the whole screen.
So we can actually adjust this a little bit by adding padding with bootstrap.
So let's go ahead and hide this output for now and open up our ECMO.
And here's our estimate.
We're going to apply padding on the body so we're going to do is add the class key five and this will
apply padding to the top bottom left and right of a value of five.
Now this is five times 80 pixels.
So it is not actually five pixels which is important to remember for padding you can set it to a value
from one to 5 and it will give this padding to all four sides of whatever element that class is applied
to.
OK let's go ahead and test this.
Now that we've added a bit of padding so it should automatically pop up in the output something that
looks like this.
If you ever have trouble testing with your spin just go to File Save snapshot.
You want to save a snapshot of your bean often or you could lose the bin.
You can also download the code to be extra sure and have a backup.
And so once you've hit save snapshot then you can refresh the page and that will immediately show everything
that is in a code translated into an output.
So the compiler of J.S. Ben will take that to my code and read it and output or put out this rendering
of the code.
OK.
So as you can see we have our comms here now with a bit of padding.
So I'm just going to toggle the EU amount closed so we can see this output.
Now these are three columns.
And what they would look like on a large screen if I open up the e-mail tab again then now I'm seeing
this on a bit of a smaller screen and I can toggle this output back and forth.
And this is extremely useful because this would be a laptop screen but this would look like a phone
screen.
So you definitely want to be aware of mobile users and when designing a web site don't just design it
for web users but also design it for mobile users because mobile users make up about 60 percent of the
web.
Yes that's more than half.
OK.
So you'll see that with the bootstrap when the columns in the row are on the large screen they're side
by side on one row.
But when the screen gets bigger after a certain breakpoint which means a certain screen width.
So in this case around 700 pixels or 700 10 or around 800 actually well after a certain breakpoint the
columns toggle themselves one on top the other.
So they stack themselves rather toggling would mean they would hide themselves but stacking is how we
have them now.
So they stack themselves due to responsively which is a feature of bootstrap which automatically takes
these columns for you and stacks them for mobile users which makes it much more easier to navigate the
Web site on a mobile phone.
And as you can imagine this is extremely useful for for developers because bootstrap will automatically
make these columns and more elements responsive for you in many different ways as you'll see in this
course.
OK.
Let's go ahead and hide the output for now.
What we did so far is we made a row with some columns and we explicitly declared the columns to be of
equal width out of twelve.
Well we can also do is change these values and we can see what the columns would look like if we wanted
to change the width value here so we could change this to something like to add this to something like
7 and then this to the value that is 12 minus two minus 7.
So 3 these numbers should add up to 12 for best performance.
OK.
Great.
So I'm going to go ahead and test this again in the output and we're going to see what this looks like
now that we have changed the column widths.
And don't forget to save a snapshot of your bin frequently as you don't want to lose your code here
on Jasmine.
I want to also change these names to 2 7 and 3 This way it will be clear that we have changed the bootstrap
class as well.
So if we test this now in the output we'll see that on a mobile screen.
So on a small screen like a tablet an iPad or mobile.
The columns are stacked but on a large screen you columns now have different widths.
And this is all due to bootstrap styling.
You'll notice we had nothing in the CSF except for the color and the outline classes or features and
that is because bootstrap has its own styling automatically applied to its columns and rows.
OK I'm going to hide the CFS so as you can see this one is a width of two out of twelve one sixth of
the entire width of the row.
This is seven out of 12 just about just over half of the width of the entire row.
And this is three so a quarter width of the entire row and that is all done with these with classes.
Okay great.
Thank you all for watching.
That is everything that they were going to cover for containers or grids and I highly recommend that
you go ahead and try out more of these features because bootstrap has more stylings for rows and columns.
There are more options for how you can make columns and how you can set their responsively as well as
you can make rows inside of columns inside of rows inside of columns etc. You can make nested columns
in rows.
Other than that thank you all for watching.
You can now know how to build your own rows and columns and these are extremely useful because often
your whole website will be set up in rows and columns like you have an image here some text here and
then a sidebar here for example or this would be your navigation.
This would be your main content and this would be your sidebar navigation.
So as you can imagine rows and columns are very useful they're used very commonly.
OK thank you all for watching and we will be continuing with bootstrap in the next lecture.
See you there.