In my angular app I have a typical data entry form with the following three buttons at the end:
<div class="form-group">
<div>
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
</div>
<br />
<div class="form-group">
<div>
<button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
</div>
<br />
<div class="form-group">
<div>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>
</div>
Currently, all 3 buttons are stacked vertically.
What is the CSS syntax to place all 3 of them horizontally?
Removed <br> and the extra <div> tags
HTML:
<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
<div class="form-group">
<button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
<div class="form-group">
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>
CSS:
.form-group {
display: inline-block;
}
DEMO: JSFIDDLE
To remove whitespace between buttons refer Fighting the Space Between Inline Block Elements
Just Use:
.form-group {
float:left;
}
Working Example
Hope this helps.
Do not surround the buttons with div elements
<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
<button id="button2id" name="button2id" class="btn btn-default">Cancel</button>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
Related
as shown in the image,things are deranged a bit, maybe its because its inside a td.
is it possible to do that?
<td>
<div class="col">
<div class="input-group text-center">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-minus"> - </button>
</div>
<input type="text" class="form-control" value="1" size="1">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-plus"> + </button>
</div>
</div> <!-- input-group.// -->
</div> <!-- Col.// -->
</td>
You might try to remove the default Bootstrap padding and margin for td, p, button and try :
td {
padding: 0;
margin: 0;
}
You can place the buttons and form on the same line by adding display: inline-flex to .input-group
.input-group {display: inline-flex}
<td>
<div class="col">
<div class="input-group text-center">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-minus"> - </button>
</div>
<input type="text" class="form-control" value="1" size="1">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-plus"> + </button>
</div>
</div> <!-- input-group.// -->
</div> <!-- Col.// -->
</td>
I tried adding container and/or row div classes and also tried to add left position for all. How can I align these elements in a row with no css or minimal css changes ?
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
I am expecting to have [Go][Stop][ .... ][Submit] in same row. Link for the demo repl
Try to add this piece of css:
form {
display: inline;
}
<form> - is a block level element, so it breaks lines before and after itself. You have to make it behave as if it is an inline element to overcome the issue.
form {
display: inline;
}
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
Your form is set to display: block; change it to display: inline-block; and it will work like charm.
form{
display: inline-block;
}
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
Add display: inline-block to your form (.button_to):
.button_to {
display: inline-block;
}
You can also remove that styles with position: left because it's unnecessary.
Buttons
Here is my code, and i dont know how to place the buttons side to side. (btw I'm new at coding)
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Just put the buttons inside the same form and div
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Since you are using bootstrap, there are a few things you need to know:
.col class will not work without putting the class within .container and .row classes. The other important thing is that the column numeric sizes add up to 12; right now yours add to 20. So your code should look more like this:
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
</div>
</div>
Here is a codepen to show it working
Refer to Bootstrap documentation on grids as well
<div class="row second">
<div class="col-md-4 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
The buttons were in different columns, so it went one line down.
Read more about Bootstrap grid system
Before looking into the answer below, I suggest that you read about boostrap grid system. Each row has 12 columns.
Your first <div> used up 12 columns, and that's why the second button of the second <div> is on the new row/line.
More details can be found here:
Bootstrap: Aligning two buttons on the same row
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>
:)