Bootstrap in-line form - need to change the width of several fields

jameskane used Ask the Experts™

on 2016-08-07

Bootstrap

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

<!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>

Open in new window

Comment

Watch Question

Do more with

EXPERT OFFICE^® is a registered trademark of EXPERTS EXCHANGE^®

View Solution Only

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-07

Hi James,
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

.increase-width {
	width: 300px !important;
}

Open in new window

Then add the newly created class to the input as shown in below code line:

<input type="text" class="form-control increase-width" placeholder="adresse" >

Open in new window

<textarea class="form-control increase-width" type="text" id="notes" rows="5"></textarea>

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

jameskane

Author

Commented: 2016-08-07

Many thanks for the reply Prasadh !

I implemented what you said, but must have misunderstood I'm afraid. I created the css file as shown below

@charset "utf-8";
/* CSS Document */
.increase-width {
	width: 300px ;
}

Open in new window

I then embedded it into the code as shown below - lines 11, 46 and 95.

Unfortunately there is no change to the form fields in question.

James

<!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>

Open in new window

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

well did you link the new css file to your page?

usually when you use bootstrap as framework, you have a CSS file as CUSTOM.CSS attached to the page, here you can put all your custom css rules and overrides...

do you have any such file... if yes, then put the new css code in that file... if not... just put the code in the page HEAD PART itself by using below code... this code should be put before the </head> tag AND AFTER the link where you call your bootstrap CSS files... it has to load last to override.

<style type="text/css">
.increase-width {
	width: 300px ;
}
</style>

Open in new window

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

update... sorry i noticed that you have already included the CSS file in your head...

so now just use the code in document itself as given above.

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

and you have excluded the !important after 300px..... that's why it is not overriding the bootstratp

again giving the code you have to use.

.increase-width {
	width: 300px !important;
}

Open in new window

try using this code in your "increase-width.css" file...
I am sure it will work

jameskane

Author

Commented: 2016-08-08

Sorry, I'm still missing something - no change to widths of form fields.

This is the increase-width css coding - with the correction

@charset "utf-8";
/* CSS Document */
<style type="text/css">
.increase-width {
	width: 300px !important;
}
</style>

Open in new window

This is the html page for the form. Line 11 shows the link to the css file
Lines 46 and 95 are the lines where the css is used.

<!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>

Open in new window

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

Ok 2 things I noticed...

1) The link to css is from a local file... it will work on your local machine, but not when you upload the file. (change it when you upload the files to path relevant to your root)

href="C:/css/increase-width.css"

Open in new window

2) The CSS code you have put is for when you want to include a style INSIDE A DOCUMENT... and not for an attached css file.

so you have to remove the below 2 tags from css file and save it.
remove a) <style type="text/css">
and
remove b) </style>

the css should JUST HAVE THE STYLE code...

.increase-width {
	width: 300px !important;
}

Open in new window

correct these 2 things and it will work fine.

thanks,
Prasadh

jameskane

Author

Commented: 2016-08-08

Hi Prasadh. First many thanks with your patience on this. I have made the changes as described below, but unfortunately it is still not working. No increase in width in either of the 2 form fields.

This is the css file now

.increase-width {
	width: 300px !important;
}

Open in new window

This is the page now. Changed the pointer to the CSS file Line 11
No change to other lines which use the css. Lines 46 and 95

<!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>

Open in new window

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

I created the same files on my desktop in a folder... and everything is working fine...

basically you have to check if the CSS link is ACTUALLY LOADING THE CSS OR NOT...

href="C:\ColdFusion9\wwwroot\Office_15\css\increase-width.css"

Open in new window

if it is NOT loading the css then our new style is not going to overwrite bootstrap..

so go back to the link and check if there is a mistake..

you must be using a local server like XAMPP. WAMP or MAMP...

your site will be in a folder inside the wwwroot....

if thats the case then your css link should be like below

href="css/increase-width.css"

Open in new window

check again and let me know ..

thanks,
Prasadh

jameskane

Author

Commented: 2016-08-08

Unfortunately still no luck I'm afraid.

I did change the address of increase-width.css and lined it up with the address of the page which contains the form. So I am inclined to rule that out as a cause of the problem.

However on looking at the bootstrap pointer between the headers (below) I realize that my bootstrap functionality is coming from a a url pointer to the bootstrap website. I have not installed it locally. SO my increase-width.css is not in the same css folder at that used for the main bootstrap functionality. Could this be the problem ?

Header extract from html page

<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>

Open in new window

Address of page which contains form.

http://localhost:8500/Office_15/BOOTSTRAP_TEMPLATE_formInLine.html

Open in new window

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

ok.. so as per your link address... in your computer (localhost) there is a folder "Office_15" and inside that folder is your website.. correct?

so there should be a folder inside "Office_15" by the name "css" and the file "increase-width.css" should be physically present there...

it does not matter where the bootstrap css is being loaded from... whether via CDN or from local folder...

you should change the link in your page header to what I am giving below:

<link rel="stylesheet" type="text/css" href="css/increase-width.css">

Open in new window

let me know what happens.

jameskane

Author

Commented: 2016-08-08

Getting there !!! You will see from the two images below that the two target fields have been enlarged. I also attach an image of the page before application of the increase-width.

page before making change with increase-width

However, I have found that it does not matter what value I use for PX in the increase-width definition. Using 3 or using 900 gets you the same size of target form elements. Don't understand this ???
I would like the size for the two targets to be 50% greater.

increase-width definition

.increase-width {
	width: 10px !important;
}

Open in new window

revised code between headers (note I have placed the css file at the same level as office_15, which is directly below wwroot.

<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>

Open in new window

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

Hi,
as I said, I have made a file on my machine to test out before I answer you... so sending you a screenshot with different widths set in CSS... it changes as per value given.

here is a picture of form with 10px, 300px & 500px width.

What I want to say is that I have showed you a way where you are able to target a specific element and change its properties/appearance via CSS.

now since you are using bootstrap... responsive design naturally kicks in..

so when you achieve satisfactory result on desktop for input width, you will also need to test it on various devices and set media queries to address the various devices and input widths to be shown.

let me know your views or any further questions.

Prasadh

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

I checked out using percentages... and after trying out various %

I think this should work for you and give desired width.

.increase-width {
	width: 150% !important;
}

Open in new window

again... keep in mind the responsive design & set media queries accordingly.. or this css will give unwanted results on some devices.

thanks,
Prasadh

jameskane

Author

Commented: 2016-08-08

I would like to understand why you were able to get the different window sizes while I can only get one size ? Is it because I have used the in-line 'template' and this is just constraining what adjustments can be made using an intervention such as 'increase-width'. In my case I cannot achieve your 500 px width, which is where I want to get to

Did you use in-line approach in your design ?

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

I have a folder for answering questions & i make new folder in it whenever I start answering a new question... this way I keep a track + copy of what I answer...

I did not use any particular approach.... I just copied the page code and made a page called "form.html" on my machine... and made a folder"css" with the css file and here I am answering your questions...

so basically I have not changed ANYTHING from your original question.... except add the css code and apply it to 2 inputs you wanted to be changed .

so everything I am saying should work perfectly fine... pls check if anything is missing

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

send me the full code for HTML page + CSS again so I can check if everything is ok ...

jameskane

Author

Commented: 2016-08-08

Many thanks Prasadh for all the time and patience you have given to my problem. I now have a form which I can use and would never have got here without you ! The associated techniques I acquired will stand by me.

Got some follow up questions which I would like to ask, but I'll leave that for another question.

Thanks again for the solution and the knowledge !

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

You are welcome :)

Prasadh BaapaatWeb Designer & Developer

Verified Expert

Commented: 2016-08-08

one tip... you should use a CUSTOM.CSS file for all such changes.... so that all overrides, any media queries etc. go in that single file

Do more with

Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial

Bootstrap in-line form - need to change the width of several fields

Premium Content

Premium Content