Complete visibility of Bootstrap progress labels is compromised

Progress bar with a customized label inside:

<div id="progress" class="progress mb-1" style="height: 20px;">
    <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>

While it functions properly, the label is not fully visible on the left side for smaller screens:

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

I have attempted various solutions (setting a fixed width of 2 for the bar, experimenting with different colors), but I am curious if there exists a more elegant fix for this issue?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

To enhance the appearance of your progress bar, consider adding a second div for labeling purposes:

<div id="progress" class="progress mb-1">
    <div class="progress-label">1/20</div>
    <div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>

You can customize the style further with the following CSS:

.progress {
  position: relative;
}
.progress-bar {
  overflow: hidden;
  z-index: 2;
}
.progress-label {
  color: #0275D8;
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  z-index: 1;
}

Check out this preview image for reference: https://i.sstatic.net/f3dc1.png

Answer №2

Solved the issue by implementing this code snippet:

<div id="status" class="status mb-2" style="height: 15px;">
    <div class="status-bar" role="statusbar" style="width: 4.0%; min-width:80px;" aria-valuenow="4.0" aria-valuemin="0" aria-valuemax="100">1/25</div>
</div>

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

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

What can I do to enhance the responsiveness of this rotating cube?

Here I am working with a rotating cube on the web. Check out my similar code. I am attempting to make it so that when the browser size is reduced, the table and cube also shrink in size accordingly without changing their position relative to each other. I ...

csstwitter-bootstrap

Ways to restrict HTML styling to just the header section and avoid affecting the entire webpage

As a newcomer to HTML, please excuse my lack of knowledge. I am struggling to keep my current design at the top of my page, similar to a fixed header that follows the user down the page. Currently, the design takes over the entire page, obscuring the bod ...

javascripthtmljquerycss

The enigma of CSS: How is the width mysteriously set to 0px with no visible CSS styling

Take a look at this snapshot of a webpage I'm currently designing in Chrome Developer Tools: https://i.sstatic.net/SB00j.png The primary rule in the 'Matched CSS Rules' section indicates that the width of the element should be 160px. Howe ...

css

What is the best way to increase the spacing between buttons in a Bootstrap navigation bar?

Can anyone guide me on how to add space between each button in this Navigation Bar? I want them to be separated, similar to this example. I am using bootstrap 5. <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body"&g ...

htmlcssbootstrap-5

Implementing pagination in Angular Js to redirect users back to the current page without resetting to the initial page

Dealing with paging can be tricky, especially if you're fetching a large amount of data at once through a $http request. Let's say you have 50 records and you're using the following code for paging: $scope.numPerPage = 10; $scope.curren ...

angularjstwitter-bootstrap

How to use jQuery to center an overlay on a webpage

Need help with centering a jquery popup on a webpage? I'm struggling with positioning it in the middle of the page, regardless of site adjustments or resolution changes. Currently, I have it set to absolute positioning with CSS, but the issue is that ...

javascriptjqueryhtmlcsscenter

Guide for Displaying Three Cards Side by Side using Bootstrap Grid System

I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...

htmldjangobootstrap-4

Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, maki ...

asp.netcssajax

Add some text onto the Box Component in Material UI

I am looking to replicate the hover functionality (UI) seen in this example: Desired UI Source: Since adjusting background image styles can be complex, I have opted to use the Box Component from Material UI. Within the Box Component, I have implemented th ...

javascriptcssreactjsmaterial-uijss

What are the steps for incorporating a linear-gradient hue into a Slider?

Is it possible to apply a linear-gradient as color to Material-UI Slider? I have tried everything but can't seem to make it work. color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)' ...

cssreactjsmaterial-ui

What is the most efficient method for designing this jQuery code to be reusable?

I am currently using dynamic Bootstrap popovers that are populated with content from my database. In PHP, it generates unique classes for each popover. My question is, when using jQuery, do I need to trigger the popovers individually? This is how I am cur ...

javascriptjquerytwitter-bootstrap

Initiate Bootstrap Popover following the successful submission of POST data via Ajax

Hello, I'm currently facing an issue with Bootstrap Popover. My goal is to display a Popover after successfully sending data to a .php file using the Ajax POST method and then executing the .php script. This particular functionality is intended for s ...

phpajaxtwitter-bootstraptwitter-bootstrap-3bootstrap-popover

What is the best way to display only a specific container from a page within an IFRAME?

Taking the example into consideration: Imagine a scenario where you have a webpage containing numerous DIVs. Now, the goal is to render a single DIV and its child DIVs within an IFrame. Upon rendering the following code, you'll notice a black box ag ...

javascripthtmlcssiframe

Tips for utilizing string interpolation in the style tag of an Angular component

@Component({ selector: 'app-style', template: ` <style> .test { color: {{ textColor }} } </style> ` }) export class StyleComponent { textColor = "red"; } The current method doesn't appear to b ...

cssstringangularstylesinterpolation

I'm currently utilizing the react mui package, specifically @mui/x-date-pickers. Could someone kindly provide guidance on how to customize the color of the

I am currently working with MUI in React and using the DatePicker component from the @mui/x-date-pickers library. The version I am using is 6.0.3. I have encountered an issue where, upon selecting the first day, the specified color changes as shown in the ...

cssreactjsmaterial-uidatepicker

Switching colors on SVG when hovering

When I hover over the code below, I want both eyes and eyebrows to change color. I've managed to get it working for the left eye, but not the right eye. Additionally, the fill on the right eyebrow looks strange when hovered over. I suspect this issue ...

csssvghover

When the page is launched, creating a rectangle at a precise location on the area map

I have successfully implemented the maphilight jquery plugin with hover and onclick features from here. It works great. Is there a way to automatically draw a rectangle on the areamap image at a defined position and size when the page loads, without requi ...

phpjqueryhtmlcssshapes

Overflow of text arranged horizontally within a span element situated inside a div container

I am currently working on developing a ticketing system that involves using nested div elements to organize content. Each ticket is represented by a main div containing various other nested divs and media such as images. While the functionality of the sys ...

javascripthtmlcss

Adjusting icons based on the length of the text

When I have a title text and an icon, I want to align the icon to the left if the title fits on a single line. However, if the title spans multiple lines, then I need to align the icon to the top. I recently discovered a solution that involves using Javas ...

javascriptcssangularflexboxcss-grid