Display badges alongside Bootstrap pills while hiding any non-badge text when viewing on a mobile device

I'm working on a multi-step form using angular UI router and have a bootstrap nav at the top. However, on mobile-sized screens, each pill in the nav occupies its own line due to the amount of text. I want the non-badge content of each pill to disappear on small screens, like shown in the screenshot below.

Is there a CSS-only solution to achieve this instead of adding extra span tags?

Current Behavior:

https://i.sstatic.net/8wKtw.png

Desired Behavior:

https://i.sstatic.net/outF4.png

Appreciate your help!

cssangularjstwitter-bootstrap

Answer №1

If you want to hide text on small screens (less than 768px), wrap it in <span> elements with the .hidden-xs class.

<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>

To prevent stacking on smaller screens, add this CSS:

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

Here is a live example.

Answer №2

To achieve the desired effect, you can utilize the classes .hidden-xs and .visible-xs-* from Bootstrap's responsive utilities section available at http://getbootstrap.com/css/#responsive-utilities. Here is an example:

<!-- hidden on mobile devices -->
<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 on mobile devices -->
<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>

Remember to include the class='col-xs-3' for each li when targeting mobile devices.

I hope this solution proves beneficial!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidance on Configuring Django Static Files

For setting up my Django static files, I added the following code to settings.py: STATIC_URL = '/static/' STATIC_DIRS = [ os.path.join(BASE_DIR, 'static') ] STATIC_ROOT = os.path.join(BASE_DIR, 'assets') To implement this ...

pythoncssdjangodjango-staticfiles

The Popover style from React-Bootstrap seems to be missing when applied to my component

Attempting to incorporate a Popover with overlay trigger from React - Bootstrap has proven to be quite the challenge. If you check this image, you'll see what it's supposed to look like. This is the code I used: var {Button, Overlay, OverlayTr ...

csstwitter-bootstrapreact-bootstrapbootstrap-popover

What is the best way to make a selected link stand out with a highlight?

I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here? #sidebarContent a:active{ background-colo ...

javascriptjqueryhtmlcss

Ways to adjust image placement and size post-rotation with CSS/JS to ensure it stays within the containing div and avoids being cut off

Check out this jsfiddle I've been experimenting with. The jsfiddle is designed to rotate an image by 90 degrees in either clockwise or anti-clockwise direction upon button click. However, the rotated image currently appears outside of its parent div. ...

htmlcssangularjsrotation

The Facebook bots are unable to crawl our AngularJS application because the JavaScript is not being properly

I have a unique setup where my website is built with AngularJS and Wordpress as a single page application. Depending on the routing of the page, I dynamically define meta tags in the controller. Here's a snippet of my HTML header: <meta property=" ...

javascriptangularjsfacebookfacebook-graph-api

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

javascriptcssreactjsmaterial-ui

Steps for invoking a function in AngularJS

I am working on creating a basic example of parsing JSON data. I found the code for this project at the following link: http://jsfiddle.net/mjaric/pJ5BR/ <p> Click <a ng-click="loadPeople()">here</a> to load data.</p> My goal ...

angularjs

The Bootstrap modal causes the scrollbar to vanish upon closure

Despite trying numerous solutions and hacks on this issue from StackOverflow, none of them seem to work for me. Currently, I am utilizing a modal for the login process in Meteor (e.g. using Facebook login service) which triggers a callback upon successful ...

javascriptcsstwitter-bootstrapmeteortwitter-bootstrap-3

What could be causing the hover effect to malfunction in this code snippet?

I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HT ...

htmlcsshover

Is it possible to have Mobile WebKit store the click position?

I am in the process of developing a unique framework specifically designed for WebKit devices. One of the features I have implemented is a series of list views that activate a 'hover' class when users touch them. Below is the jQuery/JavaScript co ...

javascriptjqueryiphonecssmobile-webkit

Data is not displaying correctly in the Angular Material Table

I'm currently trying to build a mat table based on an online tutorial, but I'm facing a problem where the table appears empty even though I have hard coded data. As someone new to Angular and HTML/CSS, I'm struggling to understand why the ma ...

htmlcssangulartypescriptangular-material-table

What could be causing the Bootstrap ProgressBar to not show up?

Having an issue with the ProgressBar component from react-bootstrap: <ProgressBar now={dynamicValue} /> The value dynamicValue changes for each component. However, I am unable to get the progressBar to display in my case. ...

cssreactjsbootstrap-4progress-barreact-bootstrap

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

asp.nethtmlcssbuttonwebforms

Styling QSpinBoxes in QColorDialog without affecting QAbstractSpinBox styling with QSS

To give our Qt desktop application a stylish look, I have been utilizing Jorgen-VikingGod's impressive QSS framework as a foundation. Unfortunately, we encountered a hurdle when it came to usability on a dated tablet device running Windows. The tiny s ...

cssqtqtstylesheets

What is the correct timing for implementing a JavaScript delay to activate CSS styling?

Let's say I have some CSS like #joe { transition: opacity 500ms; opacity: 0; } Next, I include JavaScript that triggers the addition of a div and then animates the opacity to = 1 when you click the page. document.body.onclick = function () { var j ...

javascriptcsstransition

Customize the appearance of a shadow-root element

Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...

javascriptcssweb-componentshadow-dom

Is it possible to enable CSS margins to collapse across a fieldset boundary in any way?

One interesting CSS behavior is that adjacent vertical margins typically collapse into one another. In other words, the space between elements will be equal to the larger margin instead of the sum of both margins. Interestingly, fieldset elements do not f ...

cssmarginfieldset

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

Utilizing AngularJS controllers to interact with directive scope variables

I have a question regarding accessing scope values from a directive inside my HTML code. I want to be able to access the directive's scope value in the parent controller and display it in the HTML. Below is an example of what I am trying to achieve. ...

angularjsangularjs-directiveangularjs-scopeangularjs-controller

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Is col-sm the default class applied for large screens if col-lg and col-md are not specified? ...

javascriptjqueryhtmlcsstwitter-bootstrap