How can I align a button with the legend in bootstrap?
AngryHacker
Inside of a form I have a legend with a button:
<legend>Welcome Fictitious Employees
<div class="pull-right">
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
</legend>
The button aligns with the bottom border of the legend in IE and Firefox reasonably, while in Chrome the button renders over the line:
What can I do to align the bottom of the button with the line?
Petros Kyriakou
Using bootstrap so - this should be the same across all browser. Basically its because you were floating the button with the pull-right class.
<legend>
<div class="row">
<div class="col-xs-8 text-left">
<p>Welcome Fictitious Employees</p>
</div>
<div class="col-xs-4 text-right">
<button type="button" class="btn btn-primary " id="btnSave">Save</button>
</div>
</div
</legend>
To somewhat achieve a vertical alignment of the button and the paragraph use these css rules
p {
margin: 0;
line-height: 35px;
}
the drawback is that the line-height is fixed so if you change the button padding or dimensions in general you will have again inconsistencies so have that in mind.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
how can I align font awesome icon in bootstrap button?
- 2
how can I align font awesome icon in bootstrap button?
- 3
How can I align text in a button
- 4
How can I align text in a button
- 5
How can I align inputs and button styled link in bootstrap v4?
- 6
Bootstrap 4, How do I center-align a button?
- 7
How do I align the button to the bottom of the row/column in bootstrap?
- 8
How can I increase the size of a bootstrap button?
- 9
How can I align button in Center or right using IONIC framework?
- 10
How can I align my search button to the right?
- 11
How can I set background image of button to left-align?
- 12
How can I align YouTube embedded video in the center in bootstrap
- 13
How can I get my Twitter Bootstrap buttons to right align?
- 14
How can I vertically align the content of a grid element in bootstrap 3?
- 15
How can I center align a Bootstrap dropdown properly?
- 16
how can i align the addon boxes bootstrap - html
- 17
How can I make Bootstrap components align right?
- 18
How can I plot a legend in R without plotting symbols and still get it to align nicely?
- 19
Bootstrap how to align side by side a button and a link
- 20
Bootstrap 3, how to right align button on the navbar?
- 21
How right align bootstrap form button?
- 22
How to set an button align-right with Bootstrap?
- 23
How to align Bootstrap dropdown with triggering button
- 24
How to align button to center using Bootstrap
- 25
Bootstrap how to align side by side a button and a link
- 26
How can I align <label>,<input>, text, input fields, a real button, and a "<a> link button" properly and with the same font?
- 27
How can I align a radio button's text under the button itself
- 28
How can I align texts?
- 29
button vertical align bootstrap
Comments