How to put label under image in navigation bar?

Question

I have a bottom navigation bar and 4 image for each page of my website. I want now to put text under images but I can't find how to do.

I already do with span, div... and nothing work.

    .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
}

#footernavbar {
    background-color: #282064;
    height: 60px;
    width: 100%;
    bottom: 0;
    position: fixed;
    float: left;
}

.imagefooternav{
    object-fit:scale-down;
}

.icon{
    position:relative;
    width:100%;
    height:60px;
}

.icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<footer class="border-top footer text-muted">

  <div id="footernavbar">
    <div class="row">

      <div class="col-xl-4"></div>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1" asp-controller="Home" asp-action="Index">
        <div class="icon">

          <img src="~/images/homepage.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1" asp-controller="Tour" asp-action="Index">
        <div class="icon">

          <img src="~/images/calendar.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1" href="/BuildingSite/CreateToday/">
        <div class="icon">

          <img src="~/images/pen.png" />

        </div>
      </a>
      <a class="col-md-3 col-sm-3 col-3 col-xl-1" href="/User">
        <div class="icon">
          <span>
                            <img src="~/images/user.png" />
                        </span>
          <span>
                            test
                        </span>

        </div>
      </a>
      <div class="col-xl-4"></div>
    </div>
  </div>
</footer>

For the moment I got that : https://i.sstatic.net/uPWq5.png

What I want is that : https://i.sstatic.net/d3AoB.png

(For every image, for example I just do it for last image)

Answer 1

try this example, i added profileName class to your css code

https://jsfiddle.net/becher_henchiri/s9h8of1r/3/

Answer 2

Html: Just created a row that contains the image and text you need both being in 12 cols and it should work.

<footer class="border-top footer text-muted">

  <div id="footernavbar">
    <div class="row">

      <div class="col-xl-4"></div>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1 m-2" asp-controller="Home" asp-action="Index">
        <div class="icon">

          <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1 m-2" asp-controller="Tour" asp-action="Index">
        <div class="icon">

          <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />

        </div>
      </a>
      <a class=" col-md-3 col-sm-3 col-3 col-xl-1 m-2" href="/BuildingSite/CreateToday/">
        <div class="icon">

          <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />

        </div>
      </a>
      <a class="col-md-3 col-sm-3 col-3 col-xl-1 m-2" href="/User">
        <div class="icon row">
          <span class="col-12 text-center">
           <img src="https://cdn2.iconfinder.com/data/icons/blue-round-amazing-icons-1/512/home-alt-512.png" />
          </span>
          <span class="col-12 text-center">
            test
          </span>

        </div>
      </a>
      <div class="col-xl-4"></div>
    </div>
  </div>
</footer>

css:

    .footer {
  position: absolute;
  bottom:0;
  width: 100%;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
}

#footernavbar {
    background-color: #282064;
    height: 60px;
    width: 100%;
    bottom: 0;
    position: fixed;
    float: left;
}

.imagefooternav{
    object-fit:scale-down;
}

.icon{
    position:relative;
    width:100%;
    height:60px;
}

.icon img {
/*     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 30px;
}