Bootstrap - Grid System: A Friendly Guide for Beginners

Hello there, future web developers! Today, we're going to embark on an exciting journey into the world of Bootstrap's Grid System. Don't worry if you've never written a line of code before – I'll be right here with you, explaining everything step by step. So, grab a cup of coffee (or tea, if that's your preference), and let's dive in!

Bootstrap - Grid System

What is the Bootstrap Grid System?

Before we start, let me tell you a little story. Imagine you're trying to organize your bookshelf. You want to arrange your books neatly, but they're all different sizes. Frustrating, right? Well, the Bootstrap Grid System is like a magical bookshelf that automatically organizes your content, no matter what size or shape it is!

In web design terms, the Grid System is a powerful layout tool that helps you create responsive and well-structured web pages. It's like having a personal assistant who arranges your webpage content perfectly, whether it's viewed on a large desktop monitor or a tiny smartphone screen.

Basic Example

Let's start with a simple example to get our feet wet. Here's a basic structure of the Bootstrap Grid System:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

What's happening here? Let's break it down:

We start with a container class. This is like the outer box that holds everything.
Inside the container, we have a row class. Think of this as a shelf in our bookshelf analogy.
Within the row, we have three col-sm classes. These are our books, sitting side by side on the shelf.

How It Works

The Bootstrap Grid System is based on a 12-column layout. Why 12? Well, it's a magical number in web design because it's divisible by 1, 2, 3, 4, and 6, giving us lots of flexibility!

Here's a visual representation:

1	2	3	4	5	6	7	8	9	10	11	12
Column	Column	Column	Column	Column	Column	Column	Column	Column	Column	Column	Column

Each of these columns can be combined to create wider content areas. For example, you could have a layout with two columns of 6 units each, or three columns of 4 units each. It's like playing with building blocks!

Auto-layout Columns

Now, let's look at some cool tricks. Bootstrap can automatically handle column widths for you. Check this out:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

In this example, we're not specifying column widths. Bootstrap is smart enough to divide the space equally among the columns. It's like having a robot arrange your bookshelf for you!

Equal-width

Want all columns to be the same width, regardless of content? Easy peasy!

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Even though the middle column has more content, all three columns will remain equal width. It's like having expandable books that always fit perfectly on your shelf!

Setting One Column Width

Sometimes, you want one column to be a specific width and let the others adjust automatically. Here's how:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

In this case, the middle column will take up 6 units (half the width), and the other two columns will split the remaining space equally.

Variable Width Content

What if you want a column to adjust its width based on its content? Bootstrap has you covered:

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

The col-md-auto class allows that column to grow or shrink based on its content. It's like having a book that can change its size to fit perfectly between its neighbors!

Responsive Classes

Now, let's talk about making our layout responsive. Bootstrap uses breakpoints to adjust the layout based on screen size. Here are the main breakpoints:

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

All Breakpoints

Here's how to use these breakpoints:

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

This layout will remain the same across all screen sizes. It's like having a bookshelf that looks the same whether you're looking at it from across the room or up close!

Stacked to Horizontal

But what if we want our layout to change based on screen size? Check this out:

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

On small screens and up, these columns will be side by side. On extra small screens, they'll stack vertically. It's like having a bookshelf that can transform into a book tower when space is tight!

Mix and Match

You can also mix and match column sizes for different screen sizes:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>

This layout will look different on small screens versus medium screens and up. It's like having a shape-shifting bookshelf!

Row Columns

Want to create equal-width columns quickly? Use row columns:

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

This creates a row with two columns, no matter how many col divs you have. It's like having a bookshelf that always arranges your books in pairs!

Nesting

Last but not least, you can nest grids within grids:

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

This creates a grid within a grid. It's like having little bookshelves inside a bigger bookshelf!

And there you have it, folks! You've just taken your first steps into the world of Bootstrap's Grid System. Remember, practice makes perfect. Try playing around with these examples, mix and match different classes, and see what happens. Before you know it, you'll be creating beautiful, responsive layouts like a pro!

Happy coding, and may your web pages always be perfectly organized!

Credits: Image by storyset

Previous Tutorial:

Bootstrap - Containers

Next Tutorial:

Bootstrap - Columns