Bootstrap col-sm-6 icons alignment

Question

At the viewport of col-sm-6 icons go de-align as shown in the picture tried using clearfix but not working live link of website is 38.117.223.31/emrmus.asp

<div class="container">
        <div class="row icons">
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-1.png">
                <div class=" right-icons" >Patient <br> portal</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-2.png">
                <div class=" right-icons" >e-Labs,  <br> Online Payments</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-3.png">
                <div class=" right-icons">Patient <br> Support</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-4.png">
                <div class=" right-icons" >E-prescription</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-5.png">
                <div class=" right-icons" >Document <br> Imaging</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-6.png">
                <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div>

            </div>

        </div>

    </div>

Answer 1

Aparently, the problem is in the height of each col-sm-6, you can set the height directly in style properties, or you make a class and configure in your css file, if you see, I add min-height: 170px; to each div with col-sm-6 class and this fix it.

<div class="container">
        <div class="row icons">
            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <img class="mt-10" src="emrmus/images/circle-h-1.png">
                <div class=" right-icons" >Patient <br> portal</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <img class="mt-10" src="emrmus/images/circle-h-2.png">
                <div class=" right-icons" >e-Labs,  <br> Online Payments</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <img class="mt-10" src="emrmus/images/circle-h-3.png">
                <div class=" right-icons">Patient <br> Support</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <img class="mt-10" src="emrmus/images/circle-h-4.png">
                <div class=" right-icons" >E-prescription</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <img class="mt-10" src="emrmus/images/circle-h-5.png">
                <div class=" right-icons" >Document <br> Imaging</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <img class="mt-10" src="emrmus/images/circle-h-6.png">
                <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div>

            </div>

        </div>

    </div>

Answer 2

Using a clearfix does work, at least with the example you posted:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
        <div class="row icons">
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-1.png">
                <div class=" right-icons" >Patient <br> portal</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-2.png">
                <div class=" right-icons" >e-Labs,  <br> Online Payments</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-3.png">
                <div class=" right-icons">Patient <br> Support</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-4.png">
                <div class=" right-icons" >E-prescription</div>
            </div>
            
            <div class="clearfix visible-sm"></div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-5.png">
                <div class=" right-icons" >Document <br> Imaging</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-6.png">
                <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div>

            </div>

        </div>

    </div>

Answer 3

To solve the problem, add a clear:left; to the odd elements.

@media (max-width: 991px) {
    .row.icons .col-sm-6:nth-child(odd) {
        clear: left;
    }
}

Basically what is happening is this that the float is not working when the first element in the row is taller than the second element in the row.