Ideas - -The Web Developer Bootcamp 2024
Colt Steele
Bootstrap Containers & Grid System
Containers
The Bootstrap Container Class is the most basic layout element in Bootstrap and is required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
Bootstrap comes with three different containers:
- .container, which sets a max-width at each responsive breakpoint
- .container-fluid, which is width: 100% at all breakpoints
- .container-{breakpoint}, which is width: 100% until the specified breakpoint
There are many different types of Bootstrap Containers and more information can be found on the Containers Website. Another important point is that the Bootstrap container class automatically adds breakpoints which restructure the grid, based on viewport size.
Bootstrap Container Breakpoints |
|||
| Device | Size | pixels | Breakpoint |
|---|---|---|---|
| Small Moblie Devices | Xtra Small (xs) | < 576px | None |
| Moblie Devices | Small (sm) | >= 576px | 540px |
| Tablets & Ipads | Medium (md) | >= 768px | 720px |
| Small Screens & Laptops | Large (lg) | >= 992px | 960px |
| Desktops and Large Screens | Xtra Large (xl) | >= 1200px | 1140px |
| Extra Large Screens (TV's) | Xtra Xtra Large (xxl) | >= 1400px | 1320px |
No Container Example
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dignissimos autem ab veniam deserunt nostrum quibusdam eaque iure pariatur nesciunt provident, nobis, maiores assumenda accusamus suscipit culpa? Deserunt, expedita tempora. Tempore, sequi! Minus repudiandae aliquid debitis obcaecati ipsam inventore cum eum? Consequatur autem aliquid sed molestiae officiis expedita nihil rem in rerum! Quas, alias porro excepturi minus ratione quidem accusantium. Optio aliquid repellat autem ipsa mollitia eius modi harum recusandae illum? Doloribus autem voluptatum molestiae minima, non suscipit, eligendi laborum minus ut nostrum excepturi quibusdam? Quod laudantium aperiam totam quae!
With < div class="container"> Example
The container immediately adds padding, and maintains the padding as the page is resized.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dignissimos autem ab veniam deserunt nostrum quibusdam eaque iure pariatur nesciunt provident, nobis, maiores assumenda accusamus suscipit culpa? Deserunt, expedita tempora. Tempore, sequi! Minus repudiandae aliquid debitis obcaecati ipsam inventore cum eum? Consequatur autem aliquid sed molestiae officiis expedita nihil rem in rerum! Quas, alias porro excepturi minus ratione quidem accusantium. Optio aliquid repellat autem ipsa mollitia eius modi harum recusandae illum? Doloribus autem voluptatum molestiae minima, non suscipit, eligendi laborum minus ut nostrum excepturi quibusdam? Quod laudantium aperiam totam quae!
Bootstrap Grid System
The Bootstrap Grid system is set inside a bootstrap container with a series or rows and columns. Each row is twelve (12) columns wide. These 12 columns can be mixed into many different combinations of the 12 columns by combining columns in the same manner as a table colspan works. *note: you can center the text in the container cell by adding text-center to either the main container, row, or column.
12 Column Grid
the basic syntax is:
- < div class="container">
- < div class="row">
- < div class="col">Column 1< /div>
- < div class="col">Column 2< /div>
- < div class="col">Column 3< /div>
- < /div>
- < div class="row">
- < /div>
This example is defining a grid with one row and three columns. Since no column width has been set, the three columns will split the 12 available, EQUALLY between them. So each column is 4 wide. *note: you can center the text in the container cell by adding text-center to either the main container, row, or column.
If we set column 2 to be 6 wide like so, < div class="col-6">, then columns 1 and 3 would split the remaining 6 columns to be 3 wide each. *note: you can center the text in the container cell by adding text-center to either the main container, row, or column.