Can anybody please help me align the Cancel button to the right of the progress bar? I've tried float and display inline with no success, and I'm out of ideas.
Here's the code:
<div class="row">
<div class="progress progress-striped active" style="width: 500px; margin: 0px auto; height: 40px;">
<div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div>
</div>
<div style="display: inline;"><button class="btn btn-warning">Cancel</button></div>
</div>
Here's a fiddle of it demonstrating my problem:
Try to this Define pull-left of your div as like this
<br><br><br>
<div class="row">
<div class="progress progress-striped active pull-left" style="width: 500px; margin: 0px auto; height: 40px; margin-right:10px;"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
<button class="btn btn-warning pull-left">Cancel</button>
</div>
Demo
I added float:left to both the loading bar and the cancel button, plus some slight css to align the cancel button better such as top and left:
UPDATED EXAMPLE
You are using Twitter Bootstrap so : Use the bootstrap class instead of your hard style.
Fiddle : http://jsfiddle.net/wFLw5/1/
HTML :
<div class="row">
<div class="col-xs-10 progress progress-striped active"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
<div class="col-xs-2"><button class="btn btn-warning">Cancel</button></div>
</div>
I think The Little Pig is most correct in suggesting you use the actual Bootstrap styles. However, you can align the cancel button to the right of the progress bar by setting display:inline-block; on both elements, and then offsetting the cancel button.
Related
I'm trying to create a fixed footer from a jumbotron including a text area and a button. This is what I have now at the end of <body>:
<div class="jumbotron jumbotron-fluid position-fixed fixed-bottom">
<div class="container-fluid">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Message: </span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Send</button>
</div>
</div>
</div>
</div>
But this jumbotron doesn't stick to the bottom of the page. It stays about 50px above the bottom, it's so ugly and I don't know how to fix it!
Because the default .jumbotron has margin-bottom: 2rem;. Removing that bottom margin will fix the issue.
You can also do your custom style:
.jumbotron.fixed-bottom {
margin-bottom: 0 !important;
}
By the way, you don't need .position-fixed class. .fixed-bottom will do the fixed position for you!
I have this code:
<div class="panel-footer rounded" style="background-color: #B7B56E">
<button class="btn btn-xs rounded" (click)="refreshNow()" style="float: right"><span class="glyphicon glyphicon-refresh"></span><small>{{nextTick|date: 'mediumTime'}}</small></button>
</div>
and result appears as:
My question is: how do I align the button at the center of the panel?
PS: It should be inside the green panel.
First of all, remove float: right. Then text-align: center should do the job:
.panel-footer {
background-color: #B7B56E;
text-align: center;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
Delete float from button and add text-align: center to div element.
Here you go. Full bootstraps' classes used with no tricks. Just adding align-items-center solves the problem. But do not use the float style itself. If you use the CSS framework, please be so kind to read the docs. There are a lot of features which are enough for not to manipulate the styles for layout.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center bg-info">
<button class="col btn btn-outline-primary">Hello I'm centered</button>
</div>
</div>
you can do the following if you still want the button to be floated right, but centered vertically inside of your panel-footer div
.panel-footer {
background-color: #B7B56E;
overflow: auto;
}
.btnClass {
float: right;
}
<div class="panel-footer rounded">
<button class="btn btn-xs rounded btnClass" id="button" (click)="refreshNow()"><span class="glyphicon glyphicon-refresh"></span><small>12 Oct 2017</small></button>
</div>
I'd like to label my progress bars with a start and end label, directly below the progress bar.
For example:
[||||||||------------]
<Start Label> <End Label>
However I can't seem to find a simple way of doing this. Does Bootstrap support this or would I need to write some custom CSS to attach these labels?
Bootstrap doesn't come with labels there. Their version of labels is the text inside the progress bar that reads, for example, 60%. You can try something like this with CSS:
http://www.bootply.com/eZ9fFZwtmO
<div class="col-sm-6"><div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="start">Start</div>
<div class="end">End</div>
</div>
CSS:
.progress {margin-bottom:0;}
.start {float:left;}
.end {float:right; text-align:right;}
Why not use Bootstrap's built-in flex utility classes? Here's a codepen
<div class="container">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between">
<div>Start</div>
<div>End</div>
</div>
</div>
No extra css required.
I have a legend containing a button that I pull-right. Unfortunately, the button is too high. Please see a fiddle here.
<div class="container">
<div class="row pane" id="statistics-pane" style="">
<legend>Network<span class="btn btn-mini pull-right">Test</span>
</legend>
</div>
</div>
I would separate the pull-right class from your button, and wrap in a div, like
<div class="container">
<div class="row pane" id="statistics-pane" style="">
<legend>Network
<div class="pull-right">
<span class="btn btn-mini">Test</span>
</div>
</legend>
</div>
</div>
Maybe give it a top-margin to push it down a little?
legend .btn {
margin-top: 10px;
}
i am having problem with re-size browser window
when i re-size the window customer login button does not come within the body
how to fix that issue i have given margin on it thats the problem
<div class="inner clearfix" style="margin-left: 1000px;">
<div class="logo">
Customer Login
</div>
</div>
http://jsfiddle.net/48y2Q/1/embedded/result/
http://jsfiddle.net/48y2Q/1/
You gave it a fixed margin:
margin-left: 1000px;
So it'll be 1000px from the left all the time. Change it to the following, for example:
float: right;
You can do this to make it aligned to the right:
<div style="margin-right: 50px; text-align: right;" class="inner clearfix">
<div class="logo">
<a class="customerLogin" href="">
Customer Login
</a>
</div>
</div>