1

I'm using Bootstrap 4.1 and would like to display an icon within a button. Of course that's easy:

<a class="btn btn-primary" href="/users/auth/facebook">
  <i class="fab fa-facebook strong"></i> Facebook
</a>

But on mobile devises with less real estate I only want to display the icon and not the text. That used to be easy with Bootstrap 3 but I can't find a solution for this in the 4.1 documentation. How can/should it be done?

wintermeyer
  • 8,178
  • 8
  • 39
  • 85
  • One of the simplest solution will be: Keep both icon and text in your layout. Using media queries, hide the text for smaller screen sizes. You can keep the text inside a span. – AKNair Sep 10 '18 at 07:27
  • Try this link, you will know http://jsfiddle.net/UI_Designer/2byptdoL/1/ – chintuyadavsara Sep 10 '18 at 07:27

4 Answers4

9

You can use the display utilities, just adjust the breakpoint with your preferences.

d-none d-md-inline means that Facebook is hidden starting from the smallest width until the md breakpoint, then from md up, the element will have the style of display:inline.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<a class="btn btn-primary" href="/users/auth/facebook">
  <i class="fab fa-facebook strong">Icon</i> <span class="d-none d-md-inline">Facebook</span>
</a>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
2

The visibility classes changed form Bootstrap 3, and for me at the beginning it was also confusing. Essential classes from bootstap site:

Screen Size Class:

  • Hidden on all .d-none
  • Hidden only on xs .d-none .d-sm-block
  • Hidden only on sm .d-sm-none .d-md-block
  • Hidden only on md .d-md-none .d-lg-block
  • Hidden only on lg .d-lg-none .d-xl-block
  • Hidden only on xl .d-xl-none
  • Visible on all .d-block
  • Visible only on xs .d-block .d-sm-none
  • Visible only on sm .d-none .d-sm-block .d-md-none
  • Visible only on md .d-none .d-md-block .d-lg-none
  • Visible only on lg .d-none .d-lg-block .d-xl-none
  • Visible only on xl .d-none .d-xl-block
kademat
  • 134
  • 1
  • 9
1

You can use a media query to do that

.fab {
  display: inline;
}

@media only screen and (max-width: 600px) {
  .fab {
     display: none;
   }
}
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
0

Firstly, keep the Facebook text in an inline element like span, and use media queries to not display the span content in small screens.

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }

@media only screen and (min-width: 320px) {

  a>span{
     display: none;
   }
}
webcodesnip.com
  • 145
  • 3