CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
DLeh
DLeh

Reputation: 24395

bootstrap center progressbar on div

I'm trying to use a Bootstrap progress bar as a loading indicator, and I want the progress bar to be a certain width with the whole thing centered in the DIV. But the progress bar doesn't seem to like being centered.

When I do:

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

The image is centered properly. But when I substitute it for a progress bar, it goes 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>

Bootply Demo

I want the progress bar to display centered.

Upvotes: 4

Views: 19008

Answers (3)

Sayantan Mandal
Sayantan Mandal

Reputation: 26

Just want to enhance the Marcelo answer, for those who are new to CSS (like me)

Remember to check the class in which your progress bar is located:

For me the progress bar was in "download > progress" class like:

<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%">

So in my style.css I have added Marcelo answer, below the download css like this

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

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

and it worked, so do not be afraid of CSS, keep on taking Panga(challenges) with code ;)

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362360

Or, you can just use Bootstrap's center-block class

<div class="text-center">
  <div class="progress center-block" 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>

http://www.bootply.com/a0SXqv3g6N

Upvotes: 6

Marcelo
Marcelo

Reputation: 4425

This bit of css worked for me.

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

Upvotes: 9

Related Questions