From the course: Bootstrap 4 Essential Training

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Grid alignment options

Grid alignment options - Bootstrap Tutorial

From the course: Bootstrap 4 Essential Training

Start my 1-month free trial

Grid alignment options

“

- [Instructor] Because Bootstrap uses Flexbox to control layouts, there are many new classes to handle how elements align into one another as well as their containers. So, let's take a look. Now, first off, is vertical alignment. To align columns in the grid, there's a few classes that you can add to the rows. Now, these classes begin with align-items and then an alignment keyword, which can be either start, center, or end. Now, if you choose start, the alignment of course of the columns will be at the beginning, center puts the alignment of elements in the middle, and end of course puts them at the end. However, sometimes to get the desired effect you may need to nest the columns. So, we'll take a look at this in a minute. Next up is individual alignment of the columns. You put this keyword within the columns themselves, not in the row like with the previous vertical alignment classes. They look like this, you add align-self and then an alignment keyword, and then you can ask each…

Contents