Text and responsive image

Question

I’m kind of new working with responsive methods and I’m having problems with a detail, I need to exchange the text of a btn for an image when my application is accessed by mobile.

Could someone help me with this?

<button class="btn btn-lg btn-info btn-block text-uppercase" id="prosseguir" type="submit">Prosseguir</button>

I would like when resizing the screen, btn replace "Continue" with an icon.

Grateful.

Answer 1

There are several ways to do and one of them is by putting a span within the button as I did in this example. then with the rule @media You hide and show this span, at the same time that you remove the text of bottun putting the font-size:0 for example.

So if the screen has at most 610px width the image appears, if more 610px the text of button appears. You can adjust this in the rule @media if you want

At first you may think that it is not a fully semantic way, but the positive side is that even with the font-size:0 the text may remain visible to screen readers, but does not appear to the ordinary user.

See the code corresponding to the image above:

.icon {
    height: 16px;
    width: 16px;
    background-image: url(https://placecage.com/16/16);
    vertical-align: middle;
    display: none;
}
@media screen and (max-width:610px) {
    .icon {
        display: inline-block;
    }
    button {
        font-size: 0;
    }
}

<button class="btn btn-lg btn-info btn-block text-uppercase" id="prosseguir" type="submit">
    Prosseguir
    <span class="icon"></span>
</button>

Answer 2

As a complement to Hugo’s response, Bootstrap already has tools to change the property display varying according to the width of the viewport (through the media queries). Are the classes d-* (documentation).

OBS: when referring to xs, is the screen size (< 576px). For the BT4 uses Mobile First approach, that is, if not specified explicitly the styles are applied to the screens xs (extra small)

You can tell picture to stay hidden in all widths except xs using the classes:

<span class="d-none d-sm-block">Prosseguir</span>

d-none causes the span be it display: none, and d-sm-block makes it display: block screen sm or larger, ie, will be hidden only in screens xs.

Already in the image you would use:

<img class="d-inline-block d-sm-none" src="...">

d-inline-block causes the img be it display: inline-block, and d-sm-none makes it display: none screen sm or larger, ie, will be visible only on screens xs.

Thus the visibility of the span and of img are mutually exclusive.

Example:

html, body {
  padding-top: 40px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<main class="container">
  <div class="row">
  
    <button class="btn btn-lg btn-info btn-block text-uppercase">
      <span class="d-none d-sm-block">Prosseguir</span>
      
      <img class="d-inline-block d-sm-none" src="https://getbootstrap.com.br/docs/4.1/assets/brand/bootstrap-solid.svg" style="max-width: 50px;">
      
    </button>
    
  </div>
</main>

You can leave the snippet in full screen ("full page" link) and change the width of your browser window to see responsiveness working