What is the process for adding text before and after a Bootstrap progress bar?

I want to customize the bootstrap progress bar with text at the beginning and end, like this:

5 star ----------------------------------------------- 70%

Here is my attempt to achieve this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="progress-1 d-flex flex-row align-items-center">
  <div class="stars">
    <span>5 <i class="fa fa-star"></i></span>
  </div>

  <div class="progress" style="height: 3px;">
    <div class="progress-bar bg-success" role="progressbar" style="width: 5%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <div class="percent">
    <span>70%</span>
  </div>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

I believe this meets your expectations.

Simply place the progress div inside the col div. Replace the .stars div and .percent elements with span elements.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://use.fontawesome.com/027b364b90.js"></script>
<div class="d-flex align-items-center">
  <span class="stars">
    <span>5 <i class="fa fa-star"></i></span>
  </span>
  <div class="col">
    <div class="progress" style="height: 3px;">
      <div class="progress-bar  bg-success" role="progressbar" style="width: 5%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <span class="percent">
    <span>70%</span>
  </span>
</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

Achieve perfect alignment of an HTML table by positioning it precisely 36 pixels away from the right edge of the window

I'm struggling to achieve a table that is precisely 36px away from both the left and right edges of the browser window, regardless of CSS. While I can easily set the left margin, getting the exact right margin seems impossible as the `margin-right` CS ...

htmlcsscss-tables

Webkit feature: Rounded border image overlay

One issue arises when applying a rounded border to an image in webkit browsers as the border ends up hidden behind the image. CSS img { border: 10px solid #000; border-radius: 100%; } HTML <img src="http://25.media.tumblr.com/tumblr_mbje ...

webkitbordercss

The element referenced by `$(this)` in jQuery seems to be

I have multiple forms on a single page that are very similar in structure. Some of the forms contain elements with a css class that triggers an onchange event handler. This is in an ASP.NET MVC environment. $('.check-changes').on('change&apo ...

jqueryasp.net-mvcbootstrap-4

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

htmlcssflexbox

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

cssseleniumscreenshotinternregression-testing

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

cssnext.jscss-animations

What is the reason that setting margin to 0 auto centers an element, while using margin 1 auto does not have the same effect?

When using margin: 0 auto;, it means that there is a margin size of 0 on the top and bottom of the element, with the available space being divided equally for the left and right margins. This behavior works as expected in the example below. In contrast, c ...

css

Displaying image titles when the source image cannot be located with the help of JavaScript or jQuery

I am currently facing an issue where I need to display the image title when the image is broken or cannot be found in the specified path. At the moment, I only have the options to either hide the image completely or replace it with a default image. $(&apo ...

javascriptjquerycssimage

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

htmlcssinternet-explorerinternet-explorer-9

(jquery) Show or Hide One Dropdown Element Singularly

I'm currently working on creating a mobile side navbar that features dropdowns with additional links. One issue I'm facing is trying to set it up so that when a link in the navigation is clicked, only the corresponding dropdown activates. At the ...

jqueryhtmlcss

Exploring the interaction between Bootstrap and AngularJS in creating unique menu functionality

UPDATE: added JSFiddle link I am currently working on creating a dynamic menu or set of options that will be populated based on server requests. The data structure I am dealing with is as follows (some unnecessary data has been omitted): { "name" : ...

htmlcssangularjstwitter-bootstrapmenu

Is there a way to spin these hexagons around?

Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting ...

htmlcss

Show validation error messages for radio buttons alongside images in a single row

Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input. I attempted to add another div after the radio buttons with the class ...

htmlcssbootstrap-4

Use a boolean value to determine the styling of multiple items simultaneously

I'm currently attempting to modify the appearance of the bars in each area (a total of 12), so that a value of 1 equates to true (displayed as green) and a value of 0 equates to false (displayed as red). This will dynamically change the color of each ...

javascripthtmlcss

Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...

javascriptjquerycss

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

Adjust the background color in HTML emails for dark mode on mobile devices

How can I ensure that the HTML email maintains a normal white background even when mobile dark mode is turned on? I have included the following meta tag and media queries in my code: <meta name="color-scheme" content="light dark"> <meta name="supp ...

csshtml-emailios-darkmodedarkmodeandroid-dark-theme

Altering the DOM directly within the componentDidMount() lifecycle method without needing to use

In ReactJS, I am facing an issue while trying to manipulate the DOM in the componentDidMount() method. The problem lies in the fact that the DOM is not fully rendered at this point, requiring me to use a setTimeout function, which I find undesirable. Upon ...

javascriptcssreactjs

What methods can I use to toggle between different divs using navigation buttons?

There are 4 divs on my webpage that I need to toggle between using the up and down arrows. Despite trying an if else statement, it doesn't work as intended. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.c ...

javascriptjqueryhtmlcss

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango