Progress Bar Rating System in Bootstrap 4

Trying to achieve a specific layout using Bootstrap 4:

https://i.sstatic.net/Ym6Ov.jpg

Disregarding "See All" and "4,327 Ratings"

Progress so far has led to:

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

The numerical ratings can be replaced with font icons.

Provided code snippet:

 <h4>Ratings and Reviews</h4>
 <div class="d-flex">
   <div class="text-center">
     <span class="display-4 font-weight-bolder">3.1</span><br>
     <span class="text-black-50">out of 5</span>
   </div>
   // Additional rows ...
 </div>

In need of assistance to: - Vertically align the progress bar with text/star. - Replace Row/Col structure with flexbox. - Utilize minimal CSS.

csstwitter-bootstrapbootstrap-4

Answer №1

Remember to apply the align-items-center class to all row elements. Bootstrap v4 utilizes flexbox by default.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<h4>Ratings and Reviews</h4>
<div class="d-flex">
  <div class="text-center">
    <span class="display-4 font-weight-bolder">3.1</span><br>
    <span class="text-black-50">out of 5</span>
  </div>
  <div class="flex-grow-1">
    <div class="row align-items-center">
      <div class="col-4 text-right">
        5
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        4
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        3
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        2
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-4 text-right">
        1
      </div>
      <div class="col-8">
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </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

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular

The alignment of links is not meeting the centering requirement

I'm facing a challenge with aligning my "buttons" on the pages, although they are essentially text links designed to resemble buttons using CSS. These buttons are utilized within an unordered list structure (refer to the HTML snippet below). The rele ...

htmlcssresponsive-design

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

htmlformscssstylesmultiple-columns

A straightforward guide on utilizing data-attributes to achieve a linear-gradient background

considering the following input .prettyRange { -webkit-appereance: none; } .prettyRange::-webkit-slider-runnable-track { background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%); } <input class="prettyRange" type="range" name="cap ...

htmlcssbackgroundgradientcustom-data-attribute

Insert Angular HTML tag into TypeScript

I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additional ...

javascripthtmlcssangulartypescript

Cross-platform mobile browsers typically have scrollbars in their scrollable divs

I have successfully implemented scrollable div's on a page designed for tablets running Android 3.2+, BlackBerry Playbook, and iOS5+ (except iPad 1). However, I would like to add scrollbars to improve the user experience. For iOS5, I can use the suppo ...

javascriptandroidcsswebkitscrollbars

Unresponsive Button_tag within a Rails table

The situation is as follows: I have a button_tag located within a form that is nested inside a table: <div class="table-responsive tableBG"> ** Interestingly, the button functions perfectly when placed here ** <table class="table table-striped ...

htmlbootstrap-4ruby-on-rails-5twitter-bootstrap-rails

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

I'm currently developing an app using next js and redux. An interesting issue has arisen - when I include PersistGate in my _app.js file, the flex direction mysteriously changes from row to column in index.js. There haven't been any modifications ...

javascriptcssreduxflexboxnext.js

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

javascriptcssreactjsreact-vis

Text cannot be aligned

I recently encountered an issue where I center-aligned some text and positioned it using top:20%. Everything was working fine until I added a paragraph under it. At that point, the element moved back to its original position and the top:20% positioning did ...

htmlcssweb

Achieving proper stacking of a table with other div elements

I've come across some similar inquiries, but none seem to fully address the specific issue at hand. If there's an existing thread on this that I overlooked, I apologize in advance. So, here's a multi-part problem: my solution for the first ...

htmlcsshtml-tableflexbox

Organizing an angular expansion panel

I am currently dealing with an expansion panel that has a lot of content. The layout is quite messy and chaotic, as seen here: https://ibb.co/Y3z9gdf It doesn't look very appealing, so I'm wondering if there is a way to organize it better or ma ...

cssangular

What is the process for encoding images in HTML code?

Is there a method to embed a background image directly in the HTML code? For instance: background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX); If I have an image file, can I encode its data and t ...

csshtml

Changing the arrow in jQuery's slideToggle for different div elements is a breeze

Good day, I'm struggling with getting the arrow switch to work correctly for slideToggle. Even though I have three of them, the arrow changes only for the first one - no matter which div I click on. Any suggestions on what I might be missing? Thank yo ...

jqueryhtmlcss

Persistent hover effect for collapsible accordion panels when closing them

My simple accordion features a functionality where a class of .open is added to the title + content group when you open a panel for styling purposes. Everything works smoothly, but I've noticed on my phone that after clicking to close a panel, the hov ...

javascriptjqueryhtmlcsstouch

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

csswebpackcss-loader

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...

htmljquerycss

CSS styling for the dropdown list in the content/option section

Can someone help me with a simple question I've been researching for hours without success? I'm trying to figure out how to style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this screenshot ...

htmlcssdrop-down-menu