Breakpoints and the Bootstrap Grid System

Lucas Minter
InstructorLucas Minter
Share this video with your friends

Social Share Links

Send Tweet
Published a month ago
Updated a week ago

Before we get into the code, there are two pivotal concepts you need to be aware of:

  • breakpoints
  • containers

Breakpoints determine the sizing, ordering, and responsiveness of your elements. You’ll base your element sizes on these pre-determined pixel dimensions that Bootstrap has set.

Container is the fundamental building block of Bootstrap. It will set a max width as well as make everything inside of it responsive and add a padding to the content while setting up a grid layout for you to build out.

[00:00] There are two concepts that you need to know before getting into writing code in the next lesson. The first is Bootstrap's breakpoints and the second is how to set up your HTML using containers, rows, and columns. Breakpoints are defined by the class infixes in the center of this graph. These determine the sizing, ordering, and [00:20] responsiveness of your elements. You'll base your element sizes on these pixel dimensions listed on the right side of the graph. Moving on to containers, rows, and columns, a container is required if you are wanting to use the default grid system, which I'll be using in this course. Container is the fundamental building block of [00:40] Bootstrap. It will set a max width as well as make everything inside of it responsive and add a padding to the content. The grid system is comprised of rows and columns. Rows serve as a wrapper around the columns, and there are 12 columns per row. These columns are how we can customize [01:00] the sizes of our elements. We'll be able to determine the width of our elements by specifying the amount of columns we want the element to span. We could even change how many columns we want elements to span depending on the screen size. This is done by specifying the amount of columns and the screen size that the element should change on. For this, it's [01:20] important to note that Bootstrap focuses on mobile first development. In the second block of code, you can see that I have a column dash 12 and column dash medium dash 3. This means that the element will always span 12 columns until the window hits the medium or greater screen size. [01:39] Once that happens, it'll only span 3 columns.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today