troubleshooting Question
Bootstrap in-line form - need to change the width of several fields
I am trying to create an input form using Bootstrap and am using the IN-LINE FORM template. This works well for me, but the width of several fields in the form need to be increased. The documentation notes the following:
"May require custom widths Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required."
So, it seems there is a way to change the width of some form fields, but I cannot figure out how to do this. Below is the form as it now stands along with its code. Hopefully someone can help.
Thanks
![Form image with note on changes needed]()
"May require custom widths Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required."
So, it seems there is a way to change the width of some form fields, but I cannot figure out how to do this. Below is the form as it now stands along with its code. Hopefully someone can help.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br><br>
<form class="form-inline">
<br><br>
<div class="form-group" for="civilities">
<select class="c-select">
<option selected>Mme</option>
<option value="Mlle">Mlle</option>
<option value="M">M</option>
</select>
</div>
<div class="form-group">
<label class="sr-only" for="Nom" >Nom</label>
<input type="text" class="form-control" id="Nom" placeholder="Nom" >
</div>
<div class="form-group" >
<label class="sr-only" for="Prenom" > Prenom</label>
<input type="text" class="form-control" id="Prenom" placeholder="Prenom">
</div>
<br><br>
<!--BELOW IS A REPEAT OF ABOVE WITH THE LABELS SUPRESSED AND REPLACED BY PLACEHOLDER-->
<div class="form-group">
<label class="sr-only" for="Adresse" >adresse</label>
<input type="text" class="form-control" placeholder="adresse" >
</div>
<br><br>
<div class="form-group">
<label class="sr-only" for="ZIP" >zip</label>
<input type="text" class="form-control" id="ZIP" placeholder="ZIP" >
</div>
<div class="form-group" >
<label class="sr-only" for="Ville" > Ville</label>
<input type="text" class="form-control" id="Ville" placeholder="Ville">
</div>
<br><br>
<div class="form-group">
<label class="sr-only" for="mobile" >mobile</label>
<input type="text" class="form-control" id="mobile" placeholder="Mobile" >
</div>
<div class="form-group" >
<label class="sr-only" for="tel" > tel</label>
<input type="text" class="form-control" id="tel" placeholder="Tel : Maison">
</div>
<div class="form-group" >
<label class="sr-only" for="email" > Email</label>
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
<br><br>
<div class="form-group">
<label class="sr-only" for="Naissance" >Naissance</label>
<input type="text" class="form-control" id="Naissance" placeholder="Naissance l'annee" >
</div>
<div class="form-group" >
<label class="sr-only" for="nomresponsible" > nomresponsible</label>
<input type="text" class="form-control" id="nomresponsible" placeholder="Nom Responsible">
</div>
<div class="form-group" >
<label class="sr-only" for="exampleInputName3" > prenomresponsible</label>
<input type="text" class="form-control" id="prenomresponsible" placeholder="Prenom Responsible">
</div>
<br><br>
<label for="notes">Membre Notes</label><br>
<div class="form-group" >
<textarea class="form-control" type="text" id="notes" rows="5"></textarea>
</div>
<br><br>
<div class="form-group" >
<button type="submit" class="btn-primary">Valider la mise a jour</button>
</div>
<!--<button type="submit" class="btn btn-primary">Send invitation</button>-->
</form>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 20 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.