there is an issue with aliging of forms...
Here is what I am trying to do...
make a contact form on the left and to the right put the logo of the company..
So two divs of col-md-6 are made.. on the first div i am putting the form with class of "form-horizontal"
Hence I am arranging Form labels in "col-md-2" and form fields in "col-md-4"
Yet those form labels and fields are coming side-by-side... check image...
Here is the code...
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-4">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
Please help people, on the verge of closing my first web-design project :)
I think this is your need, Please try this, this is not your need please give me the clear input,
<section id="contact">
<div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div>
<div class="col-md-6">
<div style="font-family:'MV Boli'; font-size: 20px;">
<h4>Reach Us</h4>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-12">
<input type="text" name="name" placeholder="Your name" class="form-control">
</div>
<label for="email" class="col-md-2 control-label">E-Mail</label>
<div class="col-md-12">
<input type="email" name="email" placeholder="Your E-Mail" class="form-control">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<img src="images/logo-vertical.png" class="img-thumbnail">
</div>
<section>
You don't need to make container col-md-12 for your form and image.Just make equal structure
<div class="container">
<div class="row">
<div class="col-md-6">
form here
</div>
<div class-"col-md-6">
// your image
</div>
</div>
</div>
Related
I have Select2 in wicket, and I want to add form validation on it. I use atributte required, but it doesnt work. I want that select2 after unsuccessful validation have red background, or at least red border. When I try to submit form with required attribute, It dont do any validation. Select where I try to do validation is origin country. Can someone give me a point, how to achive this behaiviour? Thanks for any help.
<wicket:head xmlns:wicket="http://wicket.apache.org/">
<style>
/*.form-group .form-control {*/
/* padding: 0;*/
/* height: 33px;*/
/* }*/
.p-0 {
padding: 0px !important;
height: 30px;
}
</style>
</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="form-group">
<div class="col-sm-3">
<input type="submit" value="Request" class="btn btn-danger"/>
</div>
<div class="col-sm-3">
<label for="quotationId" wicket:id="quotationIdLabel"></label>
<div>
<input wicket:id="quotationId" type="text" size="20"/>
</div>
</div>
<div class="col-sm-3">
<label for="product" wicket:id="productLabel"></label>
<div>
<select class="form-control" wicket:id="product"/>
</div>
</div>
<div class="col-sm-3">
<label for="contract" wicket:id="contractLabel"></label>
<div>
<input type="hidden" wicket:id="contract"/>
</div>
</div>
<div class="col-sm-3" style="padding: 0">
<label for="customer" wicket:id="customerLabel"></label>
<div>
<input class="form-control p-0" type="hidden"
wicket:id="customer" />
</div>
</div>
<div class="col-sm-3">
<label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
<div>
<select class="form-control" wicket:id="serviceLevel"/>
</div>
</div>
<div class="col-sm-3">
<label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
<div>
<input class="form-control p-0" type="hidden" wicket:id="equipmentType"/>
</div>
</div>
<div class="col-sm-3">
<label for="commodity" wicket:id="commodityLabel"></label>
<div>
<select class="form-control" wicket:id="commodity"/>
</div>
</div>
<span class="col-sm-3">
<label for="originCountry" wicket:id="originCountryLabel"></label>
<div>
<input type="hidden" wicket:id="originCountry" required/>
</div>
</span>
<div class="col-sm-3">
<label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="originDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
<div>
<input type="hidden" wicket:id="destinationCountry"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="destinationDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
<div>
<select class="form-control" wicket:id="shippingTerms"/>
</div>
</div>
</div>
<br/>
</div>
</div>
<div class="clearfix"></div>
</wicket:panel>
I think the problem is with hidden fields which can not be declared as required in HTML. You might need to use some hack to use a regular text field and hide it with CSS. See this answer: make hidden field required
I am using Bootstrap 3, what I want cover whole form on full page like attached image, in the image I am using kendo UI popup window. pop up window width is 1000px
Here is my HTML code,
<section class="container-fluid padding-rl">
<div class="row">
<div class="col-sm-3">
<div class="profile-box">
<img class="profile-picture" src="" alt="" />
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.FirstName" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1">Last Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.LastName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Email:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Email" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Mobile:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Mobile" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Phone:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.OfficePhone" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Account:</label>
<div class="col-sm-3" style="">
<input type="text" id="txtContactAccount" class="form-control" data-bind="value: selectedRecord.ContactAccount" />
</div>
</div>
</div>
</div>
</div>
</div>
Attached image
Thank you in advance
Unfortunately I don't see your code in your question. From the sample picture I'm guessing what you are looking to do is create a modal?
Take a look at bootstrap's documentation here:
Bootstrap JavaScript
Scroll down a bit to the part about modals, they have nice samples there too.
I cannot get this icon to sit inside the field, I can only get it either above or below:
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<i class="fa fa-user">
</i>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
.form-group i{
color: #ccc;
float: right;
margin-right: 6px;
position: relative;
z-index: 2;
}
I have tried reading nearly every post on here but I am getting quite frustrated.
I think what you were looking for was the class "input-group-prepend" This is from v 4.0.0 I don't know how it was done in previous versions. I think with the addon class like mentioned in previous answers, but this is what works for me:
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
Here is a full form demonstration with 3 input fields:
<form>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-pencil"></i></span>
</div>
<textarea class="form-control" placeholder="Message" rows="5"></textarea>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-outline-info btn-block btn-lg">
</form>
... and the final result is:
You can use input-group-addon class like this:
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<input type="text" class="form-control" id="inputFirstName">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
CODEPEN
Your code is good, Bootstrap 4 does not expose this feature but it actually has class inside. All you need to do is just add the class "input-group-text" next to "input-group addon".
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon input-group-text">
<i class="fa fa-user">
</i>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
Maybe this will help you.
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control" type="text" id="inputFirstName">
</div>
</div>
Try putting the css link of font-awesome before the bootstrap link.
I would like to design a two column horizontal form using Bootstrap V2.3.2. The following is the html:
<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputAppName" class="control-label col-xs-2">Application Name </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description </label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I find that the width of the input-text and textarea on the second column are smaller. I would like to extend them to take up the rest space. I tried to use the "input-block-level" class but the input-text and textarea will then not be on the same row as the label.
Can anyone help?
Thanks in advance!
The first thing to do is to don't use the Bootstrap 3 class...
Try Bootstrap 2 instead... Replace col-xx-[1-12] by span[1-12]
Your code with input in span11 :
http://www.bootply.com/119374
<div id="content" class="row-fluid">
<div class="span12 main">
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group row-fluid">
<label for="inputAppName" class="control-label span2">Application Name </label>
<div class="span10">
<input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;">
</div>
<div class="form-group row-fluid">
<label for="inputAppDesc" class="control-label span2">Description </label>
<div class="span10">
<textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
try this
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
I am Trying to Create a simple basic form , I am unable to achieve Horizontal layout when added input-append class to the form , it kicks the second input box to be displayed in the same line ? wondering where the CODE ERROR is ? please suggest what is causing issue
<body>
<div class="container">
<hr/>
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I would just put the input-append in an inner div
<div class="control-group">
<div class="input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" /> <span class="add-on">#</span>
</div>
</div>
</div>
Check this fiddle
.input-append has a display: inline-block Hence the issue