what is the use of form-group in bootstrap 4? - forms

I am currently working on creating a form and I don't Understand what is the use of form-group?
Below example contains form-group inside div
<div class="row">
<div class="form-group col-md-6">
<input type="text" placeholder=" Company Name *">
</div>
<div class="form-group col-md-6">
<input type="text" placeholder=" Contact Number *">
</div>
</div>
Below example doesn't contain form-group but still displays the same result then what is the purpose of form-group:
<div class="row">
<div class="col-md-6">
<input type="text" placeholder=" Company Name *">
</div>
<div class="col-md-6">
<input type="text" placeholder=" Contact Number *">
</div>
</div>


<div class="row">
<div class="col-md-6">
<div class="form-group ">
<input type="text" placeholder=" Company Name *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder=" Contact Number *">
</div>
</div>
</div>

Related

Center Bootstrap Contact Form

I'm setting up a contact form and I want this form to be centered on my page. But I don't want the full width (col-md-12) of the page. I only want the width of a col-md-6 at the center of the page. Problem is that because I select col-md-6, the form display on the left hand side of the page. How can I center it?
HTML:
<div class="container">
<div class="row">
<div class="col-md">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
</div>

The easiest way I see is adding two more divisions with col-md-3 on either side of your form div like this:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
<div class="cold-md-3">
</div>
</div>

Try adding "m-auto" class in your col-md-6 div. Like this:
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input t`enter code here`ype="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>

Form inputs in one line

I have grouped 3 inputs in one line (bootply)
<div class="container">
<div class="row">
<div class="form-group has-warning">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" placeholder="name" name="order">
</div>
<label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
</div>
<label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control" placeholder="AA" name="packetNumber">
</div>
</div>
</div>
</div>
and I want only the input with quantity has the color of the class has-warning. Is there a way to do that by keeping 3 inputs in one line?

Just remove has-warning class from the div which has class form-group and put a separate div above the quantity lable like below:
<div class="container">
<div class="row">
<div class="form-group">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" placeholder="name" name="order">
</div>
<div class="has-warning">
<label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
</div>
</div>
<label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control" placeholder="AA" name="packetNumber">
</div>
</div>
</div>
</div>

Edited Code In Bootply
Check It.

Horizontal form - Twitter Bootstrap

Today I copied literally a test piece of code from the twitter-bootstrap site into my code. I tried to get a horizontal form like in the example. but for some reason, I don't get a horzontal layout. My site http://073design.nl/kasopmaak/?
Code i used for horizontal form:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>

Your code works fine only when link with bootstrap version 2.3 DEMO1
Check this works in bootstrap 3
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>

Creating long forms in Bootstrap to be all one form, instead of multiple forms

I'd like to create a long form that is just all one form instead of a bunch of separate forms. Is this doable? I've reviewed all the Bootstrap Documentation and this seems to be the only way to do it. Does anyone know a way around this? Below is what I have, every field is a separate form, and I need it to be one.
<div class="row-container">
<div class="row">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="claimnumber">Claim Number</label>
<input type="text" class="form-control" id="claimnumber" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="insuredid">Insured ID</label>
<input type="text" class="form-control" id="insuredid" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="claimnumber">Patient ID</label>
<input type="text" class="form-control" id="patientid" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="Text1" placeholder="">
</div>
</form>
</div>
</div>
</div>
<div class="datecontainer">
<div class="date1container">
<div class="dateheading">Service Date</div>
<div class="datebody">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar" id="date" placeholder="00/00/0000">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">End</label>
<input type="text" class="form-control calendar2" id="date2" placeholder="00/00/0000">
</div>
</form>
</div>
</div>
</div>
<div class="date2container">
<div class="dateheading">Import Date</div>
<div class="datebody">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar3" id="date3" placeholder="00/00/0000">
</div>
</form>
</div>

It works with just one form... check this
http://jsfiddle.net/7LChZ/1/show/
<div class="container">
<form class="form-inline">
<div class="row-container">
<div class="row">
<div class="field-wrapper">
<div class="form-group">
<label for="claimnumber">Claim Number</label>
<input type="text" class="form-control" id="claimnumber" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="insuredid">Insured ID</label>
<input type="text" class="form-control" id="insuredid" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="claimnumber">Patient ID</label>
<input type="text" class="form-control" id="patientid" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="Text1" placeholder="" />
</div>
</div>
</div>
</div>
<div class="datecontainer">
<div class="date1container">
<div class="dateheading">Service Date</div>
<div class="datebody">
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar" id="date" placeholder="00/00/0000" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">End</label>
<input type="text" class="form-control calendar2" id="date2" placeholder="00/00/0000" />
</div>
</div>
</div>
</div>
<div class="date2container">
<div class="dateheading">Import Date</div>
<div class="datebody">
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar3" id="date3" placeholder="00/00/0000" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
What I change is, I remove all form tags and wrap them all with just one.

You should only use one <form> -tag and not multiple ones if you only need one form. You should place it after <div class="row">. And don't forget to close it correctly!

how to design a two column form using bootstrap 2.3.2 where the 2nd column takes up the rest space

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>