Layout in Bootstrap

Bootstrap comes with several components and options for laying out your project. 0:00 There's the responsive container, the grid system, 0:05 media object, and utilities. 0:11 In the previous section, we used a container to wrap the content in our page. 0:14 Containers are the most basic layout component in Bootstrap. 0:18 Not only do they provide a foundation for 0:22 page layout, they're required when using the grid system. 0:24 As you'll soon learn, you can set a responsive fixed width container or 0:27 a fluid container. 0:31 And Bootstrap is developed to be mobile first. 0:33 So that means it serves the basic layout styles and 0:36 the minimal amount of code to style a page for a small mobile device first. 0:38 Then with media queries, it creates breakpoints which adjust the layout for 0:43 wider screens and devices. 0:47 So in its mobile first approach, Bootstrap uses five tiers of responsive breakpoints. 0:49 The default range is for layout in portrait phones, or extra small devices. 0:54 Then theres a media query range for 1:00 landscape phones, tablets, desktops, and large desktops. 1:02 So we have a lot of flexibility with building layouts. 1:06 Throughout the course, I'll refer to these media query breakpoints using the same 1:09 terms used in the Bootstrap docks. 1:13 Like the extra small, small, 1:15 medium, large, and extra large media query ranges, or breakpoints. 1:17 And Bootstrap uses the pixel unit in its media queries. 1:22 The extra small range is any view port or device with less than 576 pixels. 1:26 Then the small range is 576 pixels and up. 1:33 The medium range is 768 pixels and up. 1:38 Then we have the large range at 992 pixels and up, and 1:41 the extra large range at 1200 pixels and up. 1:46 So now that you're more familiar with the nuts and bolts of Bootstrap's grid system, 1:50 let's begin building the site. 1:54 Coming up next we'll start by creating a basic 1:56 grid layout using Bootstrap's grid system. 1:59