text below images in a row using bootstrap

Question

In a row there are 5 images and text below each image which is responsive.but when coded in bootstrap the images are overlapping when window is resized.

how can we align 5 images horizontally in a row with each having text below.

Here is model of images and text.Is there any way to make 5 images with text below in it responsive.

Solution

You might need to use <figure> and <figcaption>:

<figure>
  <img />
  <figcaption>Image</figcaption>
</figure>

Snippet

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row text-center">
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
  </div>
</div>

Preview: