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

<sectionclass="part2"><divclass="container"><divclass="row"><divclass="col-md-4"><imgalt=""class="resize-image center-block"id="image1"src="/wp-content/themes/creativeforces/images/kid2.jpg" /><pclass="text-center">Teach</p></div><divclass="col-md-4"><imgalt=""class="resize-image center-block"id="image2"src="/wp-content/themes/creativeforces/images/kid2.jpg" /><pclass="text-center">Read</p></div><divclass="col-md-4"><imgalt=""class="resize-image center-block"id="image3"src="/wp-content/themes/creativeforces/images/kid2.jpg" /><pclass="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.

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