How to add a text after input text - html

I want to add "month" after the input in bootstrap, in the side of it.
I've tried span, pull-left nothing worked. Months is always below
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
JSFIDDLE

Just add form-inline to your form..
<form role="form" class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
Demo: http://www.bootply.com/119625

Try wrapping the elements and specifying the column widths:
HTML
<form role="form">
<div class="form-group">
<div class="pull-left col-xs-9">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<span class="col-xs-3">months<span>
</div>
</form>
CSS
span{
margin-top: 25px;
}
JS Fiddle: http://jsfiddle.net/7rYp7/2/

putting style="display:inline" into the actual input element in question has worked for me.
Listen, I know we are supposed to avoid using style and only use classes defined in CSS but I tried all the example above and this is the only thing that worked.

You can set the following in your CSS (overwriting the bootstrap.css)
.form-group input {
display:inline;
width: 50%;
margin: 5px;
}
You can also use a different selector to be more specific (instead of overwriting it for all inputs) UPDATED:
#exampleInputEmail1{
display:inline;
width: 50%;
margin: 5px;
}
.form-group label {
display: block;
}

Related

Everything inside form input is either overlapping or not showing

I was making a login form with animations. If there is only one input field, it works perfect but when I add other input fields, they overlap with each other and the animations don't work properly. The submit button and checkbox gets hidden.
<div class="form">
<div class="inputs">
<input type="text" autocomplete="off" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">username</span>
</label>
<input type="password" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">password</span>
</label>
<div class="hide">
<input type="checkbox" onclick="myFunction()">Show Password
</div>
<button>Login</button>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/j2dteaz0/1/
Any help is appreciated. Thanks
Absolute positioning require to use a relative positioning on a parent element.
.inputs > div {
position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
...
Edited Fiddle
edit 1 CSS rules for specified input type only
Change the following CSS property as this;
.form{
position: relative;
height: 50%;
width: 50%;
}

Legend Tag Not Rendering Correctly With Bootstrap Grid

I want to use the legend html tag to visually wrap a set of similar inputs in a form. It should look similar to how it does when one uses the legend attribute without bootstrap, like is shown here.
I made a bootply example which is here. As one can see: I am trying to create a legend which wraps the First Name and Last name input fields. The styling is not right.
I did already look at this question, but it is different than mine because I am attempting to use a legend within a grid.
Here's a way using custom CSS. Just add this CSS, and add .customLegend to the fieldset that will have a legend you want to display this way. Adjust the positioning, padding, etc as needed.
.customLegend {
border: 1px solid #e5e5e5;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0; left: 1em;
padding: 0 .5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<fieldset class="customLegend row">
<legend>Enter Your Name</legend>
<div class="form-group col-sm-6">
<label for="first_name">First Name:</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group col-sm-6">
<label for="last_name">Last Name:</label>
<input type="text" class="form-control" id="pwd">
</div>
</fieldset>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Unable to center align the label field of form

I want to center align my form w.r.t. page, but if i use the following, only text input field is getting aligned but label remains at left. How to resolve it?
<div id="passCode"></div>
<form class="form-horizontal">
<fieldset>
<legend style="color:#145FAC">Please Fill in the Online Form</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control formWidth" id="inputName" placeholder="Nam" />
</div>...</div>
</fieldset>
</form>
text-align: left is applied to control-label therefore it overrides "center" applied to the parent element. Try using this css below
.control-label, .form-control {
text-align: center;
}
Use this CSS for the form:
.form-horizontal {
margin: 0 auto;
width: 70%; //Change it according to the design.
}
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/722/
You can use the center tag, since you want the label to be centered.
<center>
<div id="passCode"></div>
<div class="container "> <!--center_div or center-block-->
<form class="form-horizontal">
<fieldset>
<legend style="color:#145FAC">Please Fill in the Online Form</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control formWidth" id="inputName" placeholder="Name" required>
</div>
</div>
</fieldset>
</form>
</div>
</center>
Bootstrap comes with a helper class .center-block. Try adding it to the label.
you could apply this CSS to form-control:
text-align: center !important;
text-align: -webkit-center !important
I have added Bootply sample to you please check this it may works for you http://www.bootply.com/wokazmuDbv

How to set form-group background color

I want to set the background color on form-group. To clarify what I exactly mean, look at the following picture
As you can see above that I marked the div with color, I want to set the background color from form-group.
I tried with the following css.
.signup-ctrl {
//margin-top: 60px;
.form-buffer {
margin: 30px 0px;
background-color: #006dcc;
}
}
and the html
<div class="col-md-5 portfolio-item">
<form>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="name" placeholder="Enter your name">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="email" placeholder="Enter your email">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="emailconfirm" placeholder="Enter email confirmation">
</div>
<div class="form-group form-buffer">
<input type="password" class="form-control" name="password" placeholder="Enter your Password">
</div>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="captcha" placeholder="Enter numbers from image">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
But it does not work, what do I wrong?
Your .form-group takes up exactly the same height as the input inside of it so every background color you add to it is actually hidden behind the input.
You could replace the top/bottom margins with padding to make the .form-group area actually bigger than the input:
.form-group {
padding: 30px 0;
background-color: #006dcc;
}
Your CSS is incorrect, it should be:
.portfolio-item form .form-buffer.form-group {
margin: 30px 0px;
background-color: #006dcc;
}
this will select the whole .form-group. Your mistake was nesting a CSS rule inside another.
Here is a fiddle of it
Sounds strange..!! but it doesnt work like that you have apply padding-bottom: XXpx inside the form-group of your choice instead of applying just background-color, and then it works for the length that you applied in the padding-bottom.

Increasing width for an inline form input?

<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control hello" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<input type="submit" class="btn" value="submit"/>
</form>
How would I make the middle input have a width of 500px? I tried wrapping it in a row with col-xs-10, but that also didn't work. Here is a jsfiddle demo.
The following CSS rule would work:
.form-inline .form-control.hello {
display: inline-block;
width:500px;
}
JS Fiddle: http://jsfiddle.net/uvdU8/3/
The simplest solution would probably be to add style="width:500px;" to the input.
Updated JSFiddle: http://jsfiddle.net/ThomasMcNaught/uvdU8/1/
If you want it to be applied through CSS then try an ID.
input#width {
width: 500px;
}
Demo: http://jsfiddle.net/ThomasMcNaught/uvdU8/2/