How to center a progress bar in a div using Bootstrap

Looking to incorporate a Bootstrap progress bar as a loading indicator, aiming for the progress bar to be centered within the DIV at a specific width. However, aligning the progress bar in the center seems to be an issue.

When utilizing:

<div class="text-center">
    <img src="~/Content/Images/loading.gif" style="height:80px;" />
</div>

The image is successfully centered. Yet, when trying to replace it with a progress bar, it shifts to the left:

<div class="text-center">
    <div class="progress" style="width:200px;"> <!-- set to certain width -->
        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
            <span>
                Loading...
            </span>
        </div>
    </div>
</div>

Take a look at the Bootply Demo

Desire for the progress bar to be centered upon display.

htmlcsstwitter-bootstrap

Answer №1

I found that this piece of code was effective in resolving my issue.

.progressbar { margin-left: auto; margin-right:auto; }

Answer №2

Alternatively, you have the option to utilize Bootstrap's center-block class

<div class="text-center">
  <div class="progress center-block" style="width:200px;"> <!-- adjusted width -->
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
      <span>
        Loading...
      </span>
    </div>
  </div>
</div>

http://www.bootply.com/a0SXqv3g6N

Answer №3

Just wanted to share a tip to enhance Marcelo's answer, especially for CSS newcomers like myself

Make sure to identify the class where your progress bar is located:

In my case, the progress bar was within the "download > progress" class structure like this:

<div id="download" class="download">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="main_slider" class="carousel slide banner-main" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <h3>Programming languages 1</h3>
                            <div class="progress" style="width: 50%">

To apply Marcelo's solution in my style.css file, I placed it below the download css like so

.download {
    padding-top: 90px;
    padding-bottom: 90px;
    background: #fff;
}

.download .progress { margin-left: auto; margin-right:auto; }

The implementation worked perfectly, so don't shy away from CSS challenges - embrace them and keep coding on! ;)

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

Creating sibling classes with tailwind using the map function

Currently, I am combining tailwind, react, and nextjs to develop a website. My goal is to implement the check radio button technique to dynamically display different content on the website without relying on JavaScript. To streamline data management, I am ...

cssreactjsnext.jscss-selectorstailwind-css

Creating Functional Tabs Using CSS and JavaScript

I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today ta ...

javascriptjqueryhtmlcss

jQuery - Toggle between different behaviors when clicked

Issue I am attempting to switch between two functions when a button is clicked using jQuery's .toggle() method, but the button disappears as soon as the DOM is loaded. Script $(document).ready(function() { $("#panel").css({"height": "0%", "bo ...

jqueryhtmlanimation

Exploring Laravel 4: Navigating Tables with Relational Models

Edit: error fixed I am managing two interconnected Models: Project and Task. Their relationship is defined as follows: Project.php class Project extends Eloquent { public function tasks() { return $this->hasMany('Task'); ...

phphtmllaravellaravel-4

Tips for keeping images stationary while expanding on hover

Currently, I am in the process of developing my first website. My main goal is to create an image gallery that displays thumbnails of images and expands them when you hover over each one. Initially, I adjusted the sizes of the images to 100px*100px using H ...

htmlcssimage

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

The necessary attribute is malfunctioning. (HTML)

I am currently working on a signup page utilizing HTML and JavaScript. Everything was running smoothly until I added a function to navigate the user to the next page. The issue arises when the textboxes are left blank; upon clicking the button, the user is ...

javascripthtmlattributes

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

phphtmlcss

Guide on verifying the ng-valid status of all inputs within an AngularJS table

I'm working with a table where each row contains an input field. Here's the code snippet: When the save button is clicked, I need to go through each input and determine if it's ng-valid. <div class="line" data-ng-repeat="data in datas"& ...

javascriptangularjshtmlvalidation

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

javascriptjqueryhtmlsharethis

Automatically save a dropdown menu selection

Is there a way to automatically save the data selected in a drop down list without having to click on a save button? public ActionResult SelectFeedBack(int id) { YelloAdminDbContext db = new YelloAdminDbContext(); ViewBag.FeedBack ...

htmlasp.net-mvc-4asp.net-mvc-controller

Resolving odd SVG anomalies

I recently exported three SVGs from Sketch to include in HTML, but one of them (specifically the Twitter icon) is presenting a mystery with its appearance. All three SVGs were created in the same manner, using #999999 as the stroke color and having a stro ...

htmlcsssvgsketchapp

Retrieve the customized attribute from the chosen option within the datalist

Is there a way to retrieve the custom attribute "location" of an option selected from a datalist and display it? I understand that for a select element we can use selectedIndex, but how can this be achieved with datalist? <!DOCTYPE html> <html&g ...

javascripthtml

Running JavaScript code on a webpage using Selenium

I'm currently developing an automated script to enter a person's address details on a webpage. It's important to note that I did not create this webpage myself. While filling in the address details, I encountered an option to select the coun ...

javascriptjavahtmlselenium

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

firefoxcssshadow

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

htmlcss

Expanding Two HTML Elements to Fill the Screen Width Using HTML/CSS

This is the current setup: The screenshot spans the width of my screen. The image is aligned to the left side, while the Level information section remains fixed to the right of the image. This layout meets my requirements. However, I would like the border ...

htmlcss

Issue with connecting JavaScript to HTML button

I am currently working on a 10-second countdown feature for a game using Javascript and HTML. Currently, the code runs upon page load. However, I am facing difficulty in linking it to a button so that it triggers upon clicking. ...

javascripthtmlbuttononclick

"Exploring the process of utilizing AngularJS to open a .docx file in a new template

When attempting to open a .jpeg or .pdf file in a new template using an iframe, it was successful. However, the same approach failed when trying to open a .docx file. How can this issue be resolved? Angularjs code: $scope.openTemplate = function ($fpath ...

htmlangularjsiframe