title: Angular change MatInput Size
body: <p>I am new to Angular 4 and started working with the material components, I copied a couple of example from the official documentation but didn't get the same result as the documentation : 
  <a href="https://i.stack.imgur.com/5bTvI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5bTvI.png" alt=""></a></p>
  
  <p>How do I get change the textbox width ?
  I tried style="width: 200px;" style="width:100%"; class="col-md-x" 
  But none of them worked, second thing is how to center that login container in the middle of the page ? I found a few answers here but none of them seems to be working as well, here is my code :</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 offset-md-3"&gt;
          &lt;md-card&gt;
            &lt;md-card-title&gt;Login&lt;/md-card-title&gt;
            &lt;md-card-content&gt;
              &lt;form class="example-form"&gt;
                &lt;div&gt;
                &lt;md-form-field class="example-full-width"&gt;
                    &lt;input mdInput placeholder="Username" type="text"&gt;
                &lt;/md-form-field&gt;
                &lt;/div&gt;
                &lt;div&gt;
                &lt;md-form-field class="example-full-width"&gt;
                  &lt;input mdInput placeholder="Password" type="password"&gt;
                &lt;/md-form-field&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/md-card-content&gt;
          &lt;/md-card&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>**</p>