Here is the problem,
I want to just open popups successModal if(res != null || res != undefined) otherwise want to popups failureModal. But it pops up in background just after closing reserveModal.
Here is my code:
Here is my code:-
this.locolService.sendActivityRequest(requestObject).subscribe((res)=>{
console.log('response after sending request ', res.description);
if(res != null || res != undefined){
this.reserveModel.close();
this.modalService.open(successModal);
}
}, error =>{
this.errors = error.error.description;
this.errors = this.errors.replace("User","You");
console.log('error ', this.errors);
this.reserveModel.close();
this.modalService.open(failureModal);
});
}
Here is my component.html:-
<ng-template #requestSentModelSuccess let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Congrats! Your place has been reserved. A will of receipt will be sent on your email also<br /><br />Check My
Account
for your reservations</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Close</button>
</div>
</ng-template>
<!--MODAL-3-->
<ng-template #requestSentModelFaliure let-c="close" let-d="dismiss">
<div class="modal-header">
<h5 class="modal-title text-uppercase" id="">Error</h5>
<button type="button" class="close" (click)="d('Cross click')" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{this.errors}}<br /><br />Check My
Account
for your reservations</p>
<a type="button" (click)="onNewSearch(false)" class="btn btn-primary mybtngreen btn-lg text-uppercase">My
Account</a>
<a type="button" (click)="onMyAccount(false)" class="btn btn-outline-secondary btn-lg text-uppercase">New
search</a>
<div class="mt-2"></div>
<div class="clearfix"></div>
</div>
</ng-template>
I have referenced: requestSentModelFaliure as failureModal and requestSentModelSuccess as successModal using NgbModalRef.
I have this HTML:
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
How can I make <h4> element on the same row with the buttons on the right side?
You have to add the following CSS for the heading <h4>:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.
Bootstrap 3.3
You can set the class .pull-left to the <h4> element. So you don't need additional CSS rules:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
Bootstrap 4.0+
Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
You have to add some CSS for h4 and pull-left-class:
h4{
display: inline-block;
}
.pull-left{
display: inline-block;
}
example:
https://jsfiddle.net/y6f0ddLg/
End goal: Have X buttons covering full width of the div (justified) with margin between each button. So like '.btn-group .btn-group-justified', but with margin.
Bootply
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">No</button>
</div>
</div>
While searching, I found this SO solution: https://stackoverflow.com/a/33315549/5003918
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-success btn-sm">Yes</button>
<button type="button" id="btnCancel" class="btn btn-danger btn-sm">No</button>
</div>
This gives me the desired margin between the buttons, but does not give me the justified feature.
If I try to add '.btn-block' to the buttons, then they become width width, but each on a different line.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar text-center">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-ok'></i> Yes</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-remove'></i> No</button>
</div>
There is a similar SO question, but does not have a solution.
Bootply
Is this what you are after? It requires some CSS styling to add space between the buttons.
.btn-group {
padding-left: 5px;
padding-right: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>
Using bootstrap3 I would like to set the width of the input type="text" in the input-Group.
I found these two solutions, but in this way I set the total width of all elements and not only the input text width.
.paginator {
width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="paginator">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<div class="input-group input-group-sm">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default"> << </button>
<button type="button" class="btn btn-default"> < </button>
<button type="button" class="btn btn-default">Pag</button>
</div>
<input class="form-control" type="text">
<div class="input-group-btn input-group-sm">
<button type="button" class="btn btn-default">of 44</button>
<button type="button" class="btn btn-default"> > </button>
<button type="button" class="btn btn-default"> >> </button>
</div>
</div>
</div>
</div>
bootply
How do I set only the width of the text input with bootstrap?
Thank you
-- EDIT --
I tried to set an inline class for text input as suggested, but this is the result.
bootply edit
Nobody can help me?
Thanks
I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?
Bootstrap v3 & v4
Use btn-block class on your button/element
Bootstrap v2
Use input-block-level class on your button/element
Why not use the Bootstrap predefined class input-block-level that does the job?
Full-Width Button <!-- BS2 -->
Full-Width Button <!-- BS3 -->
<!-- And let's join both for BS# :) -->
Full-Width Button
Learn more here in the Control Sizing^ section.
Bootstrap / CSS
Use col-12, btn-block, w-100, form-control or width:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
In case some are noticing btn-block not working anymore in bootstrap 5.1+:
It was dropped in bootstrap 5.1 (changelog):
Breaking Dropped .btn-block for utilities. Instead of using .btn-block
on the .btn, wrap your buttons with .d-grid and a .gap-* utility to
space them as needed. Switch to responsive classes for even more
control over them. Read the docs for some examples.
You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
Source: https://getbootstrap.com/docs/5.1/examples/pricing/
If you want to make a stack of block buttons, the official docs recommend the following :
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons
I simply used this:
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
use
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
see: http://getbootstrap.com/components/#btn-groups-justified
You should add these styles to a CSS sheet
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.
In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row"><div class=" col-5 ">
<a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a>
</div><div class="col-5 ">
<a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a>
</div></div>
I would have thought this would be the most bootstrap-esque way of doing things:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12 to the button.
<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.
Update 2022:
You have multiple ways to make button full width.
You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
We can Use a Block Level Full-Width Button
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level button
</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>