Centering odd number of columns in a div

[KathleenODell]

I've searched and tested over and over but nothing really works. I'm trying to center five columns inside a div. Basically, I've got a row of icons with names under each icon that I need to center. If it were 2, 3, 4, or 6 columns I wouldn't be having this issue. But with 5 it shifts all the way to the left and I can't seem to get them to center.

This is a generic html to try and display what I'm talking about. I'm trying to center the sm-2 columns in .CenterIcons. Any help or suggestions would be greatly appreciated.

<div class="container-fluid">

    <div class="row">

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

    </div>

    <div class="row CenterIcons">

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>Icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

    </div>

  </div>

[Nancy OShea · Accepted solution]

Try this:

<div class="container-fluid">

<div class="row CenterIcons text-center">

<div class="col-xl-1"></div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>Icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-1"></div>

</div>

</div>

[KathleenODell]

So that working in my blank test file, but when I try to implement it into the actual page everything moves into a straight vertical line and all the way to the left. This is my actual working code (at least a portion of it). The section in bold is what I'm trying to center.

<div id="threatStat">

<div class="well-lg">This is the content inside a normal well. Use class "well-lg" or "well-sm" for large and small well, respectively.</div>

</div>

<div class="container-fluid" id="homeBodyContent">

    <h1>Draw On Our Extensive Expertise</h1>

    <div class="row text-center" id="homeIcons">

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

    </div>

  <div class="row">

  <div class="col-lg-6"></div>

  <div class="col-lg-6"></div>

  </div>

<!--Carousel-->  

  <div class="row">

  <div class="col-lg-6">

    <div id="carousel1" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">

        <li data-target="#carousel1" data-slide-to="0" class="active"></li>

        <li data-target="#carousel1" data-slide-to="1"></li>

        <li data-target="#carousel1" data-slide-to="2"></li>

          </ol>

      <div class="carousel-inner" role="listbox">

        <div class="item active"><img src="Images/Carousel_Placeholder.png" alt="First slide image" class="center-block">

          <div class="carousel-caption">

            <h3>First slide Heading</h3>

            <p>First slide Caption</p>

              </div>

            </div>

        <div class="item"><img src="Images/Carousel_Placeholder.png" alt="Second slide image" class="center-block">

          <div class="carousel-caption">

            <h3>Second slide Heading</h3>

            <p>Second slide Caption</p>

              </div>

            </div>

        <div class="item"><img src="Images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">

          <div class="carousel-caption">

            <h3>Third slide Heading</h3>

            <p>Third slide Caption</p>

              </div>

            </div>

          </div>

      <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

      </div>

  <div class="col-lg-6">

  </div>

  </div>

</div>

[Jon Fritz]

Check your code for errors under File > Validate > Validate Current Document (W3C) or go to http://validator.w3.org/nu to get a listing.

HTML code issues will break css layout pretty badly.

[KathleenODell]

The only error in my code was a warning that stated: "The type attribute is unnecessary for JavaScript resources."

[Nancy OShea]

Are you using Bootstrap 4 (the latest) or Bootstrap 3? 

[KathleenODell]

In this particular file it's bootstrap 3. However, I was able to get the code to work when I altered your suggested code just a bit. When I changed the col size to sm or xs they lined up correctly. Yay!

[osgood_]

or cut out the hacking and use of extra redundant code and use flexbox.

[Nancy OShea]

Or use Bootstrap Offset classes.

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes