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>
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 am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap
Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.
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
I am entertaining the idea of using bootstrap for all future pages on our internal website. The following image looks and works great on all sized devices.
The issue is that I used one row containing two horizontal labels and inputs for each line. When the bootstrap resizes, the rows are merged. The issue is that the two columns are separate subjects and when the device view port is smaller, the right column should position itself underneath the left column. Instead they merge. Left column item 1 is first and then right column item 1 is second. I need it too be all of left column and then all of right column.
Any direction on this issue would be very helpful.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
text-align: center;
border: 2px solid blue;
}
h1{
margin: auto;
}
.body{
border: 2px solid blue;
margin-top: 10px;
}
.inline{
display: inline-block;
}
.no-margin{
margin: 0px;
}
label{
width: 140px;
margin-right: 5px;
text-align: left;
white-space: nowrap;
}
input{
margin-left: 0px;
margin-top: 10px;
}
.left_margin{
margin-top: 10px;
margin-left: 230px;
}
#media screen and (min-width: 768px){
label{
text-align: right;
}
input{
margin-left: 10px;
margin-top: 10px;
}
}
<div class="col-lg-12 header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-inline" role="form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The id must be unique.
col-lg-6 col-md-6 col-sm-12 col-xs-12 is equivalent to col-md-6.
Wrap up left and right columns of fields by two <div class="col-md-6"></div> blocks.
I guess you need to use the Horizontal form instead of the Inline form.
Place labels into <div class="form-group"></div> blocks.
Make labels left-floating and use the hidden: overflow; trick to fill all the remaining space by the non-floating block.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
h1.lead {
margin: 0;
padding: 12px;
}
.body{
border: 2px solid blue;
margin-top: 10px;
padding-top: 12px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-horizontal .control-label {
display: block;
float: left;
margin-bottom: 0;
margin-right: 20px;
padding-top: 7px;
white-space: nowrap;
}
.form-horizontal .form-control {
width: 100%;
}
.fill-free-space {
overflow: hidden;
}
<div class="header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input_left_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_1" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_2" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_3" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_4" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_5" placeholder="Left">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input_right_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_1" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_2" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_3" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_4" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_5" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_6" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_6" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_7" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_7" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_8" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_8" placeholder="Right">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>