I want to change save button will be first then prev button should be come
<input type="button" class="btn btn-primary float-right mx-3"name="firstprevious" onclick="mprev()" value="Prev">
<input type="submit" class="btn btn-primary float-right order-2"name="register" value="Save">
<div>
<input type="button" class="btn btn-primary pull-right mx-3 prev" name="firstprevious" onclick="mprev()" value="Prev">
<input type="submit" class="btn btn-primary pull-left order-2 save"name="register" value="Save">
</div>
CSS:
div{
display: flex;
}
.save{
order:1;
}
.prev{
order:2;
}
Try to add pull-left to your save button and pull-right to your prev button. Please let me know if it's work. Thanks
<input type="button" class="btn btn-primary pull-right mx-3" name="firstprevious" onclick="mprev()" value="Prev">
<input type="submit" class="btn btn-primary pull-left order-2"name="register" value="Save">
Related
As title, I want to create a input-group for number increase/decrease.
This is my code:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm" type="button">+</button>
<button class="btn btn-primary btn-sm" type="button">-</button>
</div>
</div>
Result
Expected result
You need to add py-0 for remove top & bottom padding and lh-1 for decrease line height of button. Your code should be as below:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm py-0 lh-1" type="button">+</button>
<button class="btn btn-primary btn-sm py-0 lh-1" type="button">-</button>
</div>
</div>
add p-0 in button so the code will like this :
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm p-0" type="button">+</button>
<button class="btn btn-primary btn-sm p-0" type="button">-</button>
</div>
</div>
Here is my HTML code:
<div class="text-right">
<form method="post" action="create_car_type.html">
<button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
Create a type
</button>
</form>
<form method="post" action="delete_car_type.html">
<button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
Delete a type
</button>
</form>
</div>
These two buttons are inside forms, which are inside a div. They are right aligned in this div, but I would like to display them inline. The way they are displayed currently is that one places above the other, which is something I want to avoid. Should I include something like display: inline somewhere? Where should this go?
add style="display: inline-block;" to form tags
<div class="text-right">
<form method="post" action="create_car_type.html" style="display: inline-block;">
<button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
Create a type
</button>
</form>
<form method="post" action="delete_car_type.html" style="display: inline-block;">
<button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
Delete a type
</button>
</form>
</div>
you can use a display: flex or display: inline-flex to your main div tag and this is the most easy way to make something inline. something like this
.text-right{
display: flex;
gap: 10px; /*also you can use gap to give a space between them*/
}
<div class="text-right">
<form method="post" action="create_car_type.html">
<button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
Create a type
</button>
</form>
<form method="post" action="delete_car_type.html">
<button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
Delete a type
</button>
</form>
</div>
I found some come to make a button that is also an input file with a label :
<label>
Import
<input type="file" hidden>
</label>
So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary" (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
The thing the label is actually a bit shorter than other buttons.
I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">
It works but now the text isn't vertically centered !
Is there a way to make it look like a normal button ?
You can remove the margin of that label like this:
(I would not recommend inline css).
.export {
margin: 0px;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary export">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary " (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
I have a web form that is using the Bootstrap framework.
I would like to right align the "Save" & "Cancel" buttons when the form is displayed on a full size screen.
What is the proper way to do this using Bootstrap 3 css?
<div class="row">
<div class="col-md-9">
<input type="reset" value="Cancel" class="btn btn-default btn-danger" />
</div><div class="col-md-3">
<input type="submit" value="Save" class="btn btn-default btn-success" />
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
</div><div class="col-md-3">
<input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
</div>
</div>
You need to add the pull-right helper class.
Docs: http://getbootstrap.com/css/#helper-classes-floats
Let's try this:
<div class="row">
<div class="col-md-9">
<input type="reset" value="Cancel" class="btn btn-default btn-danger pull-right" />
</div><div class="col-md-3">
<input type="submit" value="Save" class="btn btn-default btn-success pull-right" />
</div>
</div>
Just put pull-right in the class to make it right align. Note that if you want to re-order the button just put the right-most on the upper line.
Try using one of the helper classes of Bootstrap for floating of objects.
You can use .pull-left for float:left; or .pull-right for float:right;
This should align the buttons correctly on the right side and with the right paddings.
Source: Bootstrap Documentation
Try this:
<div class="modal-footer">
<button type="button" class="btn btn-danger">Cancel</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
This is what I've tried:
<div class="input-prepend input-append">
<input type="text" />
<div class="add-on btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" dir="ltr">http://</button>
<button type="button" class="btn btn-primary" dir="ltr">https://</button>
</div>
</div>
but the group-button's padding and margin made it ugly! you can see it in jsFiddle
How can I fix it?
Remove add-on from class="add-on btn-group"
Try changing your code to this:
<div class="input-prepend input-append">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" dir="ltr">http://</button>
<button type="button" class="btn btn-primary" dir="ltr">https://</button>
<input type="text" />
</div>
:)