Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to create a form with the following layout on desktops:
Label1 Label2 Label3
input1 input2 input3
Label4 Label5 Label6
input4 input5 input6
On mobile devices, I want it to render with the following layout:
Label1
input1
Label2
input2
...
I am using bootstrap, but with no success.
Here my fiddle: https://jsfiddle.net/8t8u9aqy/
This will display 3 columns on medium devices and collapse down to one column on mobiles.
<form>
...
<div class='row'>
<div class='col-md-4 col-sm-12'>
...form element...
</div>
...Repeat for all form elements...
</div>
...
</form>
Use this bootstrap form layout with resposive
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="col-sm-12 col-xs-12">
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="text">text1:</label>
<input type="text" class="form-control" id="text1" placeholder="Enter text1">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="text">text2:</label>
<input type="text" class="form-control" id="text2" placeholder="Enter text2">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="text">text3:</label>
<input type="text" class="form-control" id="text3" placeholder="Enter text3">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="text">text4:</label>
<input type="text" class="form-control" id="text4" placeholder="Enter text4">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="text">text5:</label>
<input type="text" class="form-control" id="text5" placeholder="Enter text5">
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="text">text6:</label>
<input type="text" class="form-control" id="text6" placeholder="Enter text6">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Related
I have this html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative" type="text">
</div>
</div>
</div>
</div>
when I apply form-control then the input goes till the end of the parent container.
Here I will need to write numbers on the input so it will be too big.
How can I decrease its size ?
If I try to apply custom style
.form-control {
width:200px !important;
}
then it starts to be inline-block instead like block element.
You can use Bootstrap's column sizing on form controls. Here I'm using col-* for various sizes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-4" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-6" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-8" type="text">
</div>
</div>
</div>
</div>
See Bootstrap's column sizing docs.
I have an inline form that its input fields are more longer width than screen therefore some fields fall into new line.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Understanding the bootstrap column should not exceed 12 columns width per row, but since I have many fields I want those those fields go into one single row with scroll bar.
How can I do that? Even thought, I set style flex-wrap: nowrap; overflow-x: scroll; to class .row already, it is still not working. Thanks.
you achive this using adding flex-nowrap class in .form-row div
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row flex-nowrap">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Change the col-2 class to just col and everything lays out on one line.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I have 2 textboxes in an input-group, seperated by an input-group-addon span. My problem is, I want textbox 1 to be wider than textbox 2. Textbox 1 is supposed to be the phone number (larger) and textbox 2 is an extension number (slimmer). I have a fiddle below:
https://jsfiddle.net/Lhhj7f5d/
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension"/>
</div>
</div>
Thanks!
You can set a width to your form
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension" style="width : 20px;"/>
</div>
</div>
or use css
You need to put your input tag inside a div with col-xs-*.
#phoneField .col-xs-3{
padding:0;
}
#phoneField .col-xs-3::after{
content: "-";
position:absolute;
margin:5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-6">
<div id="phoneField" class="input-group">
<div class="col-xs-3">
<input class="form-control" type="text" placeholder="Ext" maxlength="3"/>
</div>
<div class="col-xs-9">
<input class="form-control" type="tel" placeholder="Phone Number" maxlength="10"/>
</div>
</div>
</div>
</body>
</html>
I'm facing a problem I don't really know how to deal with.
I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)
I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them.
Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).
I would like the "Email" and "Telephone" to be scaped and to change their width
Please have a look at my code and the following image explaining it:
http://www.bootply.com/T8w3oRE3Sn
You were missing few things in the form group so I have wrapped things up. Hope it will help you :)
Below is the working snippet:
.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
Try this
IF you see it in large screen it will be inline.
You have to use form-inline class to make form inline.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to deal with good understanding of bootstrap grid system
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>
I'm stuck for a while on a scaling problem ...
When i resize the window(mobile) the "%" go below the input even with the 80% width, idk why he don't stay at right...
<html>
<head>
<!--<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<body>
<div class="col-md-6">
<div class="row form-inline text-center">
<div class="form-group col-md-3 form-inline text-center">
<label for="a">A</label></br>
<input id="a" name="a" type="number" class="form-control" style="width:80%;"/><b>%</b>
</div>
<div class="form-group col-md-3">
<label for="b">B</label></br>
<input id="b" name="b" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">C</label></br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">D</label> </br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
</div>
</div>
<body>
</html>
if anyone knows what's wrong ...
The '%' is taking up more then 20% of the width on small screens. A nice solution would be to use input addons available in bootstrap: http://getbootstrap.com/components/#input-groups-basic