How to center div bootstrap
How to center div bootstrap
How To Center a div Horizontally in Bootstrap 4 & 5
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.
Option 1 – Bootstrap Offset
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.
Option 2 – Margin Auto
Option 3 – Bootstrap Width Utility
Option 4 – Use Flexbox Classes
If you have multiple items you want to center you could try using a combination of flexbox classes. Here is a flexbox cheat sheet showing how they work.
Conclusion
As in most cases in web development, there is more than one way to achieve the same result. Choosing the right approach for your project depends on what you think is easiest to remember and maintain. Personally, I like Option 1 because it allows you to horizontally center the column on large screens and then go full width on mobile.
Originally published on August 14th, 2019, updated on July 23rd, 2022
Want to Get Email Updates of New Posts? Join My Email Newsletter
Create or Improve Your Business Website
Home / Blog / How To Center a div Horizontally in Bootstrap 4 & 5
Web Design Templates & Themes
Free Digital Marketing Resources
Free Digital Marketing Guides
I Help Marketers & Designers Improve or Create Their Websites Without Having to Wait for IT. I Do This by Equipping Them with HubSpot Website Design Templates, Training, and Encouragement.
Overview
Get the lowdown on the key pieces of Bootstrap’s infrastructure, including our approach to better, faster, stronger web development.
HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
Mobile first
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don’t recommend this on every site, so use caution!
Typography and links
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
Normalize.css
For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Introduction
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:
Look to the examples for applying these principles to your code.
Media queries
We use the following media queries in our Less files to create the key breakpoints in our grid system.
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
97px