Grid System and Breakpoints Tutorial

Jeppe Schaumburg Jensen
A free video tutorial from Jeppe Schaumburg Jensen
Front-end developer, interaction designer and musician
4.2 instructor rating • 10 courses • 24,880 students

Lecture description

In this lecture we'll learn how to use the grid system and breakpoints to make responsive and fluid layouts.

Learn more from the full course

Master Bootstrap 4 (4.3.1) and code 7 projects with 25 pages

Master the latest version of Bootstrap 4 and create real projects and themes while learning HTML, web design and coding

22:32:56 of on-demand video • Updated March 2019

  • Learn how to create and use all components and utilities of the Bootstrap 4 framework
  • Learn how to create seven different responsive websites using the Bootstrap 4 framework
  • Practice with 5 quizzes, 70 coding exercises and a special built Bootstrap 4 Learning Kit (100+ source files)
  • Master the latest version: Bootstrap 4.3.1 (from February 2019)
  • How to create fluid and responsive layouts
  • How to use breakpoints and the grid system
  • How to structure all kinds of content
  • How to build all of the 24 components
  • How to use all of the 19 utilities
  • How to build 14 different web page templates
  • Project 1: Create a landing page
  • Project 2: Create an online forum
  • Project 3: Create a blog
  • Project 4: Create a knowledge base
  • Project 5: Create a resume and CV page
  • Project 6: Create a small business website
  • Project 7: Create a survey
  • How to customize the default styling
  • Advanced Bootstrap 4: How to use JavaScript triggers, options, methods and events
  • How to use Google Fonts
  • How to add icons with Font Awesome 4
  • How to add icons with Font Awesome 5
  • Accessibility best practices
English Get system and break points in this next year we'll learn about breakpoints and how to use the grid system the breakpoints cover a handful of different device sizes. And I meant to be used for mobile first web development bootstrap is developed with the mobile first web design philosophy in mind. This means that the lay out first take into account extra small devices like smartphones and then scale up the elements to larger devices like tablets laptops and just apps as needed. Bootstrap is designed to accommodate five different device sizes where the initial size is for extra small devices like smartphones when we need to adjust our way out to larger devices we can use for different break points for smaller devices medium devises less devices and extra allots devices the five different devices have the following prefixes which we will see used throughout many of the components and utilities later in this course. Access for extra small S.M. for small empty for medium Elgie for lauch and Excel for extra large. The great is wrapped in a container which we just learned about in the previous lecture. Inside this we have rows which are made up of songs of groups of canons. Content is placed inside Cullens and only columns may be immediate children of rows. There are 12 columns available in the grate which means that the width of a column can be equal to one or more of these 12 columns. The five great tires are based on minimum with meaning that they apply to the specified device size and or larger sizes. Cullom classes with device prefixes and numbers indicate the break point and the width of the column. These features plus other features of the grid will be much easier to understand. Doing the following examples grid system we can make responsive grid using different classes and we can make it look just like we want to. Here we see examples of the grid system being used. We will go through all of these. In the code it is so you can resize the browser window to see how these works across different device sizes. Also remember that you can go into the practice section and your own code to add different classes to learn how to use this. All right. First we see that we have some custom styling in the c section which is used to make it easy to see how these classes works. I would just minimize this. First we'll create our container Dave with the classic container inside this row which is a Dave check with the class row. When I create columns would equal with by using unit. This. Classes for all specific break points. So will create a div to the class call. Copy this twice. No just copy the row and copy one of those come to you. Now we can see that we have equal with columns that will scale along with the browser window arised to give a column a set with a number from 1 to 12 to the class. We can mix columns would equal with in columns with set with. For example you can call 7 to second column or call 3 to the first column. You will see that these will then seven out of 12 columns here and three out of 12 columns you across all sizes to get a column and match your own with that fits its current And we use the class call out so we can mix columns would equal with columns which set with columns with order with. Let's change this class to call order. Now we can see that our second column in the second row only has the with according to the content inside the column to the left still pre-service three out of 12 with and the column to the right has the width that's been left. If I want equal with columns to span multiple rows we can divide them by inserting a Dave. Check with the class w Dasch hundred. So I would just move this and this and create 6 of these. If we want the road change to happen here will insert this into it. Dave tak w dush hundred US. Which will give it that with 100 percent. And act as a divider if we want the same grade across all devices. We will simply use the prefix call and call dash without any device prefixes in our next exchange but we will create a row with full equal with columns and the row with three columns where the first spans half of the available with the last two each spends a quarter of the available with. So first row with 4 equal with columns then row three columns and the first one and spend half of the available with and the last two will spend a quarter of your available with. This will work across all device sizes as long as the content fits inside we will now create an advanced squit that changes lay out across different device sizes. To do this we use the devise prefixes you won our first two columns in the first row to have four with initially by using a called 12 class. So no device prefixes for medium sizes will change it to half of the available with by using the class call M.D 6. And for large sizes and larger we will change it to a quarter of the available with use in the class call LG 3 for our last two columns in the same room. We'll make inspan half of the available with initialing. So that is done with B-class call 6. And for larger devices up will change this to a quarter of the available with by using the class call LG 3 for all three columns in the second row. We'll make them spend half of the available with initially and then change that to a third of the available with for small devices. And that you use every class call is in full. So now when we look code at our example we can see the changes happening when we resize the browser window we can set the vertical alignment and rows using Fluxbox utility's to align the columns to the top of the row. We at a class line item start with the row to align the columns to the center of the row at the class line item center to the row to align the columns to the bottom of the row. We were at the class line items and the row you see the result having instantly in the preview we can also set the vertical alignment on specific columns using Fluxbox utility's to do this first. The two of these two and then per class Exxon-Mobile line self so we can see this in action now to align a column to the top of a row throughout the class line. So for stuff to cut them to align the column to the center of a row or upper class a line of center to a line of control the bottom row class align itself and we see the result happening instantly in our preview. We can set the horizontal alignment rows where the columns don't explain all of the available with create five rows with 3 columns that each span one quarter of the available. All right. To align the columns to the start we were at class just over point and start to align the columns to the center of the class to justify and center to a line comes to the end of the class justify content and to justify the columns which space around them will at the class justify content around to justify the columns which space between them will at the class justify content. But now we can see these different kinds of alignment in our preview if we want to have a movie that got us between columns. We can at the class know guide us. Let's just do this for our last row here. Now we will see an example of how we can reorder all columns in the row just remove some of our code here. All right. We'll let the class or the 12 draw first call column to make it appear last at the class or order one to. Going to make it appear first. And we won't add any classes to our last come to make it appear out of order which means it will appear first. We can now see that this is our first column that's actually appearing as the last one. There's a second column. That's before the other one. This is the last column that's on order. Which means it appears the first one we can all set a column any number of columns we want and control it across the different devices as in our example we offset our second column in the first row two columns for medium Devizes and larger. So first we have a column spanning five columns and medium Devizes large you have another column the same size. And this second column will offset that one with two columns using the glass of said Empty Chu. So what this means is that for small devices those are just regular columns stacking on top of each other for medium devices and we will see the with five columns being applied and the offset of two columns. For our second column which creates this in our next room we will all set both columns three columns for lots Tobias's and up. We just create a row here. And then for large devices will offset this three columns and this one will also said that three columns now we can see that those are stacked. But for a lot of devices we'll see both of them being offset three columns and the first one having the size of four columns. And the second one having the size of two columns would just create one more symbol create a row and then we'll offset the column six columns for small devices and larger by using the glass offset and 6 so we can see that initially it has a four way. But for small devices it will have the width of six columns and being offset six columns as well. All right we can also set our columns using auto margins. So in our first row let's use the marking left auto We can see that it's now being pushed to the right by this auto value. On the left margin and we will also exchange these offset classes with margin left. Auto for medium devices and up we will see that those are being pushed as well. Finally we will replace this class with ammo LG or Emel it's an auto so you can use both approaches. Finally let's see an example of how we can nest Gretz. Here we see two simple Gritz. We will take the row from our second grade cut it and just leave this container class and then we'll paste it in inside of our first column in the first grade. Well just as time line breaks pasted in right here now we can see that we have a grid inside another grid. This will still act responsibly.