Displaying 3 Images In A Row With Text Underneath In Bootstrap

I am trying to display 3 images in a row with a title, some text underneath the title and a button. I have tried doing this in bootstrap only to get the text moving all over the pl

Solution 1:

You will need to add grids to your rows. This should work

 <section class="part2">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                <img alt="" class="resize-image center-block" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg" /> 
                <p class="text-center">Teach</p></div>
                <div class="col-md-4"><img alt="" class="resize-image center-block" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
                <p class="text-center">Read</p></div>
                 <div class="col-md-4"><img alt="" class="resize-image center-block" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
                <p class="text-center">Play</p></div>
            </div>
        </div>
</section>

Solution 2:

Please use this example. You need to use bootstrap grid classes like "col-md-x" where x is number from 1 to 12.

<section class="part2">
    <div class="container">
        <div class="row">
        <div class="col-md-4 text-center">
            <img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
            <p>Read</p>
        </div>
        <div class="col-md-4 text-center">
            <img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg"> 
            <p>Teach</p>
        </div>
        <div class="col-md-4 text-center">
             <img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
            <p>Play</p>
        </div>
    </div>