Bootstrap - Grid System
Grid Classes
Bootstrap's grid system is built using containers, rows, and columns. These classes work together to create a flexible and responsive layout for your web pages.
The container class is the outermost element of the grid system. It provides a fixed-width container that centers the content on the page. Bootstrap also offers the container-fluid class, which creates a full-width container that spans the entire width of the viewport.
Inside the container, you create rows to group columns horizontally. Rows are created using the row class. They are important for proper alignment and spacing of columns.
Columns are the building blocks of the grid system. They are created using the col-* classes, where * represents the size of the column based on the desired breakpoint. Columns are placed inside rows and can be nested to create more complex layouts.
Bootstrap's grid class naming convention follows a specific pattern: col-{breakpoint}-{size}. The breakpoint refers to the screen size at which the column should take effect, such as xs, sm, md, lg, or xl. The size represents the number of columns the element should span out of the total 12 columns in the grid.
Grid Example
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>For example, the class col-md-6 means that the column will span 6 out of 12 columns (50% width) on medium-sized screens and above. If no breakpoint is specified, like col-6, the column will have the same width across all screen sizes.
By combining containers, rows, and columns with the appropriate classes, you can create responsive and flexible layouts that adapt to different screen sizes.
It's important to note that columns should always be placed within rows, and the sum of column sizes within a row should equal 12 for proper alignment and spacing.
Grid Options
Bootstrap's grid system has five breakpoints, letting you change your layout for different screen sizes. These breakpoints are based on the width of the viewport and are grouped as extra small (xs), small (sm), medium (md), large (lg), and extra large (xl).
The extra small (xs) breakpoint is for screens with a width of less than 576 pixels. This breakpoint is usually used for targeting mobile devices in portrait mode. When using the col- classes without a breakpoint, such as col-6, the columns will have the same width on all screen sizes, including extra small screens.
The small (sm) breakpoint targets screens with a width of 576 pixels or more. This breakpoint is good for mobile devices in landscape mode and small tablets. To make columns that work at this breakpoint, you can use the col-sm-* classes, where * is the number of columns the element should span.
The medium (md) breakpoint is for screens with a width of 768 pixels or more, which includes larger tablets and small desktop screens. You can use the col-md-* classes to set column sizes for this breakpoint.
The large (lg) breakpoint targets screens with a width of 992 pixels or more, which usually includes medium-sized desktop screens. The col-lg-* classes are used to set column sizes for this breakpoint.
The extra large (xl) breakpoint is for screens with a width of 1200 pixels or more, which includes large desktop screens and high-resolution displays. You can use the col-xl-* classes to set column sizes for this breakpoint.
Responsive Columns Example
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">Column 1</div>
<div class="col-sm-6 col-md-4 col-lg-3">Column 2</div>
<div class="col-sm-6 col-md-4 col-lg-3">Column 3</div>
<div class="col-sm-6 col-md-4 col-lg-3">Column 4</div>
</div>
</div>In this example, the columns will have different widths based on the screen size. On small screens (sm), the columns will span 6 out of 12 (50% width). On medium screens (md), they will span 4 out of 12 (33.33% width). And on large screens (lg), they will span 3 out of 12 (25% width).
By using these breakpoints and their classes, you can make responsive designs that change to different screen sizes, giving users a good viewing experience on various devices.
Responsive Grid
Bootstrap's grid system is responsive, allowing your layout to adapt to different screen sizes. This responsiveness is achieved through breakpoints and mixing and matching grid classes.
The grid system in Bootstrap has five breakpoints: extra small (xs), small (sm), medium (md), large (lg), and extra large (xl). Each breakpoint corresponds to a screen width range. When the viewport width reaches a breakpoint, the grid layout adjusts.
The breakpoints in Bootstrap's grid system are:
| Breakpoint | Screen Width |
|---|---|
| Extra small (xs) | Less than 576px |
| Small (sm) | 576px or more |
| Medium (md) | 768px or more |
| Large (lg) | 992px or more |
| Extra large (xl) | 1200px or more |
To create a responsive grid, you can mix and match grid classes based on these breakpoints. By applying different column classes for each breakpoint, you define how your columns behave at different screen sizes.
Example: Responsive Grid
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">Column 1</div>
<div class="col-sm-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-sm-12 col-md-6 col-lg-4">Column 3</div>
</div>
</div>The columns will have different widths based on the screen size:
| Screen Size | Column Behavior |
|---|---|
| Extra small (xs) | Columns stack vertically, taking up full width (12 columns) |
| Small (sm) | Columns stack vertically, taking up full width (12 columns) |
| Medium (md) | Columns arranged horizontally, each spanning 6 out of 12 columns (50% width) |
| Large (lg) | Columns arranged horizontally, each spanning 4 out of 12 columns (33.33% width) |
If you don't specify a column class for a breakpoint, the column will inherit the behavior from the next smaller breakpoint. For example, if you only specify col-md-6 without classes for sm or xs, the column will stack vertically on small and extra small screens.
Grid Features
Bootstrap's grid system has more features that give you more control over your columns' layout. These features include offsetting columns, column ordering, and nesting columns.
Offsetting Columns
Offsetting columns lets you push columns to the right by a number of column widths. This is useful when you want empty space between columns or center a column in a row.
To offset a column, you can use the offset-* classes, where * is the number of columns to offset. The offset classes use the same naming as the column classes: offset-{breakpoint}-{size}.
Example: Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4 offset-md-4">Column 2</div>
</div>
</div>The second column is pushed right by 4 column widths on medium screens and above. This makes an empty space between the two columns.
Column Ordering
Column ordering lets you change the order columns show on the page. This is helpful when you want to change the column order for different screen sizes or for visual reasons.
To change the order of columns, you can use the order-* classes, where * is the order position. The order classes use this naming: order-{breakpoint}-{position}.
Example: Column Ordering
<div class="container">
<div class="row">
<div class="col-md-4 order-md-2">Column 1</div>
<div class="col-md-4 order-md-1">Column 2</div>
<div class="col-md-4 order-md-3">Column 3</div>
</div>
</div>On medium screens and above, the second column will show first, then the first column, and then the third column. The order-md-* classes set the order position of each column.
Nesting Columns
Bootstrap's grid system also lets you nest columns in other columns. This means you can make a new grid inside a column, giving you more control over your content's layout.
To nest columns, you need to make a new row in an existing column and then add columns inside that row. It's important to keep the right row and column structure to avoid layout problems.
Example: Nesting Columns
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">Nested Column 1</div>
<div class="col-md-6">Nested Column 2</div>
</div>
</div>
<div class="col-md-4">Column 2</div>
</div>
</div>The first column (col-md-8) has a nested grid with two columns (col-md-6). The nested columns will have a width of 50% in the parent column.
When nesting columns, remember that the nested columns should always add up to 12 columns in the parent column. This helps keep the grid system consistent and aligned.
Grid Customization
Bootstrap's grid system is customizable, allowing you to change various parts of the grid to fit your specific needs. This customization is done using Sass variables, which provide a way to change the default values of the grid system.
One of the most common customizations is changing the number of columns in the grid. By default, Bootstrap uses a 12-column grid system. However, you can change this by setting the value of the $grid-columns Sass variable. If you want to use a 16-column grid, you can set $grid-columns: 16; in your Sass file before importing Bootstrap.
Example: Changing number of columns
$grid-columns: 16;
@import "bootstrap";After changing the number of columns, you'll need to update your column classes accordingly. If you have a 16-column grid, you can use classes like col-md-8 to span 8 out of 16 columns (50% width) on medium screens.
Another customization option is changing the grid breakpoints and container widths. Bootstrap defines five default breakpoints: xs, sm, md, lg, and xl. You can change these breakpoints by setting the values of the corresponding Sass variables: $grid-breakpoints and $container-max-widths.
Example: Changing grid breakpoints and container widths
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1024px,
xl: 1280px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px
);
@import "bootstrap";The lg breakpoint is changed to 1024px, and the corresponding container width is set to 960px. This means that the grid will respond to the lg breakpoint at a screen width of 1024px, and the container will have a maximum width of 960px.
It's important to note that when customizing the grid system, you should make these changes before importing Bootstrap in your Sass file. This makes sure that your custom values override the default values provided by Bootstrap.
Customizing the grid system allows you to change Bootstrap's responsive layout to your specific design requirements. By changing the number of columns, breakpoints, and container widths, you can create a grid that better fits with your project's needs.
Remember to test your customizations to make sure that the grid system still works as expected and provides a consistent and responsive layout across different screen sizes.