Q:

Sistema de GRID bootstrap - col-xs-X não reconhece largura

Estou estudando bootstrap, e ao formular o sistema de GRID a col reconhece os valores LG, MD, SM, mas não reconhece o XS solicitado. Quando redimensiono o navegador para tamanho mobile ele sempre coloca a div solicitada em tamanho 12 (full).
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Bill Turner</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/estilo.css" rel="stylesheet" media="screen">  
</head>   
<style>
    .c{
        background-color:aquamarine;
        border-right:1px solid black;
    }
</style>
<body>
    <div class="container">

        <div class="row">
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>

        </div>

    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script> 
</body>

Ao redimensionar para mobile,ele apresenta o seguinte layout: 
Navegador redimensionado para resolução mobile
Alguém para me dar uma luz sobre o que estou fazendo de errado? 
Um print com o código completo, e as três formas de visualização:Codigo completo e 3 formas de visualização Como podem ver, tudo da certo, menos na COL XS. (Não printei a LG pois não tive espaço no mesmo print)

A:

Lendo a documentação você vera que houve uma alteração, ficou mais simplificado em vez de col-xs-N agora você pode apenas col ou col-N, veja abaixo:
Nesse exemplo, criamos 4 colunas informando no atributo class o valor col, veja elas estão na mesma linha porque o valor foi dividido entre si.

<!DOCTYPE html>
<html>
    <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-beta.2/css/bootstrap.min.css" />
        <style>
            .c{
                background-color:aquamarine;
                border-right:1px solid black;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 1</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 2</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 3</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 4</div>
        </div>
    </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

Por algum motivo o Snippet não funciona aqui no SOpt mas coloco a Print e pode testar que funciona.

Nesse outro exemplo informamos um valor N para col

<!DOCTYPE html>
<html>
    <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-beta.2/css/bootstrap.min.css" />
        <style>
            .c{
                background-color:aquamarine;
                border-right:1px solid black;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="c col-lg-12 col-md-12 col-sm-6 col-2">Esp 1</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-2">Esp 2</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-8">Esp 3</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-12">Esp 4</div>
        </div>
    </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>



A Primeira e a Segunda coluna ira ocupar 2 espaços na Grid, e a Terceira ira ocupar 8 espaços, e por fim a Quarta coluna que ocupara 12 espaços na Grid.

Por algum motivo o Snippet não funciona aqui no SOpt mas coloco a Print e pode testar que funciona.

Referência

Grid options

