Is there a way to display Bootstrap 4 progress bars next to each other in two distinct columns within a single container?

I am struggling with controlling the positioning of Bootstrap 4 progress bars. It seems that Bootstrap's progress bars are based on Flexbox components, which is causing confusion for me. I have provided an image showcasing my issue here

Within my current code, I have a container that contains a row with multiple progress bars. My goal is to create two separate stacks of progress bars that are centered horizontally and not touching, as depicted in the image.

I have experimented with various CSS tweaks and changes in the HTML ordering, such as adjusting the .progressbar class with 'flex-direction: row' instead of column, but I have had no success. I also attempted using two columns within the row to create distinct stacks of progress bars within each column, intending to constrain the widths of the progress bars to their respective columns.

Unfortunately, the progress bars do not align how I desire.

It seems that the Flexbox nature of the progress bar component may be causing issues with constraining it within a container. Additionally, in my current code, the progress bars in the "left" stack are touching those in the "right" stack with no space between them, and they are not displayed inline. Despite using float-left and float-right, they are stacking on top of each other. I have an image illustrating my desired outcome (photoshopped)

Here is the HTML snippet from my current code: 

<section id= "about">
      <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
      <div class= "container">
          <div class= "row justify-content-center">
             <div class= "col-sm-12">
               <div class="progress w-25" style="height: 20px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                </div>
                <div class="progress w-25" style="height: 20px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                  </div>
                   <div class="progress w-25 float-right" style="height: 20px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                </div>
          </div>
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4-beta

Answer №1

It is indeed a fact that progress bars in Bootstrap 4 rely on flexbox for their layout. However, they typically behave as expected.

Your code had some issues with the individual progress bar elements.

To create spacing between them, you utilized the mb-* class, which is a built-in Bootstrap 4 class for adding margin-bottom. In this case, you applied mb-2 to add a margin of 2 units at the bottom.

The key challenge then lies in manipulating the Bootstrap grid to achieve the desired appearance across different screen sizes. In the provided example, I chose the following approach:

For the first column: 

col-12 col-md-6 col-lg-5 offset-lg-1

For the second column: col-12 col-md-6 col-lg-5

Explanation: On the smallest screens (col), both columns take up the full width. On medium screens (col-md-*), they split equally in half (6 units out of 12). On large screens (col-lg-*), each column occupies 5 units (5 units out of 12), and there is a 1-unit offset in the second column (offset-lg-1). Essentially, one unit remains empty on large screens, allowing the content to be automatically centered. That's the gist of it!

Here's the corresponding code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<section id="about">
    <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-5 offset-lg-1">
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-5">
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
            </div>
        </div>
    </div>
</section>

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

Are the nav, footer, header tags not functioning correctly?

Hi everyone, I'm a newcomer to StackOverFlow! I have a question about the necessity of tags like Nav, footer, header, etc. Do they serve any purpose other than indicating what each section is about? I've heard they might be good for SEO rankings ...

htmlcsstagsnavbarsemantics

What is causing the div element to act as a container?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba3bba5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0v ...

htmlcssbootstrap-4containers

How can I remove the color of a button in jquery after it's been clicked?

<button style="background-color:lightblue" id="extractv"> <b> Extract<br>v </b> </button> ... $("#extractv").click(function () { $("#extractv").removeAttr("style"); }); Upon clicking the button, my ...

jqueryhtmlcssbuttoncgi

Issues with ASP.net CSS not functioning properly in Internet Explorer, although it works fine in Firefox, Edge, and

Hello everyone, After spending several hours debugging and researching, I have hit a roadblock and can't identify the issue. As a less experienced coder, I am reaching out to seek your help. I am currently working on an ASP.NET C# page that was cre ...

c#cssasp.net

Improper Placement of Bootstrap 5 Modal

I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...

htmlcssbootstrap-5

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

htmlcsstwitter-bootstrapbootstrap-4

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

Guide to making an `Ajax Login` button

I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...

javascripthtmlajax

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

cssvue.jsvuetify.jsnuxt.js

The line spacing is not functioning as expected

I'm looking to vertically align my text with my logo in a seamless manner. However, whenever I adjust the line height, it affects the positioning of my logo as well. Is there a way to only modify the text position while keeping the logo centered? Chec ...

htmlcss

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

Fluid overlap of divs in Bootstrap framework

I am currently in the process of making style adjustments to a website at One specific change I've made is adding a top bar image. However, I've encountered an issue where the top bar graphic overlaps the navigation when the page is resized too ...

htmlcssgithub-pages

Utilizing Data Binding in D3.js

Why is the text "Hello" not appearing five times on the page as expected? index.html <html> <head> <title>Data Binding</title> </head> <body> <h1>D3.js</h1> <script src="https://d3js.o ...

javascripthtmld3.js

Is CSS treated differently in a Rails application?

There's something peculiar happening with two sets of identical html and css files that I have. One set is being loaded through Rails' index.html.erb file via a controller, while the other is running through my public folder as a control. The pub ...

ruby-on-railsruby-on-rails-3css

Improperly positioned Divs overlapping

Help needed: I am attempting to add a menu to a specific section. The menu div is extending off the page to the right, but it should be contained within the HOMEMENU section (the long black bar with no content). Despite using a clear:both div, the menu s ...

cssxhtmlhtml

automatically changing radio button selection based on dropdown choice

Let's address the issue at hand: I have a dropdown list with over three options, and alongside it, a radio group for yes or no responses. What I am aiming to achieve is setting the radio button to "no" when option 1 is selected, and to "yes" when any ...

javascripthtml

Adjust the size of the font in your Bootstrap Table

I've been utilizing the Bootstrap table feature and it's been fantastic, but I've encountered an issue with changing the font size. I've referred to the example on , however no matter what adjustments I make to the size, it doesn' ...

javascripthtmlbootstrap-4bootstrap-table

Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component. <div class="list-container"> <div class="row"> <div class="content"> Sample Content 1 </div> <div class="action"> ...

cssangulardomcss-position

Python KeyError: Implementing a Strategy for Displaying Two Divs Side by Side Efficiently with Dynamic Data

media.py: http://pastebin.com/r1nxPzTQ This file contains a Python class with methods like __init__ and show_trailer(self). fresh_tomatoes.py: http://pastebin.com/bcdUYiiu It's a Python script that generates an HTML file and populates it using data ...

pythonhtmlcss

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview