<!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>
@charset "utf-8";
/* CSS Document */
.increase-width {
width: 300px ;
}
<!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">
<link rel="stylesheet" type="text/css" href="xampp2/htdocs/office_python/css/increase-width.css">
</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 increase-width" 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 increase-width" 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>
<style type="text/css">
.increase-width {
width: 300px ;
}
</style>
.increase-width {
width: 300px !important;
}
@charset "utf-8";
/* CSS Document */
<style type="text/css">
.increase-width {
width: 300px !important;
}
</style>
<!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">
<link rel="stylesheet" type="text/css" href="C:/css/increase-width.css">
</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 increase-width" 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 increase-width" 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>
href="C:/css/increase-width.css"
.increase-width {
width: 300px !important;
}
correct these 2 things and it will work fine..increase-width {
width: 300px !important;
}
<!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">
<link rel="stylesheet" type="text/css" href="C:\ColdFusion9\wwwroot\Office_15\css\increase-width.css">
</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>
<div class="form-group">
<label class="sr-only" for="Adresse" >adresse</label>
<input type="text" class="form-control increase-width" 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 increase-width" 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>
href="C:\ColdFusion9\wwwroot\Office_15\css\increase-width.css"
href="css/increase-width.css"
<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">
<link rel="stylesheet" type="text/css" href="localhost:8500/Office_15/css/increase-width.css">
</head>
http://localhost:8500/Office_15/BOOTSTRAP_TEMPLATE_formInLine.html
.increase-width {
width: 10px !important;
}
<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">
<!--<link rel="stylesheet" type="text/css" href="localhost:8500/Office_15/css/increase-width.css">-->
<link rel="stylesheet" type="text/css" href="css/increase-width.css">
</head>
.increase-width {
width: 150% !important;
}
In the code you pasted, the form inputs have a class "form-control"
so what you can do is create a NEW class to override bootstrap as below
Open in new window
Then add the newly created class to the input as shown in below code line:
Open in new window
Open in new window
adding the new class will override bootstrap and increase the width of the input (you can use same class for multiple inputs)
Above is just an example to increase width to 300px... you can adjust as per your requirements.
let me know if this works.
thanks,
Prasadh