I have been working on angular app which contains multi layout i.e sidebar and main layout. I want to position my dialog box in main layout but it is displaying on top of total layout.
How to display it on only middle of main layout.
The reason the modal (or dialog box) is covering the whole view is because the .modal class uses a position:fixed with similar margins to both sides (via margin:auto) and a fixed max-width defined.
You didn't share your code, so I created a sidebar which would occupy 20% of the screen width; this means that the remaining 80% will our 'main layout'. Now to ensure that the modal is strictly within the confines of the 'main layout', we added a margin-left of 20% (which is exactly the width we have assigned to the sidebar);
relevant CSS:
.sideBar{width:20vw; background:lightblue; height:100vh;}
.mainArea{ width:80vw; height:100vh;}
::ng-deep .modal{margin-left:20vw;}
relevant HTML:
<div class='row'>
<div class='sideBar'>
</div>
<div class='mainArea'>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>{{closeResult}}</pre>
</div>
</div>
complete working stackblitz available here
I'm trying to align horizontally a h2 and bottom inside of a div using bootstrap and css. My code is below.
<div class="col-md-9">
<div class="alert alert-info">
<i class="fa fa-coffee"></i>
Use this form to update your profile.
</div>
<div>
<h3>Personal info</h3>
<button class="btn btn-danger" href="#">Edit</button>
</div>
</div>
You can try this
<div class="check">
<h3>Personal info</h3>
<button class="btn btn-danger" href="#">Edit</button>
</div>
.check h3,.check button{
display:inline-block;
}
Working JSfiddle
I have 2 buttons:
<div class="row pt-20">
<div class="col-xs-12 col-sm-6 text-right pr-20">
<a href="{!! URL::action('TournamentController#create') !!}" type="button"
class="btn border-primary btn-flat text-primary disabled text-uppercase p-10 ">{{ trans('core.see_open_tournaments') }}
{{--( {{trans('core.soon')}} )--}}
</a>
</div>
<div class="col-xs-12 col-sm-6 text-left pl-20">
<a href="{!! URL::action('TournamentController#create') !!}" type="button"
class="btn btn-primary text-uppercase p-10">{{ trans('core.create_new_tournament') }}
</a>
</div>
</div>
What I would like to achieve is align right/left when resolution > xs, and align center when res = xs.
What is the best way to achieve it???
I was thinking remove text-right in div, and use media queries to do it in css, but I think there is more elegant way to do it, isn't it????
Tx!
Create a class called text-center-xs and add the appropriate styles to your custom stylesheet:
#media (max-width: 767px) {
.text-center-xs {
text-align: center;
}
}
Using bootstraps btn-group-justified layout I have a group of buttons that looks like this:
But I need it to look something like this:
Is it possible to change bootstraps justified layout to accommodate something like this?
I know I can do it without using bootstraps justified layout, but I do need the button groups to take up the whole width and be the same width as other button groups.
The btn-group-justified class has a fixed table-layout so the child elements with a btn-group class act like table cells. You just need to change their width.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin-top: 10px;
}
.btn-group-justified > .btn-group:nth-of-type(odd) {
width: .25%;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-group-justified" role="group" aria-label="">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
</div>
</div>
</div>
</div>
</div>
Basically what I'm attempting to do it to get two buttons on the opposite side of the website but on the same row. Here's what it looks like:
And here's the code for what I have:
<div class="panel-footer"><!-- panel-footer -->
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div><!-- end panel-footer -->
And here's the CSS for the classes 'previous' and 'next'.
.previous {
text-align: left;
}
.next {
text-align: right;
}
Thanks. I'm using bootstrap if that helps.
Wrap them in two separate columns like this:
<div class="panel-footer row"><!-- panel-footer -->
<div class="col-xs-6 text-left">
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
</div>
<div class="col-xs-6 text-right">
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div><!-- end panel-footer -->
By the way, you can use the built in helper classes text-left / text-right like I've done on the column divs so you don't need to add the extra css. In that case you can remove the extra divs you've added.
I thought Bootstrap automatically does this floating for you if you wrap it in the div .row since it's based on a grid?
<div class="row">
<div class="pull-left">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
Bootstrap 4 Answer
The above answers are all Boostrap 3 specific, so I'm updating the accepted answer.
Glyphicons don't exist in Bootstrap 4, so you'll have to use something like Font Awesome
<div class="row">
<!-- panel-footer -->
<div class="col-6 text-left">
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<!--No glyphicons in Bootstrap 4. Insert icon of choice here-->
<span class=""></span>
</button>
</div>
</div>
<div class="col-6 text-right">
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class=""></span>
</button>
</div>
</div>
</div>
You can try what HaukurHaf said, it will work. Simple floating method.
Or you can also put those two .previous and .next divs in .col- classes and then wrap them in a row div. So it would read:
<div class="panel-footer">
<div class="row">
<div class="col-xs-6 previous">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="col-xs-6 next">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
This way your are following Bootstrap's column layout.
Another way is to use flexbox:
<div class="flexbuttons">
<button></button>
<button></button>
</div>
<style>
.flexbuttons{
display:flex;
justify-content: space-between;
}
</style>
I would use float in your css
.previous {
float: left;
}
.next {
float: right;
}
You can test this option here jsfiddle.
You need to float the divs containing the buttons to the left and right. Since you are using Bootstrap, I recommend that you use the built in .pull-right and .pull-left classes.
Give the previous div the .pull-left class and the next div the pull-right class.
You might have to make the next button come first in your html source.
You could also just add float:left; to your existing .previous class and float:right; to the .next class.
Better yet, just get rid of those previous/next divs and apply the pull-left/pull-right classes directly to the buttons.
2020+ Updated answer:
Bootstrap classes flex-box and justify-content
Font-awesome icons instead of glyphicons (Not in Bootstrap 4)
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-sm">
<i class="fas fa-arrow-left" aria-hidden="true"></i>
</button>
<button class="btn btn-primary btn-sm">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</button>
</div>