how can i place multiple inputs into a single row having responsive nature
I'm facing very difficult to place all inputs into a single row only 3 I'm able to place
I wanted to convert the below snippet into bootstrap so that I will be responsive:
here codepen:https://codepen.io/anon/pen/EpbjKL
html:
<div class="input-wrapper">
<div style="float:left;margin-right:20px;">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
css:
input, label {
display:block;
}
Question: how to convert above codepen output to bootstrap row,col-*
use this class col-md-auto to make width auto and d-inline-block to display column inline block (bootstrap 4)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
I think that you can see the example below,this may satisfy your need. Also,you can set the col-x-x property to place more that 3 input in one row.
row-col example
Related
Is there a limit on how many autocomplete attributes you can have in a single form? It seems if I have a variation of three or more autocomplete attributes on inputs the browser autofill still works. If I just have one attribute added it works just fine. Is there a reason why this is happening? I really cannot find an answer on the web or anyone else who is having this issue.
Has there been in the recent update where chrome just doesn't care for the autocomplete to be set to off or a random string like nope?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="text-center mb-3">Contact Me</h1>
Broken Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone" autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Working Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Form with autocomplete="off" broken Version
<form action="#" autocomplete="off">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required>
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
</body>
</html>
To fix this I just used Just-validate to make my own validations. This still allows for chrome autofill to work but now it won't bypass the default min character HTML attributes.
Please help me on this project. I want to align the Username and all the labels beside the textbox. Specifically on the left side of the textbox. I'm using the primary bootstrap from getbootstrap.com
This is my code:
<div>
<label>Username:</label>
<input type="text" class="form-control" placeholder="Username" tabindex="1"><br>
<input type="text" class="form-control" placeholder="Password" tabindex="2" float="right"><br>
<input type="text" class="form-control" placeholder="Company Name" tabindex="3" float="right"><br>
<input type="text" class="form-control" placeholder="Product Type" tabindex="4" float="right"><br>
</div>
You probably want to use the form-horizontal class for the form. Also, I noticed your inputs didn't have any name attributes, which I'm assuming you'll need. Documentation: http://getbootstrap.com/css/#forms
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="Username" tabindex="1" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" placeholder="Password" tabindex="2" />
</div>
</div>
<div class="form-group">
<label for="company_name" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="company_name" placeholder="Company Name" tabindex="3" />
</div>
</div>
<div class="form-group">
<label for="product_type" class="col-sm-2 control-label">Product Type</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="product_type" placeholder="Product Type" tabindex="4" />
</div>
</div>
</form>
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
I'm using bootstrap to design web pages. I have two major problems.Firstly, can't really figure out how to align fields in a form.Secondly, adjusting the fields(the width height etc..) in a form tag. Do I have to use css for each and every field? I tried doing that, but then the alignment gets messed up. Here's my code .
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="form-control">In Out Specifier</label>
<select class="form-control" id="processInOutSpecifier" name="inOutSpecifier" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="callDateLabel">Call Date</label>
<select class="form-control" id="callDate" name="callDate" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label>
<select class="form-control" id="callDate" name="callDateForamt">
<option>yyyy-MM-dd</option>
<option> yyyy/MM/dd</option>
<option> MM-dd-yyyy</option>
<option> MM/dd/yyyy</option>
<option> dd-MM-yyyy</option>
<option> dd/MM/yyyy</option>
<option>dd/MM/yy</option>
<option> MM/dd/yy</option>
<option> yyMMdd</option>
<option> MMddyy</option>
<option> dd.MM.yy</option>
<option> MM.dd.yy</option>
<option>MM.dd.yy</option>
<option>dd/MM</option>
<option>dd-MM</option>
</select>
</div>
<div class="form-group">
<label class="form-control">Call Time</label>
<select class ="form-control" id="callTime" name="callTime" >
<option></option>
</select>
</div>
<br><br>
<div class="form-group">
<label class="form-control" >Call Time Format</label>
<select id="callTimeFormat" class="form-control" name="CalltimeFormat">
<option>HH:MM:SS/12 HOUR</option>
<option>HH:MM:SS/24 HOUR</option>
<option> HH:MM/12 HOUR</option>
<option> HH:MM/24 HOUR</option>
<option> HH:MM/AMPM</option>
<option>HHMM/24 HOUR</option>
</select>
</div>
<div class="form-group">
<label class="form-control" >Trunk </label>
<input class="form-control" type="text" id="processTrunk" placeholder="Trunk">
</div>
<div class="form-group">
<label class="form-control" >Duration </label>
<input class="form-control" type="text" id="processDuration" placeholder="Duration">
</div>
</form>
</div>
Here's the fiddle
http://jsfiddle.net/core972/SMkZV/2/
Try this fiddle,
<div class="container">
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</form>
</div>
Check this DEMO 1
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
</div>
<div class="row" style="padding-top: 5px;">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="Username"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Password"/>
</div>
</div>
</form>
This another style you can create form Check this DEMO 2
You can try like this: Demo
<form name="registration_form" id='registration_form' class="form-horizontal col-md-8">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="firstname" class="form-control reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
<div class="col-xs-6">
<input id="lastname" class="form-control reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="username" class="form-control reg_name" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
<div class="col-xs-6">
<input id="password" class="form-control reg_name" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</div>
</form>
Form with label Demo
For more details refer Bootstrap Forms
Check this
Demo
<form name="registration_form" id='registration_form' class="form-inline ">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group col-xs-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group col-xs-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</div>
There is too much space between two form-groups, if i reduce the column size of the first one it goes on next line which i don't want. I would like email address to be closer to phone extension. Is there any way to do this without moving email address field with css left margins?
<div class="row">
<div class="form-group col-md-5">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
The total number of columns on a row is equal to 12.
You have set the class .col-md-5 on your first column which means it would take about 50% of the available width. And your next column starts immediately after that.
A solution would be to set a class with fewer column on your first form-group, let's say col-md-3. Here's a demo: http://output.jsbin.com/tipusi/1/
<!-- HTML -->
<div class="row">
<div class="form-group col-md-12">
<div class="inline-block">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="inline-block">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
</div>
<!-- CSS-->
.inline-block {display: inline-block;}
<div class="row">
<div class="form-group col-md-5 no-padding">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4 no-padding">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>
Add below css class
.less-padding {
padding: 10px !important;
margin: 10px !important;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}