How to align vertically middle bootstrap alert dismiss button?
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
Fiddle: https://jsfiddle.net/b5asr9xj/4/
div alert-message is there just because I'm using jQuery.html to update content in it...
You could wrap your text in <p></p> tags and then set text-align: center; on them.
Updated fiddle
Does this solve your problem?
If you want to align it. Vertically in the middle you can do something like this with your current html.
.alert-message {
text-align: center;
button{
display: inline-block;
}
within your alert-message class you align the text to the center and you can then make it display inline(vertical).
see Updated fiddle
You can do like this for vertically middle.
Add parent div to position: relative;
See demo link here. https://jsfiddle.net/rhwxm3md/1/
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
CSS CODE:
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
Related
When I scroll the content of Dialog, right top close and right bottom Ok button also getting scrolled.
I want to make those button fixed, not to scrolled so that any time I can close the dialog.
This my code
<div md-dialog-content>
<button class="close" mat-button (click)="onNoClick()">
<mat-icon>close</mat-icon>
</button>
//here my table content
</div>
<div mat-dialog-actions>
<button id="matbuttonClosedownSide" color="primary" mat-button [mat-dialog-close]="null">Ok</button>
</div>
code to open model
const dialogRef = this.dialog.open(myModalComponent, {
width: '80%',
height:'80%',
panelClass: 'my-dialog',
disableClose: true ,
data:this.data[index]
});
I had the same problem, I did it like follows:
.my-dialog {
.mat-dialog-container {
position: relative;
padding-bottom: 50px; // height of your sticky footer
}
.sticky-modal-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid #efefef;
background-color: white;
padding: 10px 24px;
}
}
And then added the dialog buttons in a footer element:
<button class="close" matDialogClose>
<mat-icon>close</mat-icon>
</button>
<h1 mat-dialog-title>{{ modalTitle }}</h1>
<hr />
<mat-dialog-content> Dialog content </mat-dialog-content>
<footer class="sticky-modal-footer">
<button color="primary">OK</button>
</footer>
I ran into the same problem yesteday. After some research I found the mat-dialog-title and mat-dialog-actions directives. That did the trick for me:
<h3 mat-dialog-title>This is the sticky header</h3>
<mat-dialog-content>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet...</p>
</mat-dialog-content>
<mat-dialog-actions align="start">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="true">Accept</button>
</mat-dialog-actions>
You may need to fill the the <mat-dialog-content></mat-dialog-content> with more text to see the scrollbar. But it shows the basic idea: the header stays sticky above the scrollable content and the buttons stay sticky at the bottom.
My sample code is strongly inspired by this official Angular Material Dialog example: https://material.angular.io/components/dialog/examples#dialog-content
I have the following HTML
<h2 class="border-center-right mt-4">
<span class="bg-white float-left">CREDITCARDNAME</span>
<button type="button" class="btn btn-primary float-right">APPLY NOW</button>
</h2>
I'm using Bootstrap 4. The border is currently overlapping the "Apply Now" button. How can I make it so the border sits behind the button?
THANKS!
I added the code to the following Fiddle: https://jsfiddle.net/katzumi/98c5q2cf/
And these are the border styles currently applied to <h2 class="border-center-right mt-4">:
You should be able to just remove float-left from your span.
I made the border red so it was easier to see against a white background.
<div class="container mb-5">
<h2 class="border-center-right mt-4" style="border-bottom: 1px solid red;">
<span class="d-inline-block bg-white">CREDITCARDNAME</span>
<button type="button" class="d-inline-block btn btn-primary float-right">APPLY NOW</button>
</h2>
<div class="text-4-col">
</div>
</div>
https://jsfiddle.net/98c5q2cf/2/
Fixed! I reduced the width of the element &::after the border-center-right class.
#include media-breakpoint-up(sm) {
.border-center-right {
position: relative;
overflow: hidden;
&::after {
content: "";
display: inline-block;
height: 1px;
position: absolute;
top: 50%;
transform: translateY(-50%);
**width: 50%;**
background: $accent-secondary;
margin-left: 1rem;
}
}
}
I'm using angularJS with bootstrap, and I'm creating a modal that will show some infos when you click on a button.
As there will be multiple button around the page, I want that this modal pops up near the clicked button, like the modal top-left corner being on top of the button I clicked.
Is this possible? I tried multiple things and the modal always pops up in the middle of the screen.
Current code I'm trying is:
.modal.in {
position: absolute;
bottom: 0;
right: 0;
left: auto;
top: auto;
bottom: 0;
overflow: auto;
}
.testbox {
background: #fff;
color: #000;
padding: 10px;
min-height: 200px;
min-width: 300px;
position: absolute;
}
and here the htm page that has the modal content:
<div class="testbox">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title" ng-bind-html="title"></h3>
</div>
<div class="modal-body">
<span ng-bind-html="fullText"></span>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="close()"><i class="fa fa-close"></i></button>
</div>
</div>
</div>
</div>
I tried many things in the css but no one seems to be working, I could get something with position: fixed but of course only for one button.
Any ideas?
you might consider using bootstrap popover to do this.
here is an example
<button type="button" class="btn btn-danger popover-dismiss" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
I'm using bootstrap's class
<div class="btn-group btn-group-justified">
Buttons are perfect the way they are (I need them equally spaced and taking full length) but I would like a little space between them. I tried playing around with margins, width percentage and padding with no success.
Please see this codepen http://codepen.io/crhistian/pen/WwyWYM?editors=0100
HTML
<div class="panel-footer">
<div class="row">
<div class="col-xs-2">
<div class="row custom-row">
<div class="col-md-6">
<button class="btn btn-info btn-block">Cart</button>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-block">Checkout</button>
</div>
</div>
</div>
</div>
</div>
CSS
.custom-row {
margin-left: -5px;
margin-right: -5px;
}
.custom-row .col-md-6 {
padding-left: 5px;
padding-right: 5px;
}
For the first button in the div tag
.btn-group {
float: left;
width: 45%;
}
And for your other button (add "2" to the other buttons div tag class):
.btn-group2 {
float: right;
width: 45%;
}
Then you can add margins for the same classes if you want to position them better
I want to align vertically a button inside DIV using bootstrap.
So far the button is inside the div and in the same line but seems to be a bit lower.
Here is the code
<div class="alert alert-info " role="alert" ><div style="display:inline">Hello</div> <div style="float:right; display: inline-block;"><a class="btn btn-info " target="_blank" href="">Preview</a></div></div>
see the screenshot here
http://jsfiddle.net/8qhsbawe/1/
.alert-info span {
height: 34px;
line-height: 34px;
display: inline-block;
}