Bootstrap Center (Horizontal Align)

Bootstrap is one of the most popular front-end frameworks used by over 19% of the websites globally. Its widespread adoption is due to the responsive grid system and CSS utilities that help fast track development. Centering elements quickly is one such common need for most web projects.

Importance of Horizontal Centering in Web Design

Visually balanced layouts are pleasing to users and centered content allows creating symmetry easily. Horizonally centered elements also focus the user‘s attention and lead the visual hierarchy. It improves message clarity by placing emphasis on the primary CTA or content.

As per web design statistics, over 72% of high converting websites have horizotally centered page layouts. Bootstrap‘s responsive grid system combined with the flexbox centering classes allow accomplishing it without hassles across device sizes.

How Bootstrap Grid System Helps in Centering

The Bootstrap grid comprises of 12 virtual columns spanning the width of a .container. By default, the .container class centers contents with horizontal auto margins.

Using row and column width classes, this grid can be split into multiple combinations to build web page layouts rapidly. This forms the base for responsively centering elements in Bootstrap.

Here is an example of a simple two column layout created using the grid:

<div class="container">

<div class="row">

<div class="col">
   Column One
</div>

<div class="col">
   Column Two 
</div>

</div>

</div>

The grid columns adjust seamlessly on mobile and tablet views making content responsively centered without extra effort.

Now let‘s explore various techniques to align elements like text, images, columns etc. horizontally to the center.

How to Center Align Text Horizontally

The easiest way to center text is by using the .text-center utility class:

<div class="container text-center">
 <p>This text aligns center</p>
</div>

It applies text-align:center to block elements like <div>, <section> etc. This works for aligning paragraphs, headings, lists etc. inline content.

Other text alignment classes like .text-end and .text-start can be used for right or left alignment respectively.

How to Center Align a Column

Since Bootstrap grid is flexbox based, columns can also be centered effortlessly using margin auto or flexbox properties.

Auto Margins Centering

Using .mx-auto on a sized column centers it by applying horizontal margins as auto.

<div class="container">
<div class="row">

<div class="col-md-6 mx-auto">
  Centered Column
</div>

</div>  
</div>

Flexbox Centering

Adding the .justify-content-center class to the parent row centers columns using flexbox properties.

<div class="container">
<div class="row justify-content-center">

<div class="col-md-6">
 Centered Column
</div>

</div>
</div>

The flexbox approach helps centering columns irrespctive of their widths.

How to Center Images and Other HTML Elements

To center non-text elements like images, cards, other custom components, the same flexbox properties can be utilized.

The .d-flex class configures an element as a flex container. And .justify-content-center centers contents horizontally.

Center Image in Column

<div class="row justify-content-center">
<div class="col-md-8">
   <div class="d-flex justify-content-center">
      <img src="image.png"> 
   </div>
</div>
</div>

Center Card Component

<div class="d-flex justify-content-center">
 <div class="card" style="width: 18rem;">
  ...
 </div>
</div>

This helps centering any component or element easily without worrying about dimensions.

Vertical Alignment Along with Horizontal Centering

Often content needs to be aligned vertically too when aligning them horizontally.

Flexbox properties help achieve that as well in conjunction with horizontal centering.

Center Column Contents Vertically

<div class="row justify-content-center align-items-center h-100">
 <div class="col-6">
    This content aligns vertically centered
 </div>  
</div>

Center Card Block Vertically

<div class="d-flex flex-column justify-content-center align-items-center" style="height: 300px;">

<div class="card" style="width: 18rem;">
  <div class="card-body">
     This card content aligns vertically centered
  </div>
</div>

</div>

This shows vertically centering cards, columns or any other components is also straightforward.

Horizontal Scrollable Centered Content

For horizontal scroller based content like multiple images, icon lists, etc. displaying them centered gives better UI.

Center Content Wrap

The .justify-content-center and .flex-nowrap classes can create such scrollable centered content wraps.

<div class="d-flex justify-content-center flex-nowrap">
  <img src="img1.png">

  <img src="img2.png">

  ...More images

</div>  

Center Icon List

Icons, buttons when placed in hoizontal groups can also utilize the same for centered alignment.

<div class="d-flex justify-content-center flex-wrap">

 <button class="btn">
   <i class="fa fa-icon"></i> 
 </button>

 ...More icons

</div>

This shows creating such scrollable centered UI elements is also possible using in-built flexbox utilities itself without custom CSS.

Creating Full Page Width Centered Layout

In some cases, you may need to center content spanning across full browser width.

Full Width Row

A start is to use .gx-0 to allow row to take up full viewport width.

<div class="row gx-0">
...
</div>  

Center Full Width Column

This can be combined with centering classes to create interesting full screen layouts.

<div class="row gx-0 justify-content-center">

 <div class="col-10">
   This column takes up full width
 </div>

</div>

Parallax Centered Sections

These centered full width column concepts can be reused for parallax type sections with backgrounds as well.

Right, Left and Center Multi-Column Alignment

The flexbox justify-content property can also help create some nifty three column layouts with varied alignments.

Center Left Right Column

<div class="container">

<div class="d-flex justify-content-between">

 <div class="col">
  First centered column 
 </div>

 <div class="col">
  Left aligned second column
 </div>

 <div class="col">
  Right aligned third column 
 </div>

</div>

</div>

The .justify-content-between class handles such three column layouts automatically.

Vertically Align Different Height Elements

When working with columns or flex containers having elements of varying heights, align-items: center may not work as expected.

In such cases, adding align-self: center to individual elements centers them vertically irrespective of their heights.

Auto Margins Vertical Alignment

<div class="container mt-5">

<div class="row justify-content-center">

<div class="col-6">
  <img src="..." class="mx-auto d-block">
</div>

<div class="col-4 align-self-center">
  <p>...">
</div>

</div>

</div>

So .align-self-center also comes handy along with the other utilities.

Common Use Cases of Horizontal Centering

Some typical examples of using these centering techniques are:

Center Logo

Use a flex container to center logos andwordmarks in header or hero sections.

Center Footer Contents

Helper classes can align contact details, social icons etc. in footers as well.

<footer class="bg-dark p-3 d-flex justify-content-center">

  <div class="text-light">
   © Copyright 
  </div>

  <div class="ms-3 d-flex">
    <i class="fab fa-facebook text-light fa-lg m-2"></i>
    <i class="fab fa-twitter text-light fa-lg m-2"></i>
  </div>

</footer>

Hero Section Content

landing page headers with taglines or Catchy headings often use centered alignment.

<header class="d-flex justify-content mb-4 flex-column align-items-center">



 <p>Learn Linux</p>

</header>

Recommendations for Horizontal Centering

When working with horizontal centering, following best practices are advised:

• Use .text-center for small inline text alignment
• For complex components prefer flexbox centering
• Don‘t center align excessively long texts
• Ensure vital page elements don‘t get obstructed
  on mobile views when centered
• Use no-wrap or fixed widths to prevent overflowing
• Consider reducing font sizes for widened centered paras
• Utilize margin auto centering only for grid columns
• Use breakpoint specific column sizes for alternate alignments per device

Browser Compatibility and Centering Fallbacks

Flexbox centering works on all modern browsers supporting CSS3 flexbox layout. This includes latest versions of Chrome, Firefox, Edge, Safari etc.

For legacy IE 10 and 11 browsers lacking flexbox support, conditional IE specific styling needs to be written using floats.

.legacy-center {
   display: -ms-flexbox;
   -ms-flex-pack: center;
}

.ie-center { 
  margin: 0 auto;
  text-align: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

 .legacy-center {
    display: block;  
 }

 .ie-center {
   display: block;  
 }

}

This ensures horizontal centering works across modern and old IE browsers alike.

Conclusion

Horizontal centering can be easily achieved in Bootstrap leveraging its grid system and flexbox capabilities. The margin auto and flex alignment classes allow centering all types of elements conveniently.

Used wisely, centered page sections can draw user‘s attention to primary content effectively. By following coding best practices mentioned, robust layouts that degrade gracefully can be built rapidly. This was an in-depth expert guide on centering elements in Bootstrap framework.