Q: How to hide text links when viewed in mobile with bootstrap 4 I'd like to hide the text part of the link when viewed in mobile (xs and sm) sizes. How can I accomplish this? Does bootstrap 4 offer anything?
HTML
<li>
  <a href="#"><i class="fa fa-icon"></i> Text Link</a>
</li>

In mobile, I should only see the (icon). In desktop or tablet mode, I'll see (icon) Text Link

A: Use this class hidden-sm-down to hide on small devices
<li>
  <a href="#"><i class="fa fa-icon"></i> <span class="hidden-sm-down">Text Link</span></a>
</li>

You can find more about regarding this from here. https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

A: My suggestion is using CSS3


/*Your smartphone screen width*/
@media screen and (max-width:400px){
  #myText{
    display:none;
  }
}
<li>
  <a href="#"><i class="fa fa-icon"></i><span id="myText">Text Link</span></a>
</li>


