Understanding Bootstrap containers - Bootstrap Tutorial

- Creating mobile first responsive design can be a bit challenging, and that's because of the math involved in calculating the width of columns, as well as gutters. Now thankfully Bootstrap makes this super simple. So let's take a look at how the grid works and explore the most fundamental component, the Bootstrap Container. Now Bootstrap comes with a 12-column grid which is super common for building responsive websites. To access the grid you add CSS classes to your content and that allows you to create extremely flexible layouts. In order to take full advantage of this framework, you need to understand three key concepts, containers, rows, and columns. We'll take a look at containers in this video. Now a Bootstrap container is declared through a special class that allows you to control the layout. Now adding this class is also going to create 15 pixels of padding on each side of the element. So the content within a layout never fully reaches the edge of the screen. So any time you want an element to go the full width of the browser, you don't put it inside a container class. We'll take a look at an example in a minute. Now there's two types of containers, fixed, as well as fluid containers. We'll take a look at the fluid container first. The fluid container always adjusts to the size of the device so as you change the width of the browser, you'll see the content within a fluid container adjust. So let's take a look. Here's some code that I have from the previous video. And right now all we have is a basic headline as well as a paragraph of copy. You can see that because it's not inside a container, it goes all the way to the edge of the screen. And so if we want to put this in a container we have to add a class. So we'll do a container fluid class right here and we'll place all of our content in there. And I'm going to save and refresh over here. You can see that the content gets pushed in at about 15 pixels on each side. And because it's a fluid container, no matter what width I make the browser you can see that it always pushes the content to adjust to the width of the device. Now a fixed-width container is a little bit different. This is a container that will show a specific size, depending on the size of the viewport. So let's take a look at what happens on a fixed-width container. Now a fixed-width container will also get 15 pixels on each side. But it also adjusts to different media breakpoints. So when our layout is extra small, which is considered less than 768 pixels, the container will go to the full width of the browser minus that little bit of padding on each side. When the viewport is small, or greater than 768 pixels then the container will be fixed at 750 pixels, and so on, and so forth, according to this chart. So let's take a look at what happens to our content if we put it inside a regular container. I want to make a copy of this one right here. And I'm going to change this class to just be a container class. So I'm going to save and refresh this page and you'll see that there's two of them right here, but when I reach a certain size you'll see that the top one will stop moving and it will be fixed to a specific position. So that is one of my breakpoints. If I make this window bigger, you'll see that at a certain point this will adjust to a new breakpoint, all right, which you see the headline jumping right there. The bottom one is fluid container, so it's always the width of the browser. But the top one is jumping according to certain breakpoints. So let's take a look at what would happen if I wanted to create a little bit of a more complex layout here. So I'm going to grab this container right here and I'm going to create another section. And this section is just going to be a header, and what I'm going to do is I'm going to give that a class of BGimage and I'm going to get rid of this paragraph so this is going to be just a normal header. And what I want to do is have a header that has a photo in it. I've already placed an image in my Images folder and I want part of the header to be in a container, and part of it to not be in a container because sometimes you want to be able to have something within a container, and sometimes not. So let's go ahead and add then another DIV here with a class of container. And we'll put the Headline in there. Let's go ahead and indent this a little bit so we can sort of tell what the difference is. And I'm going to add some CSS here to create a background image. So right now these look exactly the same, but because I've added this class of background image here, I'm going to add some CSS into my styles.css document and it's going to target that BGimage. And then in here I'm going to say background image and I'm going to target the images folder and the file called reptiles.jpg. And I'm going to set the background position here to be in the center, as well as set the background size to be cover and give it a height of 200 pixels. So what this will do is place a background image in our header, and put our headline inside it. Now this is one of the cases that I wanted to show you here, sometimes you want to have some content within the container, and then some content that is not ruled by that container. That allows us to have this background that goes the full width of the browser, and the content that actually fits within this container section. So understanding containers and when you need them is the most fundamental component in the Bootstrap grid. And we still need to talk about the other two main components, rows, and columns, We'll take a look at those in the next couple of videos.