I have the following code and I'm trying to get both of these inputs aligned centered. Where is the problem in the code?
<div class='form'>
<form class="form-inline" role="form">
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">#</span>
<input class="text-center form-control" align="middle" placeholder="username" name="username" type="text">
</div>
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">P</span>
<input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
</div>
</form>
</div>
<style>
.text-center {
width: 50%;
}
div {
text-align:center;
}
</style>
Both inputs are still aligned to the left.
Inputs are not text, and cannot be centered using text-align. Target the element directly in your css, like so:
input {
display: block;
margin: 0 auto;
}
This will center the inputs within the parent element.
Related
I'd been trying to change the width of the search box in name="size" of my HTML template but can't do it even when I tried width:.
html:
<form class="form" method = "POST" >
<h1>Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container-fluid form-inline">
<input class="form-control" name = "name" type="text" placeholder="Name"/>
<input class="form-control" name = "size" type="text" placeholder="Size"/>
<button class="form-control fa fa-search" aria-hidden="true"></button>
</div>
</form>
css of the element:
input[name="size"]{
width: 50%;
}
Here's a codepen for better context:
http://codepen.io/tadm123/pen/ZLVWpd
I recommend using this method.
<form class="form" method="POST">
<h1 class="text-center">Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container ">
<div class="row">
<div class="col-md-4">
<input class="form-control" name="name" type="text" placeholder="Name" />
</div>
<div class="col-md-7">
<input class="form-control" name="size" type="text" placeholder="Size" /></div>
<div class="col-md-1">
<button class="form-control " aria-hidden="true"><i class="fa fa-search"></i></button></div>
</div>
</div>
</form>
Updated Codepen:
http://codepen.io/hunzaboy/pen/aJJpMK
It's getting overwritten by the bootstrap defaults. Specifically:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
You need to adjust your selector to fix the cascade:
.form-inline input.form-control[name="size"]{
width: 50%;
}
did you try size attribute?
<input type="text" size="15"/>
The input elements use by default display: inline;, you cannot define a width in elements who using that display, if your change the display to display: inline-block; you will can change the width of your element.
input[name="size"]{
width: 50%;
display: inline-block; /* <--- Here the change */
}
Suppose you have a class-name (defined in HTML) of inputText (name).
Adding these lines will help (clean-way/simple).
.inputText{
//...
width:200px;
transition: width .4s ease-in;
}
.inputText:hover, .inputText:focus{
width:400px;
}
In my html i have two input tags and i want them on the same line, after i search and try more code.
It doesn't change anything, what wrong is my code?
<div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline">
<input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
You have give some width for input["type="text"] or input["type="image"] like below:
Otherwise you cad custom class in form-control class and replease this class to .form-control
See Bootply link
.form-control {
float: left !important;
width: 90%;
}
.add_field_button {
float: right;
text-align: center;
width: 10%;
}
There is no need for a float:right in your code a form could simple be put
<input type="text">
<input type="text">
and they will show up beside each other also you should always put the type first
simply you can use display:inline-block to container of input tags
<html>
<body><div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline" style="display:inline-block"> //inline-block added here
<input class="form-control" type="text" name="meaning[]" id="meaning " style="float: right">
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Please use the below code for the same.
.inline input[type="text"] {
float:left;
margin:10px 10px 0px 0px;
}
<div class="form-group">
<label class="col-lg-3 control-label">Meaning:</label>
<div class="col-lg-8">
<div class="">
<div class="lnw">
<span class="inline">
<input class="form-control" type="text" name="meaning[]" id="meaning " >
<input type="image" src="/images/pjdict/plus.png" alt="Submit" width="48" height="48" class="add_field_button">
</span>
<br>
</div>
</div>
</div>
</div>
You are setting the type of your input field to 'image', which according to this page isn't valid in bootstrap, and in general isn't valid for html. I can only guess what you're trying to do, but from the way things look, you want:
a text input field
a submit button to the right of the text input field
an image instead of the regular submit button appearance
If that is accurate, take a look at the following snippet:
#formElementContainer {
margin-top: 60px; /* this is only important for display within this snippet */
}
#formElementContainer input[type='text'] {
width: calc(100% - 50px);
}
#formElementContainer input[type='submit'] {
background: transparent url('https://www.gravatar.com/avatar/eb603bf5dd01c06880fdb8e4e1d04df3?s=32&d=identicon&r=PG&f=1') center center no-repeat;
border: none;
width: 32px;
height: 32px;
}
<div id="formElementContainer">
<input type="text" />
<input type="submit" value="" />
</div>
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
I tried to give my form with one email input field and a button which is an image. My button and an input are aligned side by side. I want to center my form in the middle of the bootstrap container class, but nothing that I have tried has worked. I gave my form a width and margin:0 auto, but it didn't help at all.
HTML:
<div class="container">
<div class="text-box-two">
<span id="notification">BE NOTIFIED WHEN WE LAUNCH:</span>
</div>
<form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post">
<div class="col-sm-6">
<div class="form-group">
<input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/>
</div>
<div class="form-group button">
<input type="image" src="images/tree.png" name="submitEmail" class="button"/>
</div>
</div>
</form>
</div>
</div>
CSS:
.well.email-form{
background-color: #FFFFFF !important;
border: none !important;
border-radius: 1px !important;
}
#emailForm{
width:1115px;
margin:0 auto;
}
.form-group{
float:left;
}
#emailForm{
margin:0 auto;
}
.form-control{
height:102px;
border-radius:1px;
font-size:30px;
}
Use the Bootstrap framework to do this. Have a look at offsetting columns in the docs.
Try this in your container above.
<div class="container col-sm-8 col-sm-offset-2">
Here's a Fiddle with it working.
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;
}