How the Bootstrap Grid Works

Let’s begin laying out our page using Bootstrap's grid system. 0:00 To follow along using Workspaces. 0:03 Launch the Workspace with this video or 0:05 download the project files to use your preferred text editor. 0:07 In the Workspace I have a starter template setup in index.html, 0:11 along with an images folder containing the images we'll use in the site. 0:15 The template uses Bootstrap's CDN links, so it links to Bootstrap's CSS at the top. 0:20 And all Bootstrap plugins use jQuery, and a JavaScript library called Popper.js. 0:25 So the latest version of jQuery, Popper.js, and 0:31 Bootstrap's JavaScript file, are linked at the bottom of the document, 0:35 just before the end body tag, for performance purposes. 0:38 You can learn more about jQuery and 0:41 Popper.js in the teachers notes with this video. 0:43 So Bootstrap's mobile-first flexbox grid, 0:46 let's you build layouts of all shapes and sizes using a 12 column system. 0:49 And there are three major components in Bootstrap's grid system. 0:54 Containers, rows and columns. 0:57 You can see an example of how these three components work together 1:00 to form the grid system here in the grid page. 1:04 For example, in the auto-layout columns demo, you can see that the container 1:07 centers your site's contents, and helps align your grid content. 1:13 Inside the container you add rows. 1:18 And rows are the horizontal groups of columns. 1:20 They ensure your columns line up properly. 1:23 Inside a row, you add columns. 1:26 Columns are immediate children of rows and they contain your content. 1:29 So any content in your grid should be placed within a column. 1:33 Rows can contain anywhere from 1 to 12 columns per row. 1:37 And the classes you assign each column, 1:41 specifies the width or the number of columns to expand. 1:45 The class can be a specific number of columns or 1:49 you can set columns to automatically layout with equal widths. 1:52 You'll learn more about column classes soon. 1:56 To start, let's create a simple grid layout for the, 1:59 About section of our website. 2:02 To add the grid to my page, I'll copy this equal width snippet from the docs 2:05 by clicking copy and pasting it into the body of my HTML. 2:09 I can adjust the code indentation in Workspaces, by selecting the content and 2:14 pressing Cmd or Ctrl followed by the closing square bracket key. 2:19 So I need one row and three columns to lay out the about content, so 2:24 I'll delete the extra row and add a third column inside my row here. 2:29 So I'll copy the second column and paste the new one below. 2:34 I'm also going to add a comment above the row, to indicate where the code for 2:39 the about content starts. 2:43 In Workspaces and in most text editors, you can press Cmd or Ctrl, 2:44 followed by the forward slash key, to create an HTML comment. 2:48 So this comment will say, about. 2:52 Then I'll add two other comments after the row and 2:55 containers closing tags to indicate where they end. 2:58 So first we'll indicate where the about content ends and 3:01 right below we'll indicate where the container div ends. 3:07 We're going to be adding a lot of HTML to this page. 3:14 And with so much code in this file, it can be 3:16 difficult to determine where containers, rows, and columns start and stop. 3:20 So, you should get in the habit of adding code comments to identify 3:25 the components in a page. 3:28 So the predefined col classes, applied to the column div tags, 3:30 create three equal width columns and 3:35 extra small, small medium large and extra large break points. 3:38 The columns are layed out side by side and centered in the page via other container. 3:42 So now let's replace this example text with the about content for 3:48 the first conf website. 3:53 And you can copy these exact snippets from the teachers notes of this video or 3:55 from the final version of the project files. 3:59 So in the column, I'll add the, About Full Stack Conf content. 4:01 Then in the second column, the content about the expert speakers. 4:07 And then in the third column, 4:13 I'll paste in the content containing the topics you will learn. 4:17 So the container we used in both the coming soon landing page and 4:21 here in our grid, is a responsive fixed width container. 4:27 A fixed width container, is centered and 4:32 it's width changes at each break point range. 4:34 So it resizes to the new width set for that break point. 4:37 But the container can also be fluid meaning, 4:41 it can be 100% wide at all times with the class container dash fluid. 4:45 The container now spans the full width of the view port so 4:53 it's no longer fixed and center in the page. 4:57 Notice how the content fluidity adjusts to the size of the view port instead 5:00 of shifting to a new fixed width, as I reach a given break point range. 5:04 When a Bootstrap container is fluid, there´s no max width set on the container, 5:10 like there is when it´s a fixed width container. 5:14 So that means your content will keep expanding to the width of the view port, 5:17 no matter how wide it gets. 5:21 And this can make your content difficult to read in extra-large devices, 5:22 like wide desktop screens. 5:26 So I'm gonna stick with the responsive fixed with container for 5:28 my website, with the class container, because I like how it keeps my content 5:32 neatly centered while still applying a max width at each break point. 5:37 Keep in mind that containers are always required when using the Bootstrap grade. 5:43 But if you're creating a page without the grid system, you can still use containers 5:49 to make your content fluid or responsive and centered in the page. 5:53