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.
Related
I would like to connect multiple text inputs with the same layout as connecting text-inputs with appends. However, I am not sure how to do that. As per docs, it is only possible to append a button or text to a text-input:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<label class="input-group-addon">
<input type="checkbox">
</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
However, I would like to connect 2 text-inputs. But when I try, the inputs start stacking instead of beeing displayed next to eachother:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<label class="input-group-addon">
<input type="checkbox">
</label>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
How can I achieve what I want?
You have to change the width property of class .input-group .form-control to auto. It's currently 100%. That's why the input is taking the entire space.
Note: This will override the default behaviour, so you may add custom class name and then modify, if you want to avoid default modification.
I have the following code in bootstrap. I need to align the label with the checkbox but even after looking at some solutions, I have not been successful:
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label>
Show entities?
<input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
</label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
Considering if you are using bootstrap 4, you can do this to get that result
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>
<!-- or using inline form -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Show entities?
</label>
</div>
Try this code snippet hope it will help :
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label class="d-flex align-items-center"> Show entities? <input type="checkbox" id="inactiveEnt" name="checkbox" class="ml-3"> </label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
If you're using Bootstrap, just use a form-group. Create the label and reference the input by using a "for" attribute that matches the ID of the input.
<div class="form-group row">
<label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
</div>
</div>
If I understood what you want I think this can be the solution you are looking for (append classes btn and btn-default to your input element to align vertically to your label text)
<div class="row">
<div class="col-xs-12">
<span>
<input type="checkbox" class="btn btn-default">
</span>
<label class="form-label">here is my label</label>
</div>
</div>
here is the fiddle: https://jsfiddle.net/p9wud84v/1/
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