Bootstrap - Grid Demo

Understanding the Grid System

Bootstrap's grid system is a tool for creating responsive and flexible layouts. It provides a way to structure and align content on a web page using predefined classes. The grid system is based on a 12-column layout, which allows you to create various combinations of columns to suit your design needs.

The grid system has three main components: containers, rows, and columns. A container is the outermost element that wraps the content and sets the width of the layout. It can be either fixed-width (.container) or full-width (.container-fluid). Inside the container, you define rows (.row) to create horizontal groups of columns. Rows are used to contain and align the columns.

Columns are the building blocks of the grid system. Bootstrap provides different column classes to specify the width and behavior of columns at different screen sizes. The column classes are based on a 12-column grid, meaning you can divide a row into 12 equal-width columns.

The * in the class name represents the number of columns the element should span out of the 12 available columns. For example, .col-sm-6 means the column will span 6 out of 12 columns (50% width) on small screens and above.

By using these column classes, you can create responsive layouts that adapt to different screen sizes. You can specify different column widths for each screen size, allowing your layout to adjust and stack columns as needed on smaller screens.

<div class="row">
  <div class="col-lg-4 col-sm-12">Column 1</div>
  <div class="col-lg-4 col-sm-12">Column 2</div>
  <div class="col-lg-4 col-sm-12">Column 3</div>
</div>

This flexibility allows you to create layouts that look great on various devices and screen sizes.

Creating a Basic Grid

To create a basic grid in Bootstrap, you use a combination of container, row, and column classes.

<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>

By using the .col class without specifying a size, Bootstrap automatically distributes the available width equally among the columns. As a result, each column will have the same width and will adjust automatically based on the screen size.

If you want to set different widths for the columns, you can use the column size classes.

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-6">Column 2</div>
    <div class="col-sm-2">Column 3</div>
  </div>
</div>

The first column has the class .col-sm-4, which means it will span 4 out of 12 columns (33.33% width) on small screens and above. The second column has the class .col-sm-6, spanning 6 out of 12 columns (50% width). The third column has the class .col-sm-2, spanning 2 out of 12 columns (16.67% width).

You can use different column size classes for different screen sizes to create responsive layouts.

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6">Column 1</div>
    <div class="col-lg-6 col-md-4 col-sm-6">Column 2</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column 3</div>
  </div>
</div>

The column widths change based on the screen size:

By using different column size classes, you can create flexible and responsive grid layouts that adapt to various screen sizes.

Remember that the total number of columns in a row should add up to 12 for proper alignment and spacing. If the total exceeds 12, the columns will wrap to the next line.

With Bootstrap's grid system, you can easily create and customize grid layouts to suit your design requirements, making your web pages responsive and visually appealing across different devices.

Responsive Grid

Bootstrap's grid system is responsive, allowing your layout to adapt to different screen sizes. By using the right column classes, you can create layouts that adjust based on the viewport width.

The grid system has breakpoints that match different screen sizes. These breakpoints are set by the width of the viewport and are grouped as follows:

To create a responsive grid, you can use different column classes for each breakpoint. This lets you set different column widths and behaviors based on the screen size.

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
    <div class="col-lg-4 col-md-6 col-sm-12">Column 2</div>
    <div class="col-lg-4 col-md-12 col-sm-12">Column 3</div>
  </div>
</div>

The column classes are used to set different widths for each breakpoint:

• On large screens (lg), each column takes 4 out of 12 columns, making a three-column layout.
• On medium screens (md), the first two columns take 6 out of 12 columns each, while the third column takes the full width of the row.
• On small screens (sm), all columns take the full width of the row, stacking vertically.

With this approach, the layout adjusts based on the screen size, giving a good viewing experience across different devices.

Along with adjusting column widths, you can also hide or show elements based on screen size using Bootstrap's responsive utility classes.

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">Column 1</div>
    <div class="col-lg-4 col-md-6 d-none d-md-block">Column 2 (Hidden on small screens)</div>
    <div class="col-lg-4 col-md-12">Column 3</div>
  </div>
</div>

The second column has the classes d-none and d-md-block. The d-none class hides the element on all screen sizes, while the d-md-block class overrides it and shows the element on medium screens and above. This way, the second column is hidden on small screens and becomes visible on medium screens and larger.

By combining different column classes and responsive utility classes, you can create responsive grid layouts that adapt to various screen sizes and devices. This allows your content to be shown in the best way for each viewport, making the user experience and readability of your web pages better.

Nesting Grids

Bootstrap's grid system lets you nest grids within columns, giving you more control over the layout and organization of your content. Nesting grids means creating a new grid structure inside an existing column.

To create a nested grid, you add a new .row within an existing column and then add columns inside that row. The nested columns will follow the same 12-column grid system as the parent grid.

<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">
      <div class="row">
        <div class="col-md-12">Nested Column 3</div>
      </div>
    </div>
  </div>
</div>

Nesting grids allows you to create more complex and hierarchical layouts, where you can divide columns into smaller sub-columns. This is useful when you need to organize and align content within a specific column.

However, there are some limitations and considerations to keep in mind when nesting grids:

Nesting grids provides flexibility in creating more intricate and structured layouts. However, it's important to use them carefully and keep the nesting depth and complexity in check for maintainability and readability of your code.

Grid Alignment

Bootstrap's grid system provides classes for aligning columns vertically within a row. These alignment classes allow you to control the vertical positioning of columns, making it easy to create visually appealing and well-aligned layouts.

To align columns vertically, you can use the following alignment classes on the .row element:

<div class="container">
  <div class="row align-items-start">
    <div class="col">Column 1 (Top)</div>
    <div class="col">Column 2 (Top)</div>
    <div class="col">Column 3 (Top)</div>
  </div>
  <div class="row align-items-center">
    <div class="col">Column 1 (Middle)</div>
    <div class="col">Column 2 (Middle)</div>
    <div class="col">Column 3 (Middle)</div>
  </div>
  <div class="row align-items-end">
    <div class="col">Column 1 (Bottom)</div>
    <div class="col">Column 2 (Bottom)</div>
    <div class="col">Column 3 (Bottom)</div>
  </div>
</div>

You can also align individual columns within a row using the following classes:

<div class="container">
  <div class="row">
    <div class="col align-self-start">Column 1 (Top)</div>
    <div class="col align-self-center">Column 2 (Middle)</div>
    <div class="col align-self-end">Column 3 (Bottom)</div>
  </div>
</div>

By using these alignment classes, you can easily control the vertical positioning of columns within a row, creating visually appealing and well-aligned layouts. This is especially useful when you have columns with different heights or when you want to create a specific visual hierarchy within your grid.

Remember that these alignment classes work in conjunction with the grid system's responsive classes, so you can apply different alignments based on screen sizes if needed.

Grid Ordering

Bootstrap's grid system lets you change the order of columns using ordering classes. These classes let you rearrange the visual order of columns without changing the HTML structure. This is useful when you want to create different layouts for different screen sizes or prioritize certain content.

To change the order of columns, you can use these ordering classes:

<div class="container">
  <div class="row">
    <div class="col order-3">Column 1</div>
    <div class="col order-1">Column 2</div>
    <div class="col order-2">Column 3</div>
  </div>
</div>

You can also use responsive ordering classes to change the order of columns based on screen sizes. These classes follow the same naming convention as the responsive column classes (order-{breakpoint}-*).

<div class="container">
  <div class="row">
    <div class="col order-3 order-md-1">Column 1</div>
    <div class="col order-1 order-md-2">Column 2</div>
    <div class="col order-2 order-md-3">Column 3</div>
  </div>
</div>

Another way to reorder columns is by using push and pull classes. These classes allow you to shift columns to the left or right by a specified number of columns.

<div class="container">
  <div class="row">
    <div class="col-md-4 push-md-8">Column 1</div>
    <div class="col-md-8 pull-md-4">Column 2</div>
  </div>
</div>

Grid Offsetting

Bootstrap's grid system provides a way to create spacing between columns using offset classes. Offsetting lets you move columns to the right by a specified number of columns, creating gaps or empty spaces in the grid layout. This can be useful for adjusting the positioning and spacing of columns to achieve a desired layout.

To offset columns, you can use the .offset-* classes, where * represents the number of columns to offset. The offset classes follow the same naming convention as the column classes (offset-{breakpoint}-*).

<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 class="row">
    <div class="col-md-3 offset-md-3">Column 3</div>
    <div class="col-md-3 offset-md-3">Column 4</div>
  </div>
</div>

You can also use responsive offset classes to create different offsetting behavior based on screen sizes. This allows you to adjust the spacing and positioning of columns for different devices and resolutions.

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4 offset-md-4 offset-lg-2">Column 2</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">Column 3</div>
    <div class="col-md-3 offset-md-3 offset-lg-0">Column 4</div>
  </div>
</div>

Offsetting can be combined with different column widths to create more complex and appealing layouts. Here are a few examples of different offsetting scenarios:

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">Centered Column</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-6 offset-md-2">Column 2</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-3">Column 1</div>
    <div class="col-md-3 offset-md-3">Column 2</div>
    <div class="col-md-3">Column 3</div>
  </div>
</div>

By using offset classes, you can easily create spacing and positioning variations in your grid layout. This gives you more control over the visual structure of your web page and allows you to create appealing and well-spaced designs.

Remember to consider the responsiveness of your layout when using offset classes, as the spacing may need to be adjusted for different screen sizes to maintain a good user experience.