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.
Related
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
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;
}
I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.
css form code
<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">
<div class="row-fluid">
<div>
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>
this is the picture of the above form
My challenge is to close the gaps on the areas pointed with arrows.
I am using this version of bootstrap
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
You can remove the margin-bottom that bootstrap adds to the class .control-group
.row-fluid div.control-group, div.form-actions {
margin-bottom: 0px;
}
div.my-form{
padding-bottom: 0px;
margin-top:0px;
padding-top:0px;
}
.control-group input,.control-group textarea{
margin-bottom: 0px;
}
form.form{
padding-bottom: 0;
padding-top:0;
}
UPDATED jsfiddle with your code
You can use this code:
input[type=text], .txtarea{
margin-bottom: 10px;
}
In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.
you need to add one class like this:
.splclass{
margin:0 !important;
padding:0 !important;
}
Add additionally in the form inline style like this:
<form style="width: 90%; height: 100%; margin-top:1px; padding-top:5px;" method="post"novalidate="novalidate" class="form well ">
i think it will helpful
Well if you don't want any space in between, you definitely don't want any margin. Move the CSS to it's own file:
.send {
width:100%;
background-color:#da291c;
}
.message {
width:100%;
}
.form {
width: 90%;
height: 100%;
margin: 0;
}
and html:
<div class="row-fluid">
<form class="form" method="post" novalidate="novalidate" class="form well">
<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea class="message" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary send" name="commit" type="submit" value="Send">
</div>
</form>
</div>
and you can see the fiddle here: https://jsfiddle.net/6j98311j/
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 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.