COMMON BOOTSTRAP STARTING CLASSES
When putting together the layout for a page, there are a few classes that you typically use to start. The first two help define how much space the content will take on the overall page, while the last will allow you to highlight content, such as the site’s title and introductory information.
|container||The container class places content inside of a horizontal container. The size of the container will vary based on screensize. The container will stay the same width for that particular screensize. This helps developers size content appropriately for different devices.|
|container-fluid||The container-fluid class places content inside of a container that will always be the width of the screen. This is helpful for scenarios where the content to be displayed must use the entire browser window.|
|jumbotron||The jumbotron class is a common class for displaying titles for different sections of a website, or the landing page. The jumbotron typically has a highlighted background and an increased fontsize.|
- Always 12 columns
- Smaller sizes set the default for larger sizes
- col-sm- would set the size for small, medium and large screens unless overridden by a setting specific to one of the larger sizes
- There is a 30px “gutter”, or empty space, between each column (15px on each side of the column)
- The gutter on the outside of the container varies based on the current screen size
- Extra small devices always use the entire width of the screen
|Extra small devices
(< 768 px)
(≥ 768 px)
(≥ 992 px)
(≥ 1200 px)
|Container width||None (auto)||750px||970px||1170px|
|Column class prefix||col-xs-||col-sm-||col-md-||col-lg-|
The screens sizes that Bootstrap uses are not random, but rather based on research on common device sizes. While you can change the screen sizes, because Bootstrap does use CSS, you want to use the defaults provided.
GRID SIZE CLASSES
Structure of Bootstrap classes for sizing grid content
- Short for column
- Required prefix
- size abbreviation
- xs for Extra small
- sm for Small
- md for Medium
- lg for Large
- Number of columns
- Integer to represent the number of columns
Let’s take a look at a couple of sample Bootstrap content sizing classes:
- col-md-4 would indicate 4 columns for medium and large screens
- col-sm-6 would indicate 6 columns for small, medium and large screens
- col-xs-2 would indicate 2 columns for extra small, medium and large screens
Remember that screen size rules apply for the specified screen size as well as those larger than that size, unless overriden. So the following combination would indicate 2 columns for extra small screens, 6 columns for small screens, and 4 for medium and large screens.
The Bootstrap grid system allows developers to lay out their pages using a system that’s similar to tables, but uses CSS positioning instead of tables behind the scenes. One feature tables offer is the ability to create tables inside of a cell, so you can create complex layouts through what’s frequently referred to as “nesting”. The grid system offers the same capability.
Every row you create has 12 columns, regardless of where that row is created. If you create a section of content, and then add a row inside of there, that row has 12 columns.
Let’s take the following HTML example.
In that example, we would have created a section for content that is 6 columns wide, or half of the container. If we then added a new row into that space, replacing the sample content, we’d have a brand new 12 columns. However, those new columns would only take up half of the container, as they are inside of a section that is constraining it to 6 initial columns.