I'm a beginner of html form designer, I would like make a simple input-group in the html, which the output which text box width is different
That mean which surname textbox is shorter and FullName is longer
can you advise how to do it ?
<div class="row h-100">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" id="surname" class="form-control" style="width:80px">
<input type="text" id="FullName" class="form-control" style="width:100%">
</div>
</div>
Try this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
<input type="text" id="FullName" class="form-control" placeholder="">
</div>
</div>
You Forgot to remove this enter code here text in your surname field class="form-control"
<div class="row h-100">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" id="surname" class="form-control" style="width:80px">
<input type="text" id="FullName" class="form-control" style="width:100%">
</div>
</div>
</div>
Related
Desired result: "between X% and Y%", and the input groups, all on the same line.
This works with regular form fields, but not with input-group:
between
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
Use classes d-inline-flex align-items-center w-auto on input-group:
body { padding: 1em; }
input.form-control { width: 3em; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group d-inline-flex align-items-center w-auto">
between <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
and <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
you could try something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<label for="between" class="mr-2">between</label>
<input type="text" class="form-control" id="between" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="and" class="mr-2 ml-2">and</label>
<input type="text" class="form-control" id="and" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</form>
How to place lines between columns. This is the below code i am working on but still not working. is there any way we can add separator? i added the screen shot what i am expecting.
HTML Code:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Expecting to place this code to show lines:
<div class="col-md-2 col-sm-4">
<div class="line">|</div>
<div>OR</div>
<div class="line">|</div>
</div>
I want output like this.
|
Name | Email
OR
Phone Button |
|
I'm not sure if this is what you're trying to do.
.v-line {
width: 5px;
background-color: teal;
}
.or {
background-color: #e9ecef;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="d-flex flex-row">
<div class="d-inline-block w-50">
<div class="col">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="v-line d-flex align-items-center justify-content-center">
<span class="or">OR</span>
</div>
<div class="d-inline-block w-50">
<div class="col">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="col">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</div>
</form>
</div>
You can shrink the fields by one col unit, so that both the left and right fields are col-md-5. This will give them a total column span of 10, leaving 2 spare (as Bootstrap columns always total 12).
From here, you can add offset-md-2 to the right-most columns to create a gap composed of 2 columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *" required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col-md-5">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
Note that you cannot (easily) make the gap comprise of only 1 unit while keeping both columns the same length (as the total column count is even). However, you can make use of any combination of column + offset + column that totals twelve. For example, col-md-5 + offset-md-1 + col-md-6.
I know there is a better way to do this but right now this is I can remember. Basically, just create an empty col div in between the two columns:
<div class="jumbotron jumbotron-fluid controls">
<div class="container">
<form class="form-form-submit">
<div class="row">
<div class="col-5"`enter code here`>
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="surname" class="form-control" placeholder="Please enter your name *"
required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control"
placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div>
<div class="w-100"></div>
<div class="col-5">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control"
placeholder="Please enter your phone number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<div class="btn-group" style="padding-top: 25px;">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
What am I missing?
I can see the border of the container and it correctly shows the area that I have to work with.
However when I add the row (div) and offset(div) it is left justifying it.
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" class="form-control" />
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" class="form-control" />
</div>
</div>
</div>
</div>
I think I know what you are meaning, but I'm not sure. Do you mean like this?
If so, the class for that is:
class="text-center"
So you can change your code to this:
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label for="firstName">First Name:</label>
<input id="firstName" class="form-control text-center" type="text">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" class="form-control text-center" type="text">
</div>
</div>
</div>
Or you can add it to just the controls you want, for example just the input form controls.
Hope that helps!
Bootstrap can provide a great mobile experience, but desktops can also benefit from its scaffolding capabilities. So, when I develop forms I like to use the least amount of space possible. With that in mind I have improved on Demonic Penguin's code and your, as well. Like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
<div class="form-group">
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
You can also embellish your form by adding icons to the fields, like so:
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
</div>
For this implementation, you must add a FontAwesome CSS reference link to your page(s) that you can get from here: https://www.bootstrapcdn.com/fontawesome/
I am new to bootstrap and I have the following code.
<form name="filesearch" id="filesearch" method="post" action="index.cfm">
<div class="input-group col-lg-5">
<span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
<input id="mfr" name="mfr" type="text" class="form-control">
<span class="input-group-addon">Material Name</span>
<input id="mtrlname" name="mtrlname" type="text" class="form-control">
</div>
</form>
This is not an inline form and I am trying to put space between the first input and the second span. So between input id mfr and the span of Material Name.
You can use the grid instead of using multiple add-ons inside one group.
Place your inputs inside of XS columns, then reduce the padding of the columns so the space between the two inputs isn't as large.
See working Snippets.
*Sidenote: I places an additional example as the add-ons are so large that on a mobile device there is nearly no usable input space which may or may not matter.
.no-gutter >[class*='col-'] {
padding-right: 5px;
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
<p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>
<hr>
<div class="well">
<p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>