Bootstrap Pills with Badges: Hide non-badge text on mobile

Question

I have a multi-step form hooked up with angular ui router, with a little bootstrap nav on top:

<ul class="nav nav-pills nav-justified">
  <li ui-sref-active="active"><a ui-sref=".amount">Step <span class="badge">1</span> Amount</a></li>
  <li ui-sref-active="active"><a ui-sref=".card">Step <span class="badge">2</span> Payment</a></li>
  <li ui-sref-active="active"><a ui-sref=".contact">Step <span class="badge">3</span> Contact</a></li>
  <li ui-sref-active="active"><a ui-sref=".confirm">Step <span class="badge">4</span> Confirm</a></li>
</ul>

Looks slick on larger screens, but the amount of text in each pill causes them to occupy their own line on mobile-sized screens. I'd like instead for the non-badge content of each pill to disappear on small-sized screens, as per the screenie below.

I could do this quickly with extra span tags, but I'd like to know if there's a CSS-only solution that I could apply instead.

Current Behavior:

Desired Behavior:

Thank you for your time.

Tasos K. · Accepted Answer · 2016-03-28T06:13:26.157

You can wrap the text you want to side in <span> elements that have the .hidden-xs class. That will make them not visible in small screens, e.g. smaller than 768px.

<ul class="nav nav-pills nav-justified">
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">1</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">2</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">3</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">4</span><span class="hidden-xs"> Amount</span></a></li>
</ul>

Also, to disable the stacking you can add the following CSS

@media (max-width: 767px) { 
    .nav-justified > li {
        display: inline;
    }
    .nav-justified > li {
        float: left;
    }
}

See here a working sample.

Note: If you want to avoid stacking but keep the "justified" effect take a look in this answer http://stackoverflow.com/a/26004988/2851870. — Tasos K., Mar 27 '16 at 13:54

score 0 · Answer 2 · answered Mar 27 '16 at 13:48

You could use .hidden-xs and .visible-xs-* http://getbootstrap.com/css/#responsive-utilities like:

<!-- invisible in mobile -->
<ul class="nav nav-pills nav-justified hidden-xs">
  <li ui-sref-active="active"><a ui-sref=".amount">Step <span class="badge">1</span> Amount</a></li>
  <li ui-sref-active="active"><a ui-sref=".card">Step <span class="badge">2</span> Payment</a></li>
  <li ui-sref-active="active"><a ui-sref=".contact">Step <span class="badge">3</span> Contact</a></li>
  <li ui-sref-active="active"><a ui-sref=".confirm">Step <span class="badge">4</span> Confirm</a></li>
</ul>

<!-- visible only in mobile -->
<ul class="nav nav-pills nav-justified visible-xs-*">
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".amount"><span class="badge">1</span></a></li>
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".card"><span class="badge">2</span></a></li>
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".contact"><span class="badge">3</span></a></li>
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".confirm"><span class="badge">4</span></a></li>
</ul>

And add class='col-xs-3' to each li in mobile.

Hope it helps!

Bootstrap Pills with Badges: Hide non-badge text on mobile

Current Behavior:

Desired Behavior:

2 Answers2