Bootstrap
Bootstrap

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

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

jameskaneAsked: 2016-08-07

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

Experts Exchange Solution brought to you by

Enjoy your complimentary solution view.

Get every solution instantly with Premium. Start your 7-day free trial.

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

jameskaneAuthor 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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.

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

jameskaneAuthor 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

jameskaneAuthor 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

jameskaneAuthor 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

jameskaneAuthor 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 2016-08-08

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

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

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 2016-08-08

You are welcome :)

LVL 10

Prasadh BaapaatWeb Designer & DeveloperCommented: 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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

Bootstrap

From novice to tech pro — start learning today.

Bootstrap

By:

Adam Barney

Bootstrap 3.1: Fundamentals

Premium

Premium members can enroll in this course at no extra cost.
Learn More

70 lessons
Bootstrap

By:

Syed Raza

Bootstrap 4: Exploring New Features

Premium

Premium members can enroll in this course at no extra cost.
Learn More

13 lessons
R

By:

Thomas LeBlanc

Exploring SQL Server 2016: Intermediate

Premium

Premium members can enroll in this course at no extra cost.
Learn More

40 lessons
SQL

By:

Ken Mayer

70-642 R5 - Configuring Windows Server 2008 R2 Networ…

Premium

Premium members can enroll in this course at no extra cost.
Learn More

356 lessons
Scrum

By:

Patrick von Schlag

Scrum Product Owner

Premium

Premium members can enroll in this course at no extra cost.
Learn More

195 lessons
Project Management

By:

Shannyn Burch

Certification
Managing Project Teams

Premium

Premium members can enroll in this course at no extra cost.
Learn More

89 lessons
Windows OS

By:

Ken Mayer

Certification
Certification: MCP Microsoft Certified Partner - Installing and Configu…

Premium

Premium members can enroll in this course at no extra cost.
Learn More

288 lessons
IT Administration

By:

Randy Kohler

Certification
Certification: CPTC Certified Penetration Testing Consultant

Premium

Premium members can enroll in this course at no extra cost.
Learn More

16 lessons
IT Administration

By:

Patrick von Schlag

Certification
Certification: ITIL Service Operation

Premium

Premium members can enroll in this course at no extra cost.
Learn More

280 lessons
Microsoft Applications

By:

Patrick Loner

Certification
Certification: MOS Microsoft Office Specialist - Excel 2016 Part …

Premium

Premium members can enroll in this course at no extra cost.
Learn More

129 lessons