CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
SBB
SBB

Reputation: 8970

Bootstrap Progress Bar

I am using bootstrap 3 and the progress bar to show a ranking on a leaderboard.

Leaderboard

Is there a way to customize this to not have it show the "Out of" part?

For example, its technically not progress to complete something, its just a rank that will be shown in the same manner. So really i just wanna be able to remove the box that its filling in but also make it so its round on the right side as well.

Here is what I am trying to accomplish

enter image description here

As a side question, any idea how to remove the padding on the div the progress bar is in so it aligns in the middle like the other content?

Upvotes: 4

Views: 5767

Answers (2)

Brian Ogden
Brian Ogden

Reputation: 19212

Just override the bootstrap .progress class styles:

.progress {
  background-color: transparent;
  border-radius: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.progress-bar {
    border-radius: 4px;
}

Make sure you do not alter the bootstrap.css file directly, just add the above style to your site.css file which should always come after bootstrap.css in any project so you can override bootstrap default styles for that custom look.

Upvotes: 1

Phil
Phil

Reputation: 164742

.progress {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

table .progress {
    margin-bottom: 0;
}

.progress-bar {
    border-radius: 4px;
}

See demo here (thanks Ohgodwhy) - http://jsfiddle.net/r4zkv/4/

Upvotes: 4

Related Questions