Original subtitles

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.