How can I do it so that the label and input elements are placed on the same row? Can anyone help me with this?
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
The for attribute of the tag should be equal to the id attribute of the related element to bind them together, however you don't have id in your input div..
try add this :
<input class="form-control" id="field1" name="fields[]" type="text" placeholder="Type something" />
Just place the label above the input element since both are inline elements by default:
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
Related
Im pretty new to HTML and bootstrap
I made a centered form but i want to add a small button (red cross) on the right of my "chapter title" input field and i dont know how do i do it
Current html:
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
what do i need to add or change
Use float-right along with the negative margin utility class, for example mr-n4...
<div class="container">
<button class="btn btn-text float-right mr-n4 close">
<span aria-hidden="true">×</span>
</button>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
</div>
https://codeply.com/p/CliBMjnlsN
#Zim's answer works, but I just don't like working with floats so I came up another solution with absolute positioning.
<form>
<div class="form-group form-group-with-extra-button">
<input type="text" class="form-control" placeholder="Chapter title" required>
<button type="button" class="btn btn-extra">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
.form-group-with-extra-button {
position: relative;
}
.form-group-with-extra-button .btn-extra {
position: absolute;
left: 100%;
top: 0;
color: var(--danger);
}
demo: https://jsfiddle.net/davidliang2008/1dpz0w52/24/
Thats not really what i wanted but i guess thats what im gonna stick to
<form>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Delete chapter</a>
<a class="dropdown-item" href="#">Add chapter before</a>
<a class="dropdown-item" href="#">Add chapter after</a>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" rows="10"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
i have two forms. One form for login and the other form for reset the password.
Now i want to set the both buttons (login, password reset) side by side.
But i don't know, how to do that.
And here is my code:
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
I hope you can help me.
Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.
From MDN:
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.
Example:
<form id="firstForm">
<button>Submit First form</button>
<button form="secondForm">Submit Second form</button>
</form>
<form id="secondForm">
</form>
Give your second form an id (e.g. "form2"), and add this CSS:
#form2 {
position: relative;
bottom: 25px;
left: 55px;
}
i changed css of two buttons, now it works, here you can run, nd see it's working now.
i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
</div>
</div>
</form>
<style>
#resetForm {
position: relative;
bottom: 37px;
left: 55px;
}
</style>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row" id="resetForm">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left; />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
Important note:
I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.
Better way to do
You should not use a second form to reset your first form.
You have to use only one form and add an input with type="reset"
By this way you can place your buttons side by side in only one line and reset works !
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
<input type="reset" value="Reset"/>
</div>
Live demo :
https://jsfiddle.net/20o2ahnr/
I'm very sorry if this is just a simple question but I'm really bad when it comes to alignment/positioning of elements and stuff like that so here it goes.
My problem is shown here:
http://imgur.com/a/xscLJ
I just want the glyphicon to appear beside the textfield not above it. Just that. I tried putting it inside the form tag but the result is the same. Here is my code.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"></span>
</div>
</div>
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
I also have a script that will show the glyphicon if the password is wrong. (it's basically a password-accepting textfield)
<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>
From http://getbootstrap.com/css/#forms-control-validation
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
Example fiddle: https://jsfiddle.net/s8p0xyyc/
if you are using bootstrap, you should use bootstrap to design the form
<?php
echo "<script type='text/javascript'>$('#loginwrong2').show();</script>";
?>
<div class="container">
<div class="row">
<div class="col-md-1">
<span id="loginwrong2" class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em; display:none;"></span>
</div>
<div class="col-md-11">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
</div>
PD: this is not a php question
Just add the right classes and move back the span with the incon inside the form
<div id="form" class="collapse in form-group ">
<form method="POST" class="form-inline has-feedback" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
<span id="loginwrong2" class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="color: red; font-size: 2em;"></span>
</form>
</div>
Thanks for everyone who answered! I got what I want by making a div for the glyphicon and a div for the form. Both divs has the display: inline-block in their styles.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"> </span>
</div>
</div>
<div style="display: inline-block;">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
Change your css make <span id="loginwrong2"> {position:absolute;left:12%;top:10%}
See this
http://www.bootply.com/BLgAr0zrLA
The requirement is a horizontal form group inside of a dropdown. When the user clicks the dropdown, they are able to enter text into the appearing text fields.
I am losing control over the width and margin of the form group when inside of the dropdown. For example, the following form group renders fine:
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value=""">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
However when embedding this same HTML inside of a dropdown wrapper, the text fields extend past the container and the margin is compressed.
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true">
Strikes
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li>
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
Is there an out of the box implementation of this? Otherwise do I just need to add custom styles for width of text boxes and margin?
Or am I just implementing something incorrectly?
I have edited some column widths and removed an extra " and added a class donotchange for removing the alignment error.
Here is my code
HTML
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Strikes <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li style="width: 280px;">
<form class="form-horizontal" style="display:block;">
<div class="form-group donotchange">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group donotchange">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group donotchange">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- No need. For checking Only-->
<div class="form-group">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Sample Button </button>
</div>
<div class="form-group">
<input type="text" class="form-control" id="strike-to" value="">
</div>
<!-- No need. For checking Only-->
</div>
CSS
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}
.form-horizontal .donotchange {
margin-right: 0px;
margin-left: 0px;
}}
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}}
Check my working code here http://www.bootply.com/N0lccYSCsg
Check whether it works as per your requirements.
Good day!
I am using bootstrap 3 and have this HTML:
<body>
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
<button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
</div>
</div>
</div>
</body>
fiddle
I want the final button to be spaced away vertically from the input-group div and not touching it.
An example I found using a form has the button spaced out: fiddle
and this is how I'd like my button. How can I get that?
Simply wrap each pair of <label> and <div class="input-group"> by a <div> having .form-group class. (Or just wrap the last pair if needed so)
The reason is that twitter bootstrap applies a margin-bottom of 15px to .form-group. You could also do this manually by giving the <button> a top margin or giving the last input a bottom margin.
EXAMPLE HERE
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
</div>
<div class="form-group">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
</div>
<button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
</div>
</div>
</div>