Chevron Left Icon
Learn Bootstrap 4: Grid
Lesson 1 of 2
Chevron Right Icon
  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 a 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 c…
  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…
  1. 1
    The Bootstrap framework allows us to streamline webpage layout and styling. In this lesson, we’re going to focus on using Bootstrap’s utility classes that provide additional styling and components …
  2. 2
    Bootstrap utility classes provide an element with styling and purpose. Let’s get acquainted with utility classes by styling the color of our elements. Let’s say we want to change the text color o…
  3. 3
    If we want to style and format text, we can use Bootstrap’s text utility classes . For instance, if we want our text to be bold, we could add a class of “font-weight-bold” like so: This rende…
  4. 4
    When considering the layout of a webpage, we have to think about how to position our elements. Conveniently, Bootstrap provides positioning utility classes. We can apply CSS positioning styling b…
  5. 5
    In addition to useful utility classes, Bootstrap offers a collection of components, such as a navbar, buttons, a carousel/slideshow for images, and much more! Each Bootstrap component serves a di…
  6. 6
    Another common component we see on websites are buttons. Buttons represent a clickable object that does something else in return like navigating to a different page, submitting a form, or opening a…
  7. 7
    Bootstrap also allows us to quickly add interactivity to a webpage. One way to include interactivity is to toggle the visibility of an element. To add such a feature, we need two elements and a f…
  8. 8
    Let’s combine our knowledge of collapse, buttons, and the nav component to make a responsive navbar! We often find navbars at the top of websites and we can use a navbar to quickly navigate to usef…
  9. 9
    In arenas and stadiums, there are giant screens called jumbotrons which display the main event for everyone in the crowd to see. Bootstrap also offers a jumbotron component that serves a similar …
  10. 10
    Bootstrap also has a card component that serves as a container for smaller customized content. Card components are often grouped together to display a collection of similar content in manageable …
  11. 11
    There are times that we want to showcase a group of images but not want to have our users scroll through one picture on top of another. Instead, we could fit our images into a slideshow using Boots…
  12. 12
    Go ahead and give yourself that well-deserved pat on the back, you’ve worked your way through Bootstrap utility classes and components! Remember, it is extremely important to check Bootstrap …

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