How to Replace col-xs-* in Bootstrap 4

Solution with col-*

Bootstrap 4 grid offers responsive classes to define on what screens a specified layout works.

The extra small class (col-xs) applies a grid column class to the element when the screen is narrower than 576px.

If you want to apply an extra small class in Bootstrap 4, one important thing to know is that col-xs-* is dropped in Bootstrap4. Instead, you need to use col-*.

Example of using col-* instead of col-xs-* in Bootstrap 4:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2>Example of col-12</h2>
        </div>
      </div>
    </div>
  </body>
</html>

If you want to have a split into two equal parts, use col-6 as in the following example.

Example of using col-6 in Bootstrap 4:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>
    <div class="container">
      <div class="row">
        <div class="col-6 text-center">
          <h2>example of col-6</h2>
        </div>
        <div class="col-6 text-center">
          <h2>example of col-6</h2>
        </div>
      </div>
    </div>
  </body>
</html>