How to Center Your Icons in Bootstrap’s col-lg-3 with Flexbox and CSS

Struggling to center icons in Bootstrap's `col-lg-3` layout? Discover simple solutions to make sure your images and content are perfectly centered using Flexbox and CSS.
---
This video is based on the question https://stackoverflow.com/q/67469517/ asked by the user 'JamesArthur' ( https://stackoverflow.com/u/12913047/ ) and on the answer https://stackoverflow.com/a/67469681/ provided by the user 'Rok Benko' ( https://stackoverflow.com/u/10347145/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Align-self not centering on col-lg-3

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Center Your Icons in Bootstrap's col-lg-3 with Flexbox and CSS

In web design, aesthetics and functionality go hand in hand. When building responsive layouts with Bootstrap, many developers encounter issues with centering elements within their columns. If you've ever found yourself frustrated while trying to center an icon image in a col-lg-3 section, you're not alone. In this guide, we'll walk through the steps to effectively center your icons and other content using Flexbox within Bootstrap's grid system.

Problem: Icons Not Centering in a Bootstrap Column

Here’s a real-world scenario: You’re working with a Bootstrap grid and trying to center images in a col-lg-3 column. You're using Flexbox to achieve this, but something's off, and the icons just won't align correctly in the center. The code snippet below captures this situation.

[[See Video to Reveal this Text or Code Snippet]]

Solution: Using CSS and Flexbox for Centering

The goal is to ensure that your icons are centered both horizontally and vertically in their respective columns. To achieve this, we can modify the CSS and HTML as follows:

Step 1: Update the HTML

To center the content within each column, you can simply add the text-center class provided by Bootstrap to each column. This will center align your text and images. Here's how you do it:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Adjusting CSS for Flexbox

Now, let's enhance your existing CSS to leverage Flexbox properly. Here's an optimized version of your SASS styles for centering:

[[See Video to Reveal this Text or Code Snippet]]

Summary of Key Adjustments

Addition of text-center: The easiest way to align text and images in Bootstrap is to add the text-center class to the column.

Flexbox updates: Ensure the parent .row uses justify-content: center; and align-items: center; to achieve proper centering.

Consistent width styling: Adjust the width according to your layout; ensure consistency across similar icons.

Step 3: Centering Your Button

Make sure your buttons are also centered. Apply the text-center class to the button's container:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can ensure that your icons and content are perfectly centered within the Bootstrap grid system using Flexbox and CSS. This approach not only resolves alignment issues but also enhances the overall user experience of your website. So next time you're grappling with alignment woes, remember these simple changes, and your layout will be both functional and visually appealing!

If you found this post helpful, don't hesitate to leave a comment or ask questions below. Happy coding!