Bootstrap containers add 15 pixels of padding on both sides of the container. The text in this paragraph is not inside a container and thus it goes all the way to the left and right sides of the browser window. The text below will be put inside of a container and thus you will see 15px of space on both sides.
Bootstrap containers add 15 pixels of padding on both sides of the container. This text is inside a container and thus you will see 15px of space on both sides of the text. This particular container has a fluid-width and is specified by class="container-fluid". As you adjust the size of the window, the container is continually adjusting to the size of the size of browser window
This text is in the other type of Bootstrap container, which has a fixed width, but the width depends on the size of the container. This is different than the fixed width layouts we have previously discussed in ITE 170 which had a set width regardless of the screen resolution of the device. With the Bootstrap fixed width container, as the window is resized, the container will stay the same size until it reaches a media query breakpoint and then will jump to another size. This container is specified with a class="container". Note the difference in how the two types of container behave as the browser window is slowly resized. The resizing of the browser window indicates how these containers will behave on devices of various resolutions.
The Bootstrap 3 breakpoints are indicated in the following table:
| Extra Small <768 |
Small >=768 |
Medium >=992 |
Large >=1200 |
|
| Width | Full width of browser minus padding on either side | 750px | 970px | 1170px |
Sometimes you will want content inside of a container and sometimes not. Below we will have a heading which is inside a Bootstrap fixed width container and thus the word Headline lines up with the text in the fixed width container above. However the background color (more commonly this would be a background image) is specified outside of the container and thus extends the entire width of the page. In this instance the class which applies the background color is in an embedded stylesheet, but more commonly it would be in an external stylesheet that would be linked to immediately after the link to the bootstrap.css file. The HTML is as follows:
<div class="background">
<div class="container">
<h1>Headline</h1>
</div>
</div>