Bootstrap's grid system makes a web page's content layout more straightforward. Take this lesson to learn how to use it!

Learn Bootstrap 4: Grid

Great job navigating through Bootstrap's grid! 


Let's review some key concepts:
* When in doubt, check <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/" target="_blank" rel="noopener noreferrer">Bootstrap's  documentation</a>.
* There are a few required links to use Bootstrap (the CSS file and two `<meta>` tags)
* Bootstrap 4 has a grid system implemented using flexbox
* The grid system is made of containers, rows, and columns that work together to make a web page's layout.
* Containers are needed to implement the grid.
* Containers hold rows which hold columns.
* Bootstrap's grid follows a 12 column system.
* Bootstrap uses responsive design and is built around breakpoints related to device screen sizes.
* To manually set the width of a column we have to follow Bootstrap's naming convention. 
* We can add multiple classes to a column to determine how wide a column should be on specific breakpoints. 


Bootstrap 4 Grid Review

Bootstrap simplifies the layout of a website using a grid system. For us to fully take advantage of Bootstrap's grid system, we need to understand how to structure our HTML. 

At the heart of it, _containers_ are the basis of Bootstrap's grid. Inside containers, we nest _rows_ as immediate children. Then, nested inside rows are _columns_. Inside columns, we put our actual content. Take a look below at an example of this nesting pattern. Don't worry about the syntax of rows and columns just yet, but do take note of how our HTML is organized:

```html
<div class="container">
  <div class="row">
    <div class="col">
      
    </div>
  </div>
</div>
```

We can gain even more control of our layout once we start nesting rows inside columns and setting widths for our columns! But, first, let's review how to create a layout using Bootstrap.

Intro to the Grid

Now that we have an understanding of how the layout works in Bootstrap and how to use containers, let's focus our attention to rows. 

As mentioned in the previous exercise, rows are nested within containers. Also, we can add as many rows as we want inside a container. By default, a row will take up the entire width of its parent container. To create a row we assign a `class` of `"row"` to an element. Take a look at the provided example with a nested row inside a container:

```html
<div class="container">
  <div class="row">
  </div>
</div>
``` 

Let's now add some rows to our web page!


Rows

In the previous exercise, we went over how to follow Bootstrap naming conventions to add breakpoint requirements for a column. We can go one step further and add multiple classes to our columns for additional control over the rendering of our content. 

Let's walk through the syntax and thought process using an example:

First, we'd want to think about how our column looks like on extra small screens. Since we don't have much space, we would want to have our column take up the entirety of the row and assign a class of `"col-12"`. We don't include an `xs` breakpoint, it's implicitly applied for us! Our column looks like: 

```html
<div class="col-12">
</div>
```

Then we decide that for medium-sized screens we don't want the column to take up so much space, so we could set the width to `8`. We use the Bootstrap naming convention and add an additional class to the column like so:

```html
<div class="col-12 col-md-8">
</div>
```

For large screen sizes, we want the column to take up even less relative space and we set the width to `6`. We have to add another class to the column:

```html
<div class="col-12 col-md-8 col-xl-6">
</div>
```

From the example, we have a column that renders a different width based on a user's screen size. On extra small and small sized screens, the column has a width of 12 individual columns. For medium and large sized screens, the column has a width of 8 individual columns. Lastly, for extra large screens, the column has a width of 6 individual columns. We could've even used up all of Bootstrap's provided breakpoints! Read <a href="https://getbootstrap.com/docs/4.1/layout/grid/#mix-and-match" target="_blank" rel="noopener noreferrer">Bootstrap's grid mix and match documentation</a> for more information.



Combining Bootstrap Classes

Using Bootstrap, we can freely change the layout of our content using grid. We can even customize how our content on the grid changes based on breakpoints (extra small, small, medium, large, extra large). To incorporate these breakpoints into our code, we have to follow Bootstrap's class naming convention. 

The naming convention follows a pattern of `"col-{breakpoint}-{width}"`. Let's break this pattern down:
* As seen before `"col"` refers to a column. 
* `{breakpoint}` can be `sm`, `md`, `lg`, or `xl`. Notice that there is no extra small or `xs` breakpoint. If we omit `{breakpoint}`, it is by default for extra small screens.
* `{width}` can be set from `1` to `12` and assigns a width to the column.
* When we set a `{breakpoint}-{width}`, it means that we want our column to have that set width for screens that fit in the specified breakpoint range and other larger screens. 

For instance:
```html
<div class="col-sm-8"> 
</div>
```
The column in the example will be as wide as 8 individual columns on small screen sizes and also any larger screens (medium, large, and extra large). In the next exercise, we'll go over how to customize our layout for every breakpoint. For now, let's get comfortable with Bootstrap's naming convention. To get even more information check out  <a href="https://getbootstrap.com/docs/4.2/layout/grid/#grid-options" target="_blank" rel="noopener noreferrer">Bootstrap's grid options documentation</a>.


Breakpoint Naming Convention

Bootstrap uses a grid system based on <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" target="_blank" rel="noopener noreferrer">CSS Flexbox</a> which organizes content in rows or columns. As seen in the previous exercise, Bootstrap also uses rows and columns and in this exercise we'll learn about the essential Bootstrap container. Using the Bootstrap grid also allows for _responsive design_, in other words, a website's layout can change based on the user's screen size. Read more about grid at <a href="https://getbootstrap.com/docs/4.1/layout/grid/" target="_blank" rel="noopener noreferrer">Bootstrap's grid documentation</a>.

Bootstrap uses classes to apply CSS rulesets &mdash; these rulesets dictate the layout and styling of the element. To create a container, necessary for Bootstrap's grid, we assign a class of `"container"` to a `<div>` like so:

```html
<div class="container"></div>
```
The `<div>` from the example above becomes a Bootstrap container which has a width relative to a user's screen size, becomes horizontally centered, and has a left and right margin. 

If we wanted the container to take up the entire width of the screen we can assign a class of `"container-fluid"`:
```html
<div class="container-fluid"></div>
```

Knowing how to use documentation is important. We can always check what classes to add using <a href="https://getbootstrap.com/docs/4.1/layout/grid/" target="_blank" rel="noopener noreferrer">Bootstrap's grid documentation</a>. 

**Note:** the Bootstrap site uses CSS notation for classes, which entails having a `.` before a class name like `.example-class-name`. 


Bootstrap Containers

In the previous exercise, we saw how columns take on a default width based on the size of the row. However, Bootstrap gives us more customization options so that we can make columns of varying widths. Take a look at 4th and 5th row of the diagram for examples of rows containing columns of differing widths:

<img src="https://content.codecademy.com/courses/learn-bootstrap-4/12-col-grid-diff-widths.svg" alt="Bootstrap columns can have different widths">

We can decide the width of a column by appending a hyphen and a number to the `"col"` class like so: 
```html
<div class="col-8">
  <p>This is the width of 8 columns.</p>
</div>
```
In our example, our row still has 4 columns worth of space. If we decide to add an adjacent column, we could also set our desired width like so: 

 ```html
<div class="row">
  <div class="col-8">
    <p>This is the width of 8 columns.</p>
  </div>
  <div class="col-4">
    <p>This has the width of 4 columns.</p>
  </div>
</div>
```
If we didn't specify a desired width for the second column, it would still resize itself to fill in the remaining space in the row. But, by adding `"-4"`, we make our code more readable and allow other developers to clearly know our intentions. 

Now let's customize the widths of our columns! 


Setting Column Widths

One benefit of using Bootstrap is that it incorporates _responsive design_. With responsive design, the layout of the content changes to accommodate a user's screen size. 

Bootstrap categorizes screen sizes into 5 categories or as _breakpoints_: extra small, small, medium, large, and extra large. Each breakpoint has a range measured in pixels. The range of these breakpoints and accompanying device types are marked in the following table: 

<div class="narrative-table-container">

| Category | Breakpoint Range | Device Type |
| :--- | :---: | ---:|
| Extra small | < `576 px` | portrait smartphones |
| Small | ≥ `576 px`  | landscape smartphones |
| Medium | ≥ `768 px`  | tablets |
| Large | ≥ `992 px`  | desktops |
| Extra Large|  ≥ `1200 px`  | large desktop |

</div>
<br>

By using these breakpoints in combination with Bootstrap's grid, we can customize the layout of our content for different screens. 



Bootstrap Breakpoints

Creating a website from scratch can take a lot of work and require a working knowledge of HTML, CSS, and maybe some JavaScript. But with Bootstrap, the amount of work and prior knowledge is reduced. 

Bootstrap is a _framework_ of readily available code that integrates with HTML to create stylized websites that adapt the layout to users' screen sizes. This framework allows us to cut down on the time needed to style a website, simplifies the complexity of how to layout elements, works across multiple browsers, and reduces the frustration of using plain CSS. All it takes to use Bootstrap is a few additional lines in our HTML document. 

In this lesson, we'll be working with Bootstrap 4. To incorporate Bootstrap into a project, we have to include two `<meta>` tags and the Bootstrap CSS library. In the example below, Bootstrap is linked via Content Delivery Network (CDN) in the `<head>` element, like so:
```html
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
```

There are also some optional JavaScript libraries if we want to add some interactivity to our website and these are inserted at the end of our `<body>` element. Check out <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/" target="_blank" rel="noopener noreferrer">Bootstrap's Getting Started documentation</a> for more insight. We've also added the optional JavaScript links in the code editor.

If you're ready, strap on those boots and let's get started!

Getting Started with Bootstrap

We've covered containers and rows, now we have to go one level deeper and explore Bootstrap's columns. 

Columns are the immediate children of rows and store content. By default, a column will take up the entire width of its parent row. As we add more columns inside a row, the default behavior is for each column's width to be readjusted to fit in the row &mdash; each column will have the same width. At most, a row will accommodate 12 columns. Study the diagram below to see how column sizing works: 

<img src="https://content.codecademy.com/courses/learn-bootstrap-4/simple-12-grid.svg" alt="Diagram outlining Bootstrap rows of columns and the sizing of each column">

Notice the first row in the diagram has 1 column and it takes up the entire width of the row. We could say that this column takes up the width of 12 individual columns. The width of an individual column can be seen in the last row of the diagram.

To create a column, we assign an element with the `class` of `"col"`. Take a look at the provided example with a container that has a nested row which has a nested column: 

```html
<div class="container">
  <div class="row">
    <div class="col">
    </div>
  </div>
</div> 
```

Let's learn about this first hand by adding columns in our code! 


Columns

Another option we could use to set the width of a column is the content inside the column. 

If we want to use the content to set a column's width, we append `"auto"` to the `class` of the column, for example:
```html
<div class="col-auto">
  <p>This content determines the width of the parent column</p>
</div>
```

In the example above, the width of the column is determined by the text inside the `<p>` element. 

Let's see `"auto"` in action. 

