It is very common in web design layouts to horizontally center a column in a row or container. But how do you do that using Bootstrap classes? Below are some different ways you can achieve this effect.
Update: These methods work for both Bootstrap 5 and Bootstrap 4. Here is a codepen demo for just Bootstrap 5 of these horizontally centered columns options.
You can use Bootstrap offset classes to horizontally shift columns left or right. This is helpful when you want one column to have a max width but center it in a row.
This example sets the maximum width on medium breakpoints and up to be 8 columns wide. Then I added a utility class of .mx-auto that sets the margin left and right to auto centering it horizontally inside the .row container.
- Center text. Just add the class . …
- Center image. You can also center the image by adding the . …
- Center button. The same as above, just add the . …
- Center column. By using flexbox you can center the entire the column of the grid.
Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. First flex item Second flex item Third flex item
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default). Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around. Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default). Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly. Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Option 3 – Bootstrap Width Utility
In this example, I am using Bootstrap’s width utility class of .w-50 to make the div 50% wide all the time. Then I added a utility class of .mx-auto that sets the margin left and right to auto centering it horizontally inside the .row container.
FAQ
How do I center a horizontal in Bootstrap?
mx-auto can be used to center columns ( . col- ) inside row. justify-content-center to center columns ( col-* ) inside row.
How do I center align a row in Bootstrap 4?
One way to vertically center is to use my-auto . This will center the element within it’s flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
How do I center align a element in Bootstrap?
How do you horizontally and vertically center a div in Bootstrap 5?
