Learn Bootstrap 4: Grid
Lesson 1 of 2
  1. 1
    Getting Started with Bootstrap
    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…
    Start
  2. 2
    Intro to the Grid
    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, _…
    Start
  3. 3
    Bootstrap Containers
    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…
    Start
  4. 4
    Rows
    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 …
    Start
  5. 5
    Columns
    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…
    Start
  6. 6
    Setting Column Widths
    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…
    Start
  7. 7
    Setting Column Width with Content
    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 …
    Start
  8. 8
    Bootstrap Breakpoints
    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…
    Start
  9. 9
    Breakpoint Naming Convention
    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 …
    Start
  10. 10
    Combining Bootstrap Classes
    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…
    Start
  11. 11
    Bootstrap 4 Grid Review
    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…
    Start

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