I'm building a simple horizontal form for contact information that includes a text area for notes. There is a significant amount of empty space to the left of my that text area that I want to move the address block up into. I can't figure out how to get the form-groups to overlap, or if that's even possible. I've tried putting all of the phone 2 fields and address fields in the same column and using <br> to separate the lines, but that definitely doesn't come out right. Here's the relevant code and screenshots of how the form-groups appear. Any tips would be greatly appreciated.
<html>
<body>
<?php require_once ("includes/php/header.php"); ?>
<div class="container-fluid">
<form id="newContact" action="newContact.php" method="POST" class="form-horizontal">
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label">
Vendor
</label>
</div>
<div class="col-md-2">
<select name="vendID" class="form-control">
<option disabled selected value=""> - select a vendor - </option>
<?php
$result = vendorDB::getInstance()->vendorList();
while ($row= mysqli_fetch_array($result)):
?>
<option value="<?php echo $row["VEND_ID"];?>"><?php echo $row["VEND_NAME"];?></option>
<?php
endwhile;
mysqli_free_result($result);
?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label twoline-label">
First Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contFirst" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
Last<br/>Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contLast" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
E-mail Address
</label>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" name="contEmail" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 1
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone1" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1">
<select name="contPhone1Type" class="form-control">
</select>
</div>
<div class="col-md-1">
<label class="control-label">
Notes
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 2
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone2" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1" >
<select name="contPhone2Type" class="form-control">
</select>
</div>
<div class="col-md-6">
<textarea form="newContact" name="contNote" class="form-control"
rows="11" style="resize: none" placeholder="(optional)"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<label class="control-label">
Address
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr1" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<label class="control-label">
City
</label>
</div>
<div class="col-md-1">
<label class="control-label">
State
</label>
</div>
<div class="col-md-2">
<label class="control-label">
ZIP
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<input type="text" name="contAddrCity" class="form-control" />
</div>
<div class="col-md-1">
<select name="contAddrState" class="form-control">
</select>
</div>
<div class="col-md-1">
<input type="text" name="contAddrZip" class="form-control" />
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-3">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-ok"></span>
<input type="submit" class="form-control btn btn-primary" value="Save New Contact"/>
</span>
</div>
<div class="col-md-2 col-md-offset-3">
<span class="input-group-btn">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-repeat"></span>
<input type="reset" class="form-control btn btn-default" value="Reset" />
</span>
</span>
</div>
</div>
</form>
</div>
</body>
Phone 2/Text area form-group
First form-group of address block
CSS
td,
th{
text-align: left;
}
.nav-tabs{
margin-bottom: 20px;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a{
color: black;
border-top-color: #ccc;
border-right-color: #ccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border-color: #ccc;
border-bottom-color: transparent;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
color: white;
background-color: black;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: #6a6a6a;
}
.error{
color: #c00;
font-size: 125%;
}
.icon-input-btn{
display: inline-block;
position: relative;
}
.icon-input-btn input[type="submit"]{
padding-left: 2em;
}
.icon-input-btn input[type="reset"]{
padding-left: 2em;
}
.icon-input-btn .glyphicon{
display: inline-block;
position: absolute;
left: 0.65em;
top: 30%;
}
.tableheader{
border-color: black;
border-style: solid;
border-width: 0 1px 0 1px;
background-color: #D8D8D8;
font-weight: bold
}
.glyphicon{
top: 0px;
}
.form-horizontal .control-label{
display: inline-block;
vertical-align: middle;
float: none;
text-align: left;
padding-top: 0px;
}
.form-horizontal .controls {
display: inline-block;
margin-left: 20px;
}
To achieve your expected result , i have used div with class address, enclosing address fields and position:relative with top
.address{
position:relative;
top:-205px;
}
http://codepen.io/nagasai/pen/NAaNkK
HTML:
<html>
<body>
<?php require_once ("includes/php/header.php"); ?>
<div class="container-fluid">
<form id="newContact" action="newContact.php" method="POST" class="form-horizontal">
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label">
Vendor
</label>
</div>
<div class="col-md-2">
<select name="vendID" class="form-control">
<option disabled selected value=""> - select a vendor - </option>
<?php
$result = vendorDB::getInstance()->vendorList();
while ($row= mysqli_fetch_array($result)):
?>
<option value="<?php echo $row["VEND_ID"];?>"><?php echo $row["VEND_NAME"];?></option>
<?php
endwhile;
mysqli_free_result($result);
?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label twoline-label">
First Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contFirst" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
Last<br/>Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contLast" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
E-mail Address
</label>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" name="contEmail" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 1
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone1" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1">
<select name="contPhone1Type" class="form-control">
</select>
</div>
<div class="col-md-1">
<label class="control-label">
Notes
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 2
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone2" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1" >
<select name="contPhone2Type" class="form-control">
</select>
</div>
<div class="col-md-6">
<textarea form="newContact" name="contNote" class="form-control"
rows="11" style="resize: none" placeholder="(optional)"></textarea>
</div>
</div>
<div class="address">
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<label class="control-label">
Address
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr1" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<label class="control-label">
City
</label>
</div>
<div class="col-md-1">
<label class="control-label">
State
</label>
</div>
<div class="col-md-2">
<label class="control-label">
ZIP
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<input type="text" name="contAddrCity" class="form-control" />
</div>
<div class="col-md-1">
<select name="contAddrState" class="form-control">
</select>
</div>
<div class="col-md-1">
<input type="text" name="contAddrZip" class="form-control" />
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-3">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-ok"></span>
<input type="submit" class="form-control btn btn-primary" value="Save New Contact"/>
</span>
</div>
</div>
<div class="col-md-2 col-md-offset-3">
<span class="input-group-btn">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-repeat"></span>
<input type="reset" class="form-control btn btn-default" value="Reset" />
</span>
</span>
</div>
</div>
</form>
</div>
</body>
CSS:
td,
th{
text-align: left;
}
.nav-tabs{
margin-bottom: 20px;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a{
color: black;
border-top-color: #ccc;
border-right-color: #ccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border-color: #ccc;
border-bottom-color: transparent;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
color: white;
background-color: black;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: #6a6a6a;
}
.error{
color: #c00;
font-size: 125%;
}
.icon-input-btn{
display: inline-block;
position: relative;
}
.icon-input-btn input[type="submit"]{
padding-left: 2em;
}
.icon-input-btn input[type="reset"]{
padding-left: 2em;
}
.icon-input-btn .glyphicon{
display: inline-block;
position: absolute;
left: 0.65em;
top: 30%;
}
.tableheader{
border-color: black;
border-style: solid;
border-width: 0 1px 0 1px;
background-color: #D8D8D8;
font-weight: bold
}
.glyphicon{
top: 0px;
}
.form-horizontal .control-label{
display: inline-block;
vertical-align: middle;
float: none;
text-align: left;
padding-top: 0px;
}
.form-horizontal .controls {
display: inline-block;
margin-left: 20px;
}
.address{
position:relative;
top:-205px;
}
Hope this works for you
Related
I have a form, I have in this two fields inline because they are in a form-inline div, I want to put the label of these above the fields and not next to them. How to remove form-inline from them without affecting the fields?
Here is a CodePen
<main id="contact_part">
<article class="mb-5 row">
<h1>Nous Contacter</h1>
<div class="col-md-12">
<form action="" method="post" id="contact_form">
<div class="form-inline">
<label class="" for="name_contact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>
<label class="" for="lastNameContact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
</div>
<div class="form-group">
<label class="" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
</div>
<div class="form-group">
<label class="" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
</div>
</form>
</div>
</article>
</main>
#contact_part article {
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
#contact_part .row {
display: block;
}
#contact_part h1 {
font-size: 1.7rem;
text-transform: uppercase;
margin-bottom: 3rem;
text-decoration: underline;
text-align: center;
}
#contact_form {
width: 50%;
margin: 0 auto;
}
#contact_form .form-inline label {
}
#contact_form input, #contact_form textarea {
border: none;
border-bottom: 1px solid #C6C6C6;
background-color: #FFF989;
}
If I understand correctly you no need to use form-inline class instead use like below code. Your form will look good.
<main id="contact_part">
<div class="container">
<article class="mb-5 row">
<div class="col-12">
<h1>Nous Contacter</h1>
</div>
<div class="col-12">
<form action="" method="post" id="contact_form">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="name_contact">First Name</label>
<input type="text" class="form-control" id="name_contact" placeholder="First Name" required>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label class="custom-control pl-0" for="lastNameContact">Last Name</label>
<input type="text" class="form-control" id="lastName_contact" placeholder="Last Name" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="example#example.com" required>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="custom-control pl-0" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</article>
</div>
</main>
Code Pen.
Use col-12 instead of col-md-12 class for better performance. Don't use row without container or container-fluid. If you use only row it give you horizontal scroll bar. Your code will look like this.
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
Or
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
</div>
Fluid view or 100% Browser width
<div class="container-fluid">
<div class="row">
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
<div class="col-12">Content</div>
</div>
</div>
Hope this help!
Here you go, let me know if this works: https://codepen.io/luke-richter/pen/XWJVqWO
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
#contact_part{
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<main id="contact_part">
<div class="container ">
<div class="row">
<h2>Inline form with heading above inputs</h2>
</div>
<form action="#">
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-sm">
<label for="firstname" class="control-label">Firstname1</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name2</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name3</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-3"><br>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
Try this,
.form-inline label
{
margin-bottom:3em;
}
Or You can move the label outside the<div class="form-inline">
I want to make a html page with three sections and inside each section divide it to left and right. In each section I have three boxes and I want to put two boxes on the left and one box on the right following is the css and html code:
.leftbox {
width: 50%;
padding: 5px;
float: left;
}
.rightbox {
width: 50%;
padding: 5px;
float: right;
}
<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">
<h2 class="popup-header">Rotation Forms</h2>
<div class="newRotation-sections">
<h3>Details</h3>
<div class="newRotation-section-1" style="margin-top: 10px;">
<div class="leftbox">
<span>Mob</span> <br />
<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />
<span>Paddock</span> <br />
<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Date</span> <br />
<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />
</div>
</div>
<h3>Fencing options</h3>
<div class="newRotation-section-2" style="margin-top: 10px;">
<div class="leftbox">
<span>Available Today</span> <br />
<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />
<span>Paddock Allocation %</span> <br />
<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Required Result</span> <br />
<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />
</div>
</div>
<h3>Assign As Task</h3>
</div>
</div>
</div>
I receive the below result, I don't know why the fencing options jump to the right side.
Here is the image of my work:
I wrote up this using the Bootstrap Framework. It matches your image exactly.
There's a Codepen if you want to fork and play around with it. It's responsive, too.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>
<h4 class="mb-3 mt-3">Details</h4>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="mob">Mob</label>
<input type="text" class="form-control" id="mob" placeholder="Enter Mob">
</div>
<div class="form-group">
<label for="paddock">Paddock</label>
<input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Enter Date">
</div>
<h4 class="mb-3 mt-3">Fencing Options</h4>
<div class="form-group">
<label for="avail">Available Today</label>
<input type="text" class="form-control" id="avail" placeholder="NaN">
</div>
<div class="form-group">
<label for="allocation">Paddock Allocation %</label>
<input type="number" class="form-control" id="allocation" placeholder="100">
</div>
<div class="form-group">
<label for="result">Required Result</label>
<input type="text" class="form-control" id="result" placeholder="NaN">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h4 class="mb-3 mt-3">Assign As Task</h4>
<div class="form-group">
<label for="assign">Assign to</label><br>
<button type="submit" class="btn btn-success btn-md" id="assign">Add</button>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checked">
<label class="form-check-label" for="checked">I want to see this too.</label>
</div>
<button type="button" class="btn btn-success btn-md">Save</button>
<button type="button" class="btn btn-success btn-md">Cancel</button>
</div>
</div>
</div>
I'm not strong in frontend development :) I'm using bootstrap for created a form. But it isn't look fine. How could I align my input form in one column?
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
enter image description here
Use of display:table-*
table {
border-collapse: separate;
}
.form-inline {
display: table-row;
}
.form-inline label, .form-inline input {
display: table-cell;
margin: 0 0 5px 10px;
}
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
Try like this , bootstrap Horizontal form not support in bootstrap -4
Not supported ,use bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="Purchase Price">Purchase Price</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Loan Amont">Loan Amont</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Continue</button>
</div>
</div>
</form>
bootsrap-3 doc https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h
If you are using bootstrap 4 Try This :
<form>
<div class="form-group row">
<label for="exampleInputPrice" class="col-sm-2 col-form-label">Purchase Price</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group row">
<label for="exampleInputLoan" class="col-sm-2 col-form-label">Loan Amont</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group form-inline">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
https://jsfiddle.net/sv2j08dd/3/
Modulation:
Glass thickness:
css:
.inputs span{ display: inline-block; width: 60%; padding: 0 0 15px 0; }
.inputs span input{ width: 30%; float: left; height:25px;padding: 0 5px;}
.inputs{width: 100%;float: left;padding: 0 25px; box-sizing: border-box;}
.inputs label{width: 20%;float: left;}
How can I align the second field of the first column, with the first fields of the 2nd, 3rd, and 4th columns, as shown in the image below, and have it be responsive using Bootstrap?
.label1 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label2 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label3 {
width: 60px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label4 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label5 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label6 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label7 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
<div class="panel panel-default" id="period">
<div class="panel-body">
<form class="form-inline">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="form-group">
<label class="label1">sss</label>
<input type="text" class="form-control" id="pcode" size="9">
<input type="text" class="form-control" id="pcName" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label2">vvvv</label>
<input type="text" class="form-control" id="pcode" size="9">
<label class="label3">bbbb</label>
<select class="form-control" id="btnClear">
<option value="volvo">nnnn</option>
<option value="saab">nnnn</option>
<option value="opel">nnnnn</option>
<option value="audi">nnnnn</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label4">hhhhhh</label>
<input type="text" class="form-control" size="35">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label5">jjjjj</label>
<input type="text" class="form-control" size="35">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label6"></label>
<input type="text" class="form-control" size="35">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group">
<label class="label1">kkkkkkk</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">llllll</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">2</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">3</label>
<input type="text" class="form-control" size="20">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group">
<label class="label1">rrrrrra</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">ttttt</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">2</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">3</label>
<input type="text" class="form-control" size="20">
</div>
</div>
</div>
<div class="col-md-2">
<div class="row">
<div class="form-group">
<label class="label7">uuuuu</label>
<input type="text" class="form-control" id="pcode" maxlength="20" size="7">
</div>
</div>
</div>
</div>
</div>
<br><br>
</form>
</div>
</div>
Move your first .form-group row outside of your first column:
.label1 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label2 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label3 {
width: 60px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label4 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label5 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label6 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
.label7 {
width: 90px;
display: inline-block;
text-align: right;
padding-right: 10px;
font-weight: normal !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default" id="period">
<div class="panel-body">
<form class="form-inline">
<div class="container-fluid">
<!-- THIS PIECE MOVED -->
<div class="row">
<div class="form-group">
<label class="label1">sss</label>
<input type="text" class="form-control" id="pcode" size="9">
<input type="text" class="form-control" id="pcName" size="20">
</div>
</div>
<!---------------------->
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="form-group">
<label class="label2">vvvv</label>
<input type="text" class="form-control" id="pcode" size="9">
<label class="label3">bbbb</label>
<select class="form-control" id="btnClear">
<option value="volvo">nnnn</option>
<option value="saab">nnnn</option>
<option value="opel">nnnnn</option>
<option value="audi">nnnnn</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label4">hhhhhh</label>
<input type="text" class="form-control" size="35">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label5">jjjjj</label>
<input type="text" class="form-control" size="35">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label6"></label>
<input type="text" class="form-control" size="35">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group">
<label class="label1">kkkkkkk</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">llllll</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">2</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">3</label>
<input type="text" class="form-control" size="20">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group">
<label class="label1">rrrrrra</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">ttttt</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">2</label>
<input type="text" class="form-control" size="20">
</div>
</div>
<div class="row">
<div class="form-group">
<label class="label1">3</label>
<input type="text" class="form-control" size="20">
</div>
</div>
</div>
<div class="col-md-2">
<div class="row">
<div class="form-group">
<label class="label7">uuuuu</label>
<input type="text" class="form-control" id="pcode" maxlength="20" size="7">
</div>
</div>
</div>
</div>
</div>
<br><br>
</form>
</div>
</div>
I would like the left side of the button flush with the textboxes. I'm using bootstrap 3 if that makes a difference. Here is my html code for the form. I can add my CSS if that's necessary as well. Thank you.
h1 {
font-size:83px;
}
.btn-primary {
background: #ffffff;
border-color: #ffffff;
color: #f05324;
}
.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background: #ffffff;
border-color: #ffffff;
color: #f05324;
}
.panel-default {
border: none;
}
input[type="text"] {
color:white !important;
}
input[type="email"] {
color:white !important;
}
.model-content {
color:black !important;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.navbar-default {
background-color: #000000;
}
body {
background: #f05324 !important;
margin-bottom: 80px;
color: #ffffff;
}
.page-header, .panel-body, .panel, .panel-default, .col-lg-9, .row {
background: #f05324 !important;
}
.form-control{
background-color: #f05324;
color: #000000;
}
hr {
border-color: #ffffff;
background-color: #ffffff;
color: #ffffff;
}
.link {
color: #ffffff;
}
.page-header {
margin-top: 0;
}
.panel-body {
padding-top: 0;
}
.img-featured {
margin-top : 15px;
margin-bottom: 15px;
margin-right : 15px;
}
.img-project{
margin-top : 15px;
margin-bottom: 15px;
}
.show-onclick {
display: none;
}
.show-onclick1 {
display: none;
}
.block {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: // half the width of your img
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">NAME:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">EMAIL:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-sm-2 control-label">PHONE:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="major" class="col-sm-2 control-label">MAJOR:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="major" name="major">
</div>
</div>
<hr>
<div class="form-group">
<label for="itemForSale" class="col-sm-2 control-label">ITEM FOR SALE:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale1" name="itemForSale1">
</div>
</div>
<div class="form-group">
<label for="quantity" class="col-sm-2 control-label">QUANTITY:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity1" name="quantity1">
</div>
</div>
<div class="form-group">
<label for="price1" class="col-sm-2 control-label">PRICE:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price1" name="price1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg1" class="col-sm-2 control-label">IMAGE 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
</div>
</div>
<input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
</form>
If you want the left edge of the button to match up with the left edge of the text boxes then you just need to add an offset using the Bootstrap grid as follows:
<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
...
<div class="form-group">
<label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
</div>
</div>
<div class="form-group">
<!-- Adjust col-sm-X for the buttons to adjust their positioning
Could also add btn-block class to make the button span the column -->
<div class="col-sm-offset-2 col-sm-9">
<input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
</div>
<div class="col-sm-1">
<input id="submit" type="button" value="Submit" class="btn btn-default">
</div>
</div>
</form>
More details (and another example) can be found on the Bootstrap website: http://getbootstrap.com/css/#forms-horizontal
EDIT: Based on additional information in comments.