Creating a series of progress bars in Bootstrap that feature labels positioned to the left and moving towards the right

I am trying to create multiple progress bars using Bootstrap 4 with labels or text on the outer left side. Currently, the bars are appearing like an inverted stair when multiple bars are added.

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

Here is the code I have so far:

    <div class="container">
      <p class="progress-label">
        C#
      </p>
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>
    <div class="container">
      <p class="progress-label">
        C#
      </p>
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>

and here is the CSS code:

.progress-label {
  float: left;
  margin-right: 1em;
}

This code was taken from How to put a label side by a progress bar with bootstrap?
I am struggling to align the bars properly. Any suggestions on how to fix this alignment issue?

Here's a fiddle:

cssbootstrap-4

Answer №1

For a cleaner layout, consider enclosing each progress bar within a div with the class 'progressHolder'. To address the issue of using 'float:left' in 'progress-label', simply add 'overflow:hidden' in the CSS.

HTML Code:

<div class="container">
   <div class="progressHolder">
     <p class="progress-label">
       C#
     </p>
     <div class="progress" id="prog1">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
   </div>
 </div>
 <div class="container">
   <div class="progressHolder">
     <p class="progress-label">
       C#
     </p>
     <div class="progress" id="prog2">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
   </div>
 </div>

CSS Code:

.progressHolder {
  overflow: hidden;
}

.progress-label {
  float: left;
  margin: -5px 15px 15px 0;
}

Demo: https://codepen.io/Bibeva/pen/RwNMjNB

Answer №2

Adjust the .container to have a float: left property

To center the text with the progress bar, a calculation has been added to the margin-top

.container {
  float:left;
}

.progress {
  margin-top: 1rem;
}

.progress-label {
  float: left;
  margin-top: calc(1rem - 4px);
  margin-right: 1em;
}  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <p class="progress-label">C#</p>
  <div class="progress" id="prog1">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
</div>
<div class="container">
  <p class="progress-label">C#</p>
  <div class="progress" id="prog2">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
</div>

Answer №3

Here are some important points to consider:

  • container class is best suited for layout purposes and should not be used with inner elements. For more information, please visit this link: https://getbootstrap.com/docs/4.4/layout/overview/#containers
  • It's important that IDs are unique and not used on multiple elements. Consider using classes for more versatile options.

I recommend using the following CSS styles to achieve your desired outcome:

.container{
   margin: 10px;
}
.progress-label{
   padding: 0px 10px;
   float: left;
   margin-bottom: 0px;
   top: -4px;
   position: relative;
}

Answer №4

Replace the <p> tag with <label> tag within the progress-label element

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

Updating the class of a div based on a checkbox being checked or unchecked

I am attempting to apply the "isChecked" class to the parent div when a checkbox is checked, using the ngClass directive. Here is the HTML: <div ng-class="{isChecked: (isChecked_1 == 'true')}"> <input type="checkbox" id="check_ ...

htmlcssangularjs

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

htmlcssreactjssass

Modifying the color of a variety of distinct data points

There was a previous inquiry regarding Changing Colour of Specific Data, which can be found here: Changing colour of specific data Building upon that question, I now have a new query. After successfully changing the 2017 dates to pink, I am seeking a way ...

htmlcssjsonangular

Styling in Svelte/TS does not change when applied through a foreach loop

I've been experimenting with creating a unique "bubble" effect on one of my websites, but I'm facing difficulty changing the styling in a foreach loop. Despite no errors showing up in the console, I'm at a loss as to how to effectively debu ...

csstypescriptsveltestyling

Tips on how to maintain the underline when text is split into two sections

Revised This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans. The challenge I am facing is with displaying the underl ...

htmlcssunderline

Fixing the Responsive Menu Issues

In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach: Create a function called `smallNav()` to handle the resizing of the sidebar container: function sm ...

javascripthtmlcssbootstrap-4

How to create a clickable background image with an overlaid hyperlink?

I am looking for a way to make a logo appear clickable, even though it is just a background image. Unfortunately, I am unable to modify the HTML code, so I am limited to making changes in the CSS only. This is for a blog hosted on Wordpress.com, where HTML ...

htmlcss

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

htmlcss

The NextJS Link component does not seem to be receiving the styles from Tailwindcss

I am currently working on a nextjs frontend project that has tailwindcss integrated. Below is an example of the code I am using: import Link from 'next/link' return( <div> <Link className="text-sm hover:text-gray-600" ...

htmlcssnext.jsfrontend

Hovering over a white background will darken the CSS styling

A stunning image on a dark background Displayed on Hover (right) An elegant picture with a white background Activated on hover (incorrectly) I would like it to have a darkened effect on the white background as well. CSS Styling .photo background: n ...

css

Is it possible to sanitize user input without relying on !important?

Utilizing wp_editor, I have implemented a front-end form on my WordPress website for users to post without accessing the admin section. Although it is functional, there is a concern that users may copy and paste content with inline styles that could disrup ...

csswordpresssass

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

htmlcssangularmaterial-designangular-material2

Optimizing the width of Bootstrap 4 cards

I am experiencing difficulty in making a card stretch across the entire width of a col-md-6 column, especially when there is minimal text in the card. I would like the card to take up the full width of the col-md-6 column, regardless of the amount of text ...

twitter-bootstrapbootstrap-4

Using CSS to style the last paragraph after a heading

Trying to figure out how to style the final paragraph following a heading using CSS. I attempted using #div h1 ~ p:last-child, but it ended up skipping past the second heading and affecting the last paragraph before the list. I've been diligently sea ...

htmlcsscss-selectors

Tips on positioning the navbar to the right edge of the screen

Currently using bootstrap, in the process of learning css and bootstrap. Looking to align links within ul to the far right of the screen. Assistance would be greatly appreciated <nav class="navbar navbar-expand-lg navbar-light bg-light"> ...

cssbootstrap-5

Repeatedly utilizing a drop-down menu

Can a <select> menu be written and utilized in multiple locations on a webpage? For instance: <select id="dm"> <option value="">Select Quantity</option> <option value="less ">50 - 60</option> <option value="me ...

javascriptjqueryhtmlcss

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

margin leakage: potential misalignment caused by nested DIV elements

I am experiencing a strange issue where the margin of a nested DIV is "leaking" out of its parent container. For a better understanding, check out this test case: http://jsbin.com/ibaze The outer wrapper (highlighted in red) does not align perfectly a ...

htmlcss

Could you please guide me on resolving the Blazor/Bootstrap 5 CSS problem related to styling "striped" tables?

Looking for a solution to fix a CSS issue involving Bootstrap 5 "table-striped" and displaying Blazor Razor components. In my Blazor/Bootstrap 5 page, I have a table displaying content fetched from a service at runtime. Initially, the Bootstrap CSS is vis ...

c#css.netblazorbootstrap-5

The text alignment function of justify is not functioning properly

Trying to find a way to validate the content of this article, but I'm hitting a roadblock... <p style="text-align:justify;" class="custom-article"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt velit vitae risus t ...

cssjustify