Let’s begin laying out our page using Bootstrap's grid system.

To follow along using Workspaces.

Launch the Workspace with this video or

download the project files to use your preferred text editor.

In the Workspace I have a starter template setup in index.html,

along with an images folder containing the images we'll use in the site.

The template uses Bootstrap's CDN links, so it links to Bootstrap's CSS at the top.

And all Bootstrap plugins use jQuery, and a JavaScript library called Popper.js.

So the latest version of jQuery, Popper.js, and

Bootstrap's JavaScript file, are linked at the bottom of the document,

just before the end body tag, for performance purposes.

You can learn more about jQuery and

Popper.js in the teachers notes with this video.

So Bootstrap's mobile-first flexbox grid,

let's you build layouts of all shapes and sizes using a 12 column system.

And there are three major components in Bootstrap's grid system.

Containers, rows and columns.

You can see an example of how these three components work together

to form the grid system here in the grid page.

For example, in the auto-layout columns demo, you can see that the container

centers your site's contents, and helps align your grid content.

Inside the container you add rows.

And rows are the horizontal groups of columns.

They ensure your columns line up properly.

Inside a row, you add columns.

Columns are immediate children of rows and they contain your content.

So any content in your grid should be placed within a column.

Rows can contain anywhere from 1 to 12 columns per row.

And the classes you assign each column,

specifies the width or the number of columns to expand.

The class can be a specific number of columns or

you can set columns to automatically layout with equal widths.

You'll learn more about column classes soon.

To start, let's create a simple grid layout for the,

About section of our website.

To add the grid to my page, I'll copy this equal width snippet from the docs

by clicking copy and pasting it into the body of my HTML.

I can adjust the code indentation in Workspaces, by selecting the content and

pressing Cmd or Ctrl followed by the closing square bracket key.

So I need one row and three columns to lay out the about content, so

I'll delete the extra row and add a third column inside my row here.

So I'll copy the second column and paste the new one below.

I'm also going to add a comment above the row, to indicate where the code for

the about content starts.

In Workspaces and in most text editors, you can press Cmd or Ctrl,

followed by the forward slash key, to create an HTML comment.

So this comment will say, about.

Then I'll add two other comments after the row and

containers closing tags to indicate where they end.

So first we'll indicate where the about content ends and

right below we'll indicate where the container div ends.

We're going to be adding a lot of HTML to this page.

And with so much code in this file, it can be

difficult to determine where containers, rows, and columns start and stop.

So, you should get in the habit of adding code comments to identify

the components in a page.

So the predefined col classes, applied to the column div tags,

create three equal width columns and

extra small, small medium large and extra large break points.

The columns are layed out side by side and centered in the page via other container.

So now let's replace this example text with the about content for

the first conf website.

And you can copy these exact snippets from the teachers notes of this video or

from the final version of the project files.

So in the column, I'll add the, About Full Stack Conf content.

Then in the second column, the content about the expert speakers.

And then in the third column,

I'll paste in the content containing the topics you will learn.

So the container we used in both the coming soon landing page and

here in our grid, is a responsive fixed width container.

A fixed width container, is centered and

it's width changes at each break point range.

So it resizes to the new width set for that break point.

But the container can also be fluid meaning,

it can be 100% wide at all times with the class container dash fluid.

The container now spans the full width of the view port so

it's no longer fixed and center in the page.

Notice how the content fluidity adjusts to the size of the view port instead

of shifting to a new fixed width, as I reach a given break point range.

When a Bootstrap container is fluid, there´s no max width set on the container,

like there is when it´s a fixed width container.

So that means your content will keep expanding to the width of the view port,

no matter how wide it gets.

And this can make your content difficult to read in extra-large devices,

like wide desktop screens.

So I'm gonna stick with the responsive fixed with container for

my website, with the class container, because I like how it keeps my content

neatly centered while still applying a max width at each break point.

Keep in mind that containers are always required when using the Bootstrap grade.

But if you're creating a page without the grid system, you can still use containers

to make your content fluid or responsive and centered in the page.