Learn Bootstrap 4: Grid
Lesson 1 of 2
  1. 1
    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…
  2. 2
    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, _…
  3. 3
    Bootstrap uses a grid system based on CSS Flexbox 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 lea…
  4. 4
    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 …
  5. 5
    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…
  6. 6
    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 widt…
  7. 7
    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 …
  8. 8
    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 sc…
  9. 9
    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 …
  10. 10
    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…
  11. 11
    Great job navigating through Bootstrap’s grid! Let’s review some key concepts: * When in doubt, check Bootstrap’s documentation . * There are a few required links to use Bootstrap (the CSS fil…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo