Now, the next Bootstrap element I want to talk about are containers.
So, if you head over to Documentation and go to Layout, in the Overview section you can see that the
first thing that they talk about are containers. And containers are a basic building block for a lot
of the components in Bootstrap. It’s actually required when you use a lot of Bootstrap components.
For example, when you use the grid system, as we saw previously, you can see that all of these grids were
in fact contained inside a container.
And this is really really useful, because it allows you to horizontally center, or to pad out your content,
by simply using this container.
So let's take a look at containers in more detail. So, I’ve created a new Code Ply that I'm just going
to call Bootstrap 4 Container, and I'm going to change again the Bootstrap framework to 4.0,
hit save, and now I'm going to create a new div that's going to have a class of container. And inside the
div, of course, I need a little bit of content for it to be visible.
So, in this case, I'm just going to copy the ’Lorem ipsum’ that I've got from this web site, so that I can use it
to pad out my div.
So, the last thing I want to do is add a little bit of background color to, maybe, red again, hit run, and
we've got this container that contains all the text that's inside.
Now of course you can contain anything you want,
for example divs, or buttons, or tables, anything you need.
But this component, what it does is, if I pop this out as a window, you can see that we've got our container
that's colored in red. Now, it's automatically responsive.
So what that means is that, as I go through, so going from desktop to laptop to tablet to mobile sized,
you can see that the maximum width of the container jumps through different values, and you can see these
values if you just simply inspect on the container.
Let's select the container,
and let’s watch this max-width value.
So at the moment we're on the largest size,
so this is the sort of laptop size.
And as the width goes down,
so let's make that first jump to the smaller desktop size, you can see that our max-width is now 960.
Let's go to the tablet size.
You can see it made another jump to 720 max-width. And finally to the mobile size, which is now max-width
540 pixels.
So this allows anything that's contained inside your container to be fully responsive relative to the
size of the viewport.
Now, for some people this might seem a little bit jarring, as it jumps around a bit.
So, the other type of containers that you have is what's called a fluid container. And fluid containers
take up 100 percent of the width.
So let's copy this container and paste another one below, and change this one to a container-fluid,
change the color to yellow, and let's run that.
So let's pop this out as a full screen.
You can see the difference now, as I go through the different break points.
So, as we go from the large desk top to the smaller desktops, you can see that the normal container is
jumping through the different widths, but the fluid container is simply adapting to the width of the
screen, and always taking up 100 percent of the screen width.
So, I want to use a container inside our web site to be able to add padding and centering to our content.
But I don't want that jumpiness from the normal container,
so instead I want to use a fluid container.
So, let's head into our index.html, and I want to include the navigation bar along with the title
and the images in the same container.
So, let's add a div just around here, and let's give that class a container-fluid, and we're going
to put the closing div just before the closing tag.
And now if we go ahead and beautify our code, then you can see that that div now wraps around our nav
bar as well as the title section.
So now we can go ahead and select that div and style it in our CSS.
So, the class that we're going to select is the container-fluid.
And even though Bootstrap already has some pre added styles to this, we are going to make it a little
bit more personalized to our purposes, namely we’re going to add some padding, and we're going to add
it to all four sides.
So we're going to add 3 percent padding to the top and bottom and 15 percent to the left and the right.
And now, if we hit save, we can check out what it looks like with that container. If I switch on Pesticide,
you can see that we've got this large box that goes all the way around, including the navigation bar,
as well as all the stuff in the title section.
So now we can group everything together and start working on our components inside the container.
So, in the next lesson we're going to learn about another Bootstrap component to style up our title page
further,
and that is going to be the Bootstrap buttons. And we're going to use it to style up our download buttons
to make it look nice.
So, for all of that and more, I'll see you on the next lesson.