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.
This bit of css worked for me.
.progress { margin-left: auto; margin-right:auto; }
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
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 ;)
Related
I have a leaderboard sort of thing, this is for something at work.
This is a bootstrap element and I want the numbers to be aligned to the right, the numbers should be vertically aligned. See example of how it currently looks on the image: enter image description here
Here is the code, I use EJS to for loop this, hence only 1 instance, I've translated all EJS elements to normal HTML:
<div class="card d-flex" style="display: inline-block; width: 350px; float: right; margin-right: 100px;">
<ul class="list-unstyled card-body mb-0 pb-0">
<li class="media mb-3">
<div class="media-body">
<div style="display: inline-block;">
<strong style="font-size: 20px;">Jordan</strong>
<p class="float-right pull-right" style="padding-left: 200px; font-size: 20px; font-weight: 650">12</p>
</div>
<div class="progress mb-1" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%; background-color: green" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
</div>
Tried using text-align, float, pull-right, text-right, mt-auto etc. doesn't do anything.
If you don't require it for some other reason you can replace display: inline-block with display: flex; justify-content: space-between
This should space it so it takes up the maximum amount of space between the 2 text elements and the length of the name wont effect the number position :)
I have a webpage with a loading menu that greys out the background while the loading menu is shown. The menu is last in the document as to be on-top of the rest of the page. However, when using Google's Material Icons, the icon appears above the loading menu.
My guess would be that the icons load last, and as such are infront of static parts of the webpage.
I would expect and prefer the icon to be behind the loading menu. How could I achieve this?
In addition, I use bootstrap. I do not believe that my issue resides with bootstrap, however it may be crucial to understanding the code snippits.
Snippit of buttons: (I included more than neccesary incase my issue resides outside the icons)
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Link:</span>
</div>
<input type="text" class="form-control" id="studentLink" value="<?=studentLink?>" readonly>
<div class="input-group-append">
<button class="btn btn-light h-100" onclick="copyLinkToClipboard()">
<span class="material-icons"style="font-size: 1em">
content_copy
</span>
</button>
</div>
</div>
Snippit of Loading Menu:
<!-- Loading Alert -->
<div class="d-flex justify-content-center align-items-center" style="position: absolute; top:0px; width: 100%; height: 100%; visibility: visible" id="loadingAlert">
<div class="bg-light opacity-75" style="position: absolute; top:0px; width: 100%; height: 100%"> </div>
<div class="shadow col-6 card bg-info text-white">
<div class="card-header">
<div class="d-flex">
<div class="me-2 spinner-border align-self-center"></div>
<div class="vr"></div>
<h3 class="mx-2 align-self-end">Loading:</h3>
</div>
</div>
<div class="card-body text-center">
<h1>Creating Session</h1>
<h3>Please wait</h3>
</div>
</div>
</div>
Thank you #Kip for the answer.
Add the css style 'z-index' to the loading element.
Example (Based upon my code snippit):
<div class="d-flex justify-content-center align-items-center" style="position: absolute; top:0px; width: 100%; height: 100%; visibility: visible; z-index: 1000" id="loadingAlert">
...
</div>
Note the section style="z-index: 1000".
This feels like a very clunky solution, as why would you need to update the z-index, but here the solution is.
I'm trying to create a rating indicator using bootstrap 4 progress bar. Following is what I'm trying to achieve. However bootstrap progress bar using flex hence I can't align the text in the left and right.
JSFiddle
HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="review__rating__stats">
<span class="review__rating__progress">
<span class="review__rating__level">5 Star</span>
<span class="progress">
<span class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</span>
<span class="review__rating__count">68</span>
</span>
</div>
</div>
</div>
You might have to set a width for .review__rating__count. The "3" was causing the misalignment because it's a single digit, whereas other counts are double digits, which take up more spaces.
Now you can even set .review__rating__stats as flexbox, then use flex: to set a default width for .review__rating__count.
Layout
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="review__rating__stats">
<div class="review__rating__progress">
<strong class="review__rating__level">5 Star</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 68%"
aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<strong class="review__rating__count">68</strong>
</div>
<div class="review__rating__progress" />
...
</div>
</div>
</div>
</div>
Styles
.review__rating__progress {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.review__rating__progress .review__rating__level,
.review__rating__progress .review__rating__count {
/* 10% is the default width for the level and count labels */
flex: 1 1 10%;
}
.review__rating__progress .review__rating__level {
text-align: right;
}
.review__rating__progress .progress {
margin: 0.25rem 1rem;
flex-grow: 8;
}
Result
demo: https://jsfiddle.net/davidliang2008/j4y70wfz/36/
Put each progress bar in row like such:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="container review__rating__stats">
<div class="row review__rating__progress">
<span class="col-sm-2 review__rating__level">5 Star</span>
<div class="col-sm-9 align-self-center">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<span class="col-sm-1 review__rating__count">68</span>
</div>
</div>
</div>
</div>
Note that the div that contains the progress bar must have the align-self-center class otherwise it won't be vertically centered.
I am trying to add a progress bar in the white space below the centered logo. But since I am using container-fluid I cant use "align-items-end" because for some reason it extends the container height more. Can someone tell me how I should change this so I can add a progress bar below the logo and not mess up the "Create" and "Explore" positioning? In this JSFiddle link, I have added the code I'm using.
https://jsfiddle.net/mrwadepro/zzf5j3fm/13/
Below is the progress bar I'm trying to add
<div class="row align-items-end">
<div class="row">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
You had a Bootstrap .row immediately nested within another .row. You should never ever do that. When nesting a .row must always be followed by at least one Bootstrap column. And besides, nesting is totally unnecessary in this case.
You are also using a lot of unnecessary custom css. Unnecessary because those tasks can be done by using native Bootstrap 4 classes. When you introduce unnecessary custom css hacks, you'll inevitably need more custom css hacks to fix the problems caused by the original css hacks.
Here's a clean code snippet that does the job without needing any custom css and without the align-items-end class (click "run code snippet" below):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col text-center">
<img src="http://i65.tinypic.com/29kpg7p.png" width="100" height="140">
</div>
</div>
<div class="row align-items-center">
<div class="col-6">
<a href="#" name="redirectCreate" onClick="redirectCreate()">
<h1 class="text-center">
Create</h1>
</a>
</div>
<div class="col-6 text-center">
<a href="#" name="redirectExplore" onClick="redirectExplore()">
<h1 class="text-center">
Explore</h1>
</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
I have the following html code, but I wanna put a gif in place of the progess bar.
<div class="modal fade" id="waitDialog" >
<div class="modal-header">
<h1>Processing...</h1>
</div>
<div class="modal-body">
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>
</div>
</div>
You can do that in several ways:
One way is to add the gif image as a background-image in your CSS file:
.progress .progress-striped active{
background-image: url("path/to/image.gif");
background-repeat: no-repeat;
}
<div class="modal-body">
<div id='progressBar' style='display:none;'>
<img src='http://www.barchart.com/shared/images/progress_bar.gif'/>
</div>
</div>
you can use the hide and show by jQuery
for example:
$("#progressBar").css('display','block');
$("#progressBar").css('display','none');
I wonder what stops you from using
<img src="path/to/image.gif"/>
instead of
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>
Try this, for example:
<img src="http://bit.ly/1GIHgLh"/>
That's not a random GIF! It really shows that something's loading :)