Aling a div on right - html

I have this a contact form and I need to float it at the extreme right of its container. How can i do it? I'm trying with everything but nothing happen. Maybe i have to set different class for columns? This is the code:
HTML
<section id="services" class="section text-center">
<div class="container">
<div class="col-md-6 map">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2694.5937634214993!2d8.0133807!3d47.5173021!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x9b610c417aa1ee02!2sZAG+Engineering!5e0!3m2!1sde!2sch!4v1443705863599"></iframe>
</div></div>
<div class="col-md-6 form">
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Firma" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Telefon" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
<!--/.container -->
</section>
CSS
.col-md-6.map { margin-left: -15px; }
.form-horizontal { width: 100%; float: right; }
.form-group { margin-bottom: -25px; }
.col-md-6.form { border: 1px solid red !important; }

Add col-md-offset-2
<div class="form-group">
// place col-md-offset-2 here for each input
<div class="col-sm-10 col-md-offset-2">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>

inside form-group either change col-sm-10 to col-sm-12 that will make your input fields take entire width of your form or if yo want them right aligned give float:right to your col-sm-10 div it will work

Not sure what you really want, but if you want the whole form being at the extrem right of the screen, you have to remove the fixed width of your div class="container" which is the reason you have white space on right side.
If you want input being on the right side of your red-bordered area, you should put "float:right" on the col-sm-10" class. Hope it helped you

Related

Placing DIV on the right side of form

I have a div in a form and i want to place the div on the right side of the form and the div must be fixed on the right side with the button. I don't know if this can be done but how can i get this done.
HTML
<form class="form-horizontal" method="post">
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-6">
<input type="text" class="typeahead form-control" id="name" placeholder="Name" name="name" required>
</div>
</div>
<!--i want to move this div to the right side of the form and fixed-->
<div style="background-color:white" class="move-right" id="move-right">
<legend style="text-align: center" >Heading <span></span></legend>
</div>
<div>
<button type="submit" class="btn ">Save</button>
</div>
</form>
</div>
If the content of the right should not overlap the other content you need:
.move-right { float:right; } in the css.
And reorder the html code to place the floating element above the others:
<form class="form-horizontal" method="post">
<div style="background-color:white" class="move-right" id="move-
right">
<legend style="text-align: center" >Heading <span></span></le zgend>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-6">
<input type="text" class="typeahead form-control" id="name"
placeholder="Name" name="name" required>
</div>
</div>
<div>
<button type="submit" class="btn ">Save</button>
</div>
</form>
otherwise, if the contents can overlap:
use the .move-right { position: absolute; right: 0px; } and .form-horizontal { position: relative; } css code.

Aligning a textarea besides several vertically aligned input elements

As shown in the image below, I would like to align a text area besides the vertically aligned several input elements. I am using bootstrap grid to achieve the required effect.
Currently, when I use "form-horizontal", all the items stack up in a single column, hence, the textarea lies under the phone input element.
I want it to be responsive. If I use margin property on the text area, then the inputs overlap each other and so, makes the UI look messy. It would be great if I could get your help.
Desired layout:
Current layout:
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="text" class="form-control" id="name" placeholder="NAME">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="email" class="form-control" id="email" placeholder="E-MAIL">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
<input type="tel" class="form-control" id="tel" placeholder="PHONE">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-md-6 col-lg-6 col-lg-offset-0">
<textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
</div>
</div>
</form>
</div>
You can do this by nesting columns. Create two columns (equal to 12 columns), then place another row inside each along with your columns that contain the form inputs. I imagine you want your input to use the entire space available so set the nested columns to col-*-12 so they utilize the entire parent columns width.
Working Example: Open at FullPage
form {
background: #f2f2f2;
padding: 20px 20px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="NAME">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="E-MAIL">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="tel" class="form-control" id="tel" placeholder="PHONE">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div>

How to place Bootstrap form inputs closer to eachother?

I'm building a form using Bootstrap in which I need to place many inputs on one line like if it where a Spreadsheet. So using the regular Bootstrap grid system I did this (snippet):
<div class="col-sm-1">
<div class="form-group">
<textarea placeholder="Description" class="form-control" rows="1" required></textarea>
</div>
</div>
<div class="col-sm-1">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
etc.
which results in:
Obviously that looks horrible. For this specific form I need to place the inputs closer to eachother so that they (almost) touch eachother.
Does anybody know how I can style this better? All tips are welcome!
You could override the padding on the col-sm-* with a class like this
.inputItem {
padding-left: 2px;
padding-right: 2px;
}
This might be useful.
You can adjust your column padding by media queries in the event you want the form to stack on smaller devices so the padding returns to normal.
#media (min-width: 768px) {
form .form-gutter >[class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
}
form .form-control,
form .input-group-addon {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
<div class="container-fluid">
<h1>Form </h1>
<div class="row form-gutter">
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<input placeholder="Contract rental" class="form-control" type="text">
<div class="input-group-addon">€</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Some</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Thing</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</form>

Align two input groups with different widths next to each other

I want to align 2 input groups, one with span 8 & other with 4 next to each other. I used form inline but it doesn't take the intended width.
<div class="form-inline">
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-8" placeholder="Username">
<!-- </div> -->
</div>
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-4" placeholder="Ref No.">
</div>
</div>
try the following css
.form-group{
float:left;
}
After playing around i found this solution:
HTML
<div class="row form-input">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="ref no.">
</div>
</div>
<div class="row form-input">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Monthly Rent">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Deposit">
</div>
</div>
CSS
.form-input, .form-input input{
margin-top: 10px;
}

How to align the form horizontally in the middle of the div in bootstrap

<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
I am using bootstrap.
And I want to align the form in the middle of this div col-md-12 column.
Any solutions for this?
Demo http://bootply.com/103569
Could use an offset like:
<div class="container">
<div class="row clearfix">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
</div>
</div>
</div>
or
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
http://getbootstrap.com/css/#grid-offsetting
You can have two solutions here with the property display.
One with inline-block:
.col-md-12 column {
text-align:center;
}
.col-md-12 column form {
display:inline-block;
}
Two with table :
.col-md-12 column form {
display:table;
margin:auto;
}
If you have a fixed width for the form you only need to add the margin:auto
Give your form a class
<form role="form" class="myForm">
and add the following style to it
.myForm
{
width: 480px;
margin-left: auto;
margin-right: auto;
}
http://bootply.com/103575
I would try adding
class="center"
to
<form role="form">
ending up with
<form role="form" class="center">
and creating the style declaration:
.center{margin:0px auto;}
keeping in mind that .center must have a set width that is less than the width of it's container.
Hope that helps.