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
Related
I have not been able to keep a form-row set of buttons in line when associating labels with buttons. The behavior of a button assigned to a column width, such as col-3 is different than the behavior of a button assigned with an automatic width, col-auto.
The goal is to have all buttons vertically aligned with a text label above the button. The text label should follow the button's position as the viewport size changes. I've tried using .align-self-baseline which does not seem to have an effect.
If I add a blank label above the button with an autosized column it places the text to the left of the button instead of above it. The labels need to appear above the buttons as the target application is displaying on a mobile device with limited display port width. Here are snippets of both:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<form action="#">
<div class="form-row">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
</div>
<div class="col-auto text-center">
<label>undesired</label>
<button type="submit" class="btn btn-sm btn-outline-primary active" aria-pressed="true">Button 2</button>
</div>
</div> <!-- row -->
<div class="form-row mt-4">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Row 2 Button</button>
</div>
<div class="col-auto text-center">
<button type="submit" class="btn btn-sm btn-outline-primary align-self-baseline active" aria-pressed="true">Not aligned with Row 2 Button</button>
</div>
</div> <!-- row -->
</form>
</div>
The key is in the btn-block class - it gives display:block property to the buttons inside the div with col-4 class - if you remove it, the alignment will be similar
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<form action="#">
<div class="form-row">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button>
</div>
<div class="col-auto text-center">
<label>undesired</label>
<button type="submit" class="btn btn-sm btn-block btn-outline-primary active" aria-pressed="true">Button 2</button>
</div>
</div> <!-- row -->
<div class="form-row mt-4">
<div class="col-4 text-center">
<label>Desired</label>
<button type="submit" class="btn btn-sm btn-outline-primary btn-block active btn-block" aria-pressed="true">Row 2 Button</button>
</div>
<div class="col-auto text-center d-flex">
<button type="submit" class="btn btn-sm btn-outline-primary align-self-end active" aria-pressed="true">Not aligned with Row 2 Button</button>
</div>
</div> <!-- row -->
</form>
</div>
First button seems to break and i can't figure out what i did wrong. All seems in order to me.
<div class="row">
<div class="col-xs-4"
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
You haven't closed the second div opening tag. Also you need to close the row div.
<div class="row">
<div class="col-xs-4"> <!-- Close this tag -->
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
You haven't completed div tag. Along with that You have to close row class div
Hope this helps.
I have this issue:
The html is as follows:
<div class="row">
<div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
<form class="form">
<input type="text" class="form-control" />
</form>
</div>
<div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
<span class="push-buttons-away-from-search-bar btn-group" role="group">
<a class="btn btn-lg" href="">A link</a>
<a class="btn btn-lg" href="">Another link</a>
</span>
</div>
</div>
Can you think of a responsive (bootstrap) way of making the search bartake up all space it can, and leave space for the 2 buttons on the side.
Notice the spacing between the 2 buttons, the button grouping styling was getting in the way... Perhaps you suggest using button groups?
What you're likely looking for, assuming you're using Bootstrap 3, is Justified Buttons. Red: http://getbootstrap.com/components/#btn-groups-justified
Example:
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Right
</div>
</div>
</div>
JSFiddle: Note that this can be extended to more than one button.
Update
Since you need the input to scale without the buttons scaling, have you tried Segmented Buttons on an Input Group? Ref: http://getbootstrap.com/components/#input-groups-buttons-segmented
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Button One</button>
<button type="button" class="btn btn-default">Button Two</button>
<button type="button" class="btn btn-default">Button Three</button>
</div>
</div>
JSFiddle: Note this won't give you a space between the buttons.
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>
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>