Welcome back, everyone, to this last lecture on Bootstrap, which is going to cover the grid system.
Now, Bootstrap uses a layout convention based on containers and a grid system that allow you to organize
or each to mail components based on rows and columns.
And it also allows you to easily automatically resize your web page for smaller or larger screens.
Now, we should note when you're actually using bootstrap, whether it's the grid system or any other
bootstrap component, you're typically going to put everything within a container class.
And from there, it's actually further separated out into rows and columns.
And using these rows and columns, you end up creating a grid.
Now, Bootstrap does allow you to specifically dictate how to resize for certain screen sizes extra
small, small, medium, large and extra large screen sizes, which are defined by the number of pixels
wide.
The screen actually is.
Or you could also let bootstrap automatically resize for you.
We should note that for the rest of this course, we're not going to stress too much about having the
web pages render perfectly on a mobile screen and a desktop screen.
We'll go ahead and leave that up to you when you actually launch your real projects using Django and
Bootstrap as a frontend framework.
Here we're just going to cover the very basics of the grid options so you can have a basic understanding
of how it works.
All right.
So what actually happens on different screen sizes when your website is using the bootstrap framework?
Bootstrap comes up with his really clever idea, based off Flexbox to split up the entire screen into
12 available columns.
So you can imagine that if you have 12 available columns, you can put a piece of content over across
12 columns and you can actually use any combination of numbers that eventually add up to 12 columns.
If you wanted certain portions of the components to be wider on the screen, you could just have to
take up more of the available columns.
And as long as the total sum along any of these rows is equal to 12, then you're OK.
So you can have all 12 basic available columns.
So that could be you can imagine, like 12 different buttons across the screen as long as the screen
is wide enough.
Or you could do six by two, four by three, three by four, two by six, etc. And depending on how
you define this bootstrap, can actually automatically resize this and push things down to another row
in case there's not enough room on the screen.
Now, the grid system, what it does is it actually makes use of a class called row as well as a class
called column in order to do this sort of structure.
So it feels a lot almost like you're defining an HTML table, except you're actually just creating these
little mini divisions, defining a column and an available row.
Now, if you actually want to specifically tell Bootstrap to resize on a certain size screen and bootstrap
actually has size screens defined by pixel width, then the following format you would use is the column
that screen size the number of columns.
So that could be something like call that small, smaller call dashed medium, etc..
For example, column that medium screen use six columns, essentially use half of the columns available.
So we can define how the column should be shown when the screen gets resized.
Let me get started with some very simple examples.
Again, don't stress about this too much because for the rest of the course, we're not really going
to be able to show you what the screens look like on a mobile device.
Instead, think about this when you're actually going to launch your site and if you expect people to
visit your site both on a tablet, phone and desktop computer.
OK.
Let's head over to our code editor.
All right, so here I am inside a visual studio code.
I've already linked up CSS and JavaScript for bootstrap, as well as my own style sheet.
We will be using that later on.
And then when I want to generate the life preview, I have that button ready to go.
First, let's check out the documentation on Bootstrap.
So if you check out the Get Bootstrap documentation, the section we're looking at is called the layout
section.
And specifically, we're really talking about grid, where they show you this great example.
But there's a whole philosophy here.
Around break points and break points is just the idea of when the screen starts getting too small.
I want the system to break down and instead of having multiple columns break down into multiple rows
and we'll show you what that means later on.
But the idea in general, is that you're going to have different sized screens that have dimensions
based off pixels.
So there's extra small screens, small screens, medium large, extra large and extra extra large screens.
As a quick note, the monitor that I'm filming this on is a relatively large screen.
It's somewhere around extra large to extra extra large.
But I should also point out I'm pretty zoomed in when I'm actually recording these videos.
So you're going to see me zoom in and out quite a bit during this particular recording just to show
you the effects of things, resizing and the specific effects of specifying a break point.
Now, really, the part that we should be concerned about are containers.
Ingrid's containers are this idea that you can set everything within a default container that is going
to allow you to have some extra padding.
If you recall, when we copied and pasted some examples, like, for instance, when we copied and pasted
these button examples, they didn't have this nice spacing and that's because they weren't inside a
container.
So it's actually copy this button example one more time, and I'm going to paste that in here inside
the body and then do a life preview recall.
It didn't look as nice as it did and the bootstrap documentation.
And that's because we didn't put it inside a container class div.
So undo this and let's say div.
And then inside this div, I'm going to say class is equal to.
Container and then I'm going to replaced all those buttons there.
And you can already see just by doing that, we've added a little bit of padding as well as the ability
to quite nicely automatically resize things into a specific number of rows and columns.
I should point out I am zoomed in, so you're not going to see the same effects on your computer unless
we're zoomed up to 100 percent, both of us.
So if I zoom out to 100 percent, it kind of looks something like this, but this might be too small
for you to read my code.
But just as an idea of how the resizing actually works and more importantly, the general padding that
is given to you by the container class.
So if I delete that container div and delete it right now, so delete these two lines of code.
You'll notice there is no longer any padding there.
So that's one part of the containers.
It just has enough padding so that everything kind of looks nice and a little more spaced out.
Again, these are stylistic decisions, so you may not want that.
Look for your particular website.
So there are some kind of costs of doing business with bootstrap as the fact that all kind of these
bootstrap web sites start to look kind of similar.
Now, don't come back here to get bootstrap.
And again, I mentioned we're really just interested in the layout section here, and we already understand
containers kind of give us this idea of a little bit of padding and organization.
They are also responsive to the size of the screen, and then we have the grid system with columns and
rows.
So here we can see the grid options, and these essentially allow us to adapt across the different break
points which were in the break.
Points are when do I start resizing columns into rows based off the actual size of the screen?
And you do have the ability to just do this automatically.
In fact, I'm going to actually copy some of this code and we'll see what happens when we let it happen
automatically versus when we're actually specific and dictate a particular breaking point.
You notice that there's actually a class prefix for each of these.
So small is the column dash and then some.
For small, that's the actual class call.
It puts the notation actually in csv notation, which is why it has that little dot there.
But I'm going to copy and paste this example for the documentation.
And what this is doing is it's actually showing you two items or essentially two columns, perreault
and then you have three rows underneath.
So these are all equal with and should all kind of automatically resize.
So we're going to copy these.
And I'm going to paste it.
And let me just show you how this works right now, so I will zoom in a little bit and not worry too
much about the life preview right now.
Just want to zoom in and show you what's going on here.
So what we've done is I've put everything inside a container class there.
So at the very top, I have my container class div and then I have my rows and then I can put essentially
as many columns they want in my rows, keeping in mind that there's, technically speaking, only 12
columns available.
So if I start trying to add more items than that, depending on my screen size, automatically get refitted
into pushing that down into a new row.
You'll see what I mean just a second.
But here we have yet another row, and then there's divs here, four columns and then you can put whatever
you want on these columns.
These could be like form elements, components, just different text, etc. You may notice, though,
if I do a life preview, it doesn't have that nice gray background or the nice border.
What I will do is for each of these column classes, I will create an actual black border.
So I'm going to go into my master CSV file and I'm going to create a new class called Extra just for
kind of an extra border.
And here we're going to say border.
And I'm going to say it's, let's say, a typical border.
It's solid and black, so I have created a class called Extra and now I'm just going to save that and
I will attach it to the column classes.
So we're going to say extra here.
So we're every second call you put in call extra.
That's just for visualization purposes.
This kind has nothing to do with bootstrap itself.
So we'll do that here as well.
And this just helps me show you what's actually happening with the bootstrap.
So now MS and then you can see here starting to stretch out, and even as the screen size gets bigger,
you suddenly start hitting the padding of the container itself.
So note what's happening here as it expands, there's also a container and essentially auto resizing
the padding of those columns as well.
Now, if I really zoom out, then you're really going to see the effects all zoom out quite a bit.
You see here those two columns and you see the three columns and it's automatically being resized to
the screen.
OK, now what happens if I add in more columns?
That's totally OK as well.
We have up to 12 columns to work with.
So what I could do is within one of these row divisions, you can kind of think of this as a table.
I can add in more columns so I can copy this last step, which is also a column div.
And let's add in a couple more here.
So we're going to say this is now new one and we'll call this new to.
Save those changes, and I'm going to zoom out again to see the effects so they can see here.
I now have five columns available to us, but you would notice that as I add in more columns eventually,
if I squeeze them down too much, I can actually push to a new row.
So that's the auto resizing that bootstrap lets you have, and I'm going to zoom in just to make this
effect even stronger.
So again, I have most three original columns.
I added two new ones.
If I push them down too much, it will push them out into new rows.
OK, so I have that idea of pushing out into new rows.
The last thing I want to point out is you can actually be more specific of when you want the breakdowns
to begin to occur.
And for this, I'm going to go ahead and just deal with this top row of two to make it more obvious.
So let's go ahead and grab the second row and delete all the items from it.
So let's this division.
Second row.
Go ahead and delete that.
Careful when it starts and stops.
So I'll go ahead and delete that.
So you just have one row.
With two columns, and then we're going to experiment a little bit here.
All right, so recall in the actual grid system, there's the ability to specify how many columns should
be taken up on a particular screen sizes.
So these are the breakpoint small, medium, large, extra large and extra extra large.
And then after you decide that screen size for a breakpoint, you decide on that particular breakpoint,
how many columns should be taken up by this component?
So let me show you this effect here, and keep in mind, I'm kind of zoomed in right now, so I'm going
to zoom out later once I've finished writing this code so you can read it and then you'll actually see
the effect.
So let me exit that document for the live preview and let me zoom in.
So right now we just have call.
If you just put call by itself, it's essentially going to resize all the components in that particular
row to have equal number of columns available.
But now what I'm going to do is I'm actually going to specify, let's say, on a small size screen or,
yeah, small size screen should be fine.
Let me say on a small size screen, I want this to only take up two of those columns.
So this is only going to take up two out of the 12 columns, and then I want this component to take
up the extra 10 columns.
So that's going to be 10.
Of those 12 columns.
So now, because I actually specified small two and small 10, when it hits that break point of small,
it's going to resize things to specifically be two out of 12 on this first one and 10 out of 12 on this
next one.
So now I want to zoom out here to try to get that side screen.
Let's get the live preview.
And you should notice this effect.
So note here how this is only taking up two of those 12 columns.
And now this section is a lot wider.
It's taking up 10 out of 12 of those columns, and that means that if I delete these again, or let's
actually now make them equal space, so I'm going to say six and six.
So six and six there you saw that it when I didn't resize and I overflowed past 12.
It will create a new row, but now you can see they're taking up the same space.
So now I've specifically said six on both.
So now they're both six out of 12 here.
And again, this just works by you specifying the column, the breakpoint and then how many of those
columns should they take on that particular breakpoint, which means you can then begin to stack these
particular columns if you want to be hyper specific for certain screen sizes, what break points should
be used?
And you can always kind of rest easy knowing that if your screen gets super small and flows beyond the
12 columns of availability, Bootstrap says, OK, I'm just going to push this out to in your row.
So if I hyper zoom in here, then it's OK.
I'm just going to push it out to a new row and notice when you push it out to a new row, it's going
to kind of reset everything.
And now this is going to end up taking the entire space, and you could keep adding more and more stipulations
for like an extra small grid and that sort of thing.
But I just want you to get familiar the idea that you use a container, you specify your rows and then
you can specify the columns for our use cases.
We're pretty much going to have everything be kind of auto resized for us and just something like this
where we're just going to specify the columns and we're going to say, go ahead, bootstrap.
You make everything equal a number of columns and resize as necessary.
But later on, if you want to be more specific than that, you have the tools and documentation to follow
along with.
And there's plenty of examples here.
We're pretty much just going to follow the auto layout examples where everything is essentially automatically
resized for us and equal with so that's it for Bootstrap.
I'll see you at the next lecture.