Grid Basic
The Bootstrap grid system is a powerful layout tool that uses rows and columns to structure and align content in a flexible and responsive way. It’s built upon a 12-column layout and utilizes a series of containers, rows, and columns to help designers and developers build responsive and aesthetically pleasing web layouts.
Why Use the Bootstrap Grid?
- Responsive Design: Automatically adjusts your layout for different screen sizes, ensuring that your website looks great on all devices, from phones to tablets to desktops.
- Flexibility: Offers immense flexibility to position and align content in a variety of ways, catering to a wide range of design needs.
- Ease of Use: With its straightforward class-based system, even those new to web design can quickly create complex layouts.
- Consistency: Ensures a uniform structure across your web pages, making your design process more efficient and your final product more cohesive.
What is the Bootstrap Grid?
The Bootstrap grid is a 12-column flexible grid system that can be combined with responsive classes to build layouts of all shapes and sizes. It’s built with flexbox and is fully responsive.
Components of the Grid System
Containers
A grid system requires a container (div with class .container or .container-fluid) to hold the system.
Rows
Rows (div with class .row) are used to create horizontal groups of columns.
Columns
Columns (div with class .col-) are the immediate children of rows. The in .col- can be replaced with numeric values to specify the number of columns the element should span.
How Does It Work?
- The grid system uses a series of containers, rows, and columns to layout and align content.
- It’s based on a 12-column system where you can specify how many columns you want an element to span.
- For example, adding a class of .col-6 to an element will make it span half the width of the container (as 6 is half of 12).
Responsive Breakpoints
The responsive breakpoints in the Bootstrap Grid System is a great way to visually present this important information.
Here’s how the table would look, followed by an explanation:
| Feature | X-Small (xs) | Small (sm) | Medium (md) | Large (lg) | X-Large (xl) | XX-Large (xxl) |
| Max Container Width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class Prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| Number of Columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter Width | 1.5rem (0.75rem on each side) | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem |
| Custom Gutters | Yes | Yes | Yes | Yes | Yes | Yes |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Column Ordering | Yes | Yes | Yes | Yes | Yes | Yes |
Explanation:
– Responsive Breakpoints: Bootstrap’s grid system adapts to the screen size, using breakpoints to apply different styles. These breakpoints are:
– X-Small (xs): For screens smaller than 576px. The class prefix is .col-, and the container has no maximum width (auto).
– Small (sm): For screens 576px and wider. The class prefix changes to .col-sm-, and the maximum container width is 540px.
– Medium (md): For screens 768px and wider. The class prefix is .col-md-, with a maximum container width of 720px.
– Large (lg): For screens 992px and wider. The class prefix is .col-lg-, and the container width increases to 960px.
– X-Large (xl): For screens 1200px and wider. The class prefix is .col-xl-, with a max container width of 1140px.
– XX-Large (xxl): For screens 1400px and wider. The class prefix is .col-xxl-, and the max container width is 1320px.
– Number of Columns: The grid system is based on a 12-column layout across all breakpoints, offering flexibility and a wide range of layout options.
– Gutter Width: Gutters are the spaces between columns. Bootstrap uses a standard gutter width of 1.5rem, which can be customized.
– Custom Gutters: Bootstrap allows the customization of gutter widths to suit different design needs.
– Nestable: Columns can be nested within other columns, allowing for more complex and intricate layouts.
– Column Ordering: Bootstrap provides the ability to reorder columns based on the screen size, enhancing the flexibility of your layouts.
This responsive grid system is what makes Bootstrap extremely powerful for creating layouts that look great on any screen size, from the smallest mobile device to the largest desktop screen.
Creating a Basic Grid Layouts
“Basic Two-Column Design”
2. “Simple Three-Column Structure”
3. “Flexible Columns with Auto-Layout”
4. “Understanding Column Wrapping”
5. “Diverse Multi-Column Layout”
6. “Grid Within a Grid: Nesting Columns”
These examples offer a straightforward and easy-to-understand approach to various column layouts in Bootstrap, from basic two and three-column structures to more advanced concepts like auto-layout and nested grids.
Aligning Grid Columns in Bootstrap
Understanding the alignment of grid columns is crucial for fine-tuning the layout of your Bootstrap pages. Bootstrap provides a set of utility classes for aligning content both vertically and horizontally within the grid system.
Horizontal Alignment
Centering a Single Column
– Class Used: `.mx-auto` on a column.
– Effect: Centers the column within the row.
Example
Aligning Columns to the Start, Center, or End
– Classes Used: `.justify-content-start`, `.justify-content-center`, `.justify-content-end` on the row.
– Effect: Aligns all columns inside the row to the start, center, or end of the row, respectively.
Example
Vertical Alignment
Aligning Individual Columns Vertically
– Classes Used: `.align-self-start`, `.align-self-center`, `.align-self-end` on the column.
– Effect: Aligns the column to the top, center, or bottom of the row, respectively.
Example
Aligning All Columns in a Row Vertically
– Classes Used: `.align-items-start`, `.align-items-center`, `.align-items-end` on the row.
– Effect: Aligns all columns inside the row to the top, center, or bottom of the row, respectively.
Example
These explanations and examples should give a comprehensive understanding of how to align columns both horizontally and vertically within the Bootstrap grid system. Mastery of these alignment techniques is key to creating polished and well-structured web layouts.
Reordering and Offsetting Grid Columns in Bootstrap
Bootstrap provides powerful capabilities to reorder and offset grid columns, enabling more dynamic and flexible layouts. Let’s explore how to use these features effectively.
Reordering Columns
Bootstrap allows you to change the visual order of your columns using order classes.
Using `order` Classes
– Classes Used: `.order-` classes (e.g., `.order-1`, `.order-2`, etc.)
– Effect: Changes the order of columns based on the specified number.
Example
Responsive Reordering
– Classes Used: `.order-{breakpoint}-` classes (e.g., `.order-md-1`, `.order-lg-2`, etc.)
– Effect: Changes the order of columns at different breakpoints.
Example
Offsetting Columns
Offset classes in Bootstrap are used to create extra space before a column.
Using `offset` Classes
– Classes Used: `.offset-` classes (e.g., `.offset-md-2`, `.offset-lg-3`, etc.)
– Effect: Adds left margin to a column, effectively pushing it to the right by a specified number of column units.
Example
Responsive Offsetting
– Classes Used: `.offset-{breakpoint}-` classes (e.g., `.offset-md-2`, `.offset-lg-3`, etc.)
– Effect: Applies offsetting at different breakpoints.
Example
Reordering and offsetting columns are essential skills in Bootstrap for creating complex and responsive layouts. These features offer the flexibility to adjust the positioning and alignment of content in a variety of ways, adapting to different screen sizes.
Advanced Grid Features
- Nesting: Place a row within a column to nest grids.
- Offsetting: Use .offset- classes to add space between columns.
- Alignment: Align content vertically and horizontally using flexbox utilities.
Practical Tips
- Always start with a container, followed by a row, then columns.
- Columns in a row should add up to 12 for proper alignment.
- Utilize responsive breakpoint classes to tailor your layout to different devices.
Practice Exercise
Create a layout with three columns of equal width on medium devices, but on small devices, let them stack on top of each other.
