Text below images per line using bootstrap

Question

There are 5 images in a line and text below each image that is responsive. But when coding in bootstrap, images overlap when the window is resized.

how can we align 5 images horizontally in a row, each of which has text below.

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

Answer 1

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

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

Excerpt

<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>

Run codeHide result

Preview: