title: `col-xs-*` not working in Bootstrap 4
body: <p>I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:</p>
  
  <pre><code>&lt;h1 class="text-center"&gt;Hello, world!&lt;/h1&gt;
  
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12 text-center"&gt;
                &lt;h1&gt;vicki williams&lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The text-align works fine:
  <a href="https://i.stack.imgur.com/g5WcO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/g5WcO.png" alt="enter image description here"></a></p>
  
  <p>But when making the column equal to extra small like so:</p>
  
  <pre><code> &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-xs-12 text-center"&gt;
                &lt;h1&gt;vicki williams&lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Then the text-align no longer works:
  <a href="https://i.stack.imgur.com/HIIkx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HIIkx.png" alt="enter image description here"></a></p>
  
  <p>Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated.
  Here is my complete code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1 class="text-center"&gt;Hello, world!&lt;/h1&gt;
  
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-12 text-center"&gt;
                    &lt;h1&gt;vicki williams&lt;/h1&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;!-- jQuery first, then Tether, then Bootstrap JS. --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>