Creating a stylish design: integrating a progress bar within a card using Bootstrap 5

I'm currently delving into the world of bootstrap and I'm curious about how to incorporate a progress bar into a card layout to enhance my design skills. I experimented with inline-block and inline display properties, but they didn't yield the desired result. Eventually, I resorted to using flexbox, although the outcome still seems somewhat off. Here is a snapshot of my progress so far. https://i.sstatic.net/FTkXT.png

Below is the snippet of HTML code:

<div class="card-header">Languages</div>
<div class="card-body text-dark">
  <h4 class="card-text">
    <div class="d-flex">Korean: 
      <div class="progress-bar bg-light" style="width:100%"></div>
    </div>
    <div class="d-flex">English: 
      <div class="progress-bar bg-dark" style="width:90%"></div>
    </div>
    <div class="d-flex">Chinese: 
      <div class="progress-bar bg-dark" style="width:85%"></div>
    </div>
  </h4>
</div>
htmlcssflexboxbootstrap-5

Answer №1

I am not sure what the expected result is, but I have created it based on my understanding. One mistake is that your progress bar should be inside a 

<div class="progress"></div>
. Additionally, if you are using flex, you need to give the children a width for them to fit properly.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a958a97">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card m-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title border-bottom pb-1">Languages</h5>
    <h4 class="card-text">
      <div class="d-flex">
        <div class="w-50">Korean</div>
        <div class="progress my-1 w-50">
          <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="d-flex">
        <div class="w-50">English</div>
        <div class="progress my-1 w-50">
          <div class="progress-bar bg-dark" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="d-flex">
        <div class="w-50">Chinese</div>
        <div class="progress my-1 w-50">
          <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </h4>
  </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

Unusual occurrences observed with the table

While working with tables, I've noticed an unusual effect. Take a look at the two fiddles below. http://jsfiddle.net/v5co5uy7/ (why are the cells in the left column pushed down?) http://jsfiddle.net/v5co5uy7/1/ (the cells in the left column are posi ...

htmlhtml-table

Tips for updating the value of an input text field in one HTML table according to a certain value entered in a different input text field located in another HTML table

I am working with an HTML table that consists of one row. Within this row, there are two TDs which each hold their own tables (each containing 10 rows with 10 input fields). My goal is to update the value of another corresponding text field based on change ...

javascripthtmljsp

Utilizing BootStrap for a more Dynamic and Reactive Web Design

Here is the HTML code I am using along with bootstrap: <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> & ...

htmlbootstrap-4

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

I'm trying to implement Bootstraps Affix feature in a sticky subnav. <div class="container" data-spy="affix" data-offset-top="417" id="subnav"> I've adjusted the offset to ensure there's no "skip" or "jump" when the subnav sticks. Ho ...

javascriptjquerycsstwitter-bootstrapaffix

The paintbrush is whimsically altering its style on the canvas

My checkerboard has a unique feature where hovering over a tile will highlight it in yellow. Surprisingly, this action also turns the game border and the last white checker's border yellow as well. What's puzzling is that I never specified for t ...

javascripthtml

Combine two languages into a single <p>

I'm dealing with a WordPress website where I have a paragraph that contains two different languages. What I want to achieve is to display each language in a distinct font-family (font-face). For example: <p>למרות הכל its worth it</p& ...

htmlcss

What is the best way to implement this header style with code?

I came across this design from a potential client recently, even though we didn't end up working together. I thought it would be a good exercise to try coding the design for practice purposes. Just to clarify, this is not my original design and I have ...

htmlcss

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

phphtmlcsstwitter-bootstrapbootstrap-5

Is there a way to automatically redirect my page after clicking the submit button?

I'm having trouble with the code below. I want it to redirect to NHGSignin.php if 'new horizon gurukul' is entered. When I click the Next button, it's supposed to take me there but it's not working as expected. Can anyone help me f ...

javascripthtmlcss

When applying styles in Polymer, it's important to take into account the width and height

Having trouble setting the width of elements within container elements in Polymer. Here's a simple example that illustrates the issue: <!doctype html> <html> <head> <base href="https://polygit.org/polymer+:master/webcomponent ...

cssshadow-dompolymer-2.x

Maintain the default material-ui class styles while making customizations to override others

Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class: const useStyles = makeStyles(theme => ({ tooltipPlacementTop: { margin: '4px 0' ...

cssreactjsmaterial-uioverriding

Is there a way to achieve a flex layout without having to modify the HTML structure?

I am working on achieving a specific layout using CSS: https://i.stack.imgur.com/xg7ZA.png This is the HTML structure I have and it cannot be altered, along with what I have managed to add with CSS. It's almost there but missing something: .conta ...

htmlcssflexbox

Ways to center an image within a div using Bootstrap 4

I am currently using Bootstrap version v4.0.0-beta.3 and facing a challenge with aligning an image in the absolute center of a fixed-height div tag. While I have successfully aligned the image horizontally using the mx-auto and d-block classes, I am strugg ...

twitter-bootstrapcssbootstrap-4vertical-alignment

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

htmlcss

Differences between CSS Display None and Collapse

Can you explain the distinction between the following two options? display: none; visibility: hidden; I always thought that visibility: collapse was only applicable to tables. Am I mistaken? ...

htmlcss

Tips for creating an element that maintains its dimensions when a border is added during a hover effect

One issue I often face is the desire to add a border to an element on hover, only to find that as the border appears, the element's height and width change, causing it to visually jump and potentially push other elements. Is there a solution for this ...

htmlcssdom

Display a full-screen image and align it horizontally from the center using CSS styling

When I fill a screen with an image using the following code: width:auto; height:100%; The image fills the screen vertically and almost entirely horizontally, but it gets cropped off on the right side. Is there a way to make the image float centered on th ...

css

Exploring the possibilities of device orientation in combination with 3D transforms

Imagine a project that aims to create a cube with sides representing different geolocations. The cube's sides for east, west, up, ground, north, and south are meant to always point in their respective directions. To gather the necessary data, the proj ...

css3drotationfirefox-osdevice-orientation

Position the Bootstrap footer element at the bottom of the page

On a custom HTML page that I created, I decided to include a footer using Bootstrap. In this example, it demonstrates how the footer can be positioned at the bottom of the page without being placed inside a container element (directly within the body eleme ...

htmlcsstwitter-bootstrap