Sistema de Cuadrícula React / Bootstrap: Las columnas responsivas no funcionan como se esperaba, sino que desbordan el contenido.

Estoy utilizando el sistema de rejilla de Bootstrap para hacer que esta lista (3 columnas) sea adaptable. También lo estoy usando con react.
El objetivo es que en pantallas grandes pueda mostrar las 3 columnas en una fila. En pantallas medianas muestro dos columnas en una fila y la última en la última fila. En pantallas muy pequeñas muestro cada columna en una fila.

Funciona, sin embargo, no está ajustando las columnas en cada fila, más bien se desborda.
¿Qué me estoy perdiendo?

<div classname="container-fluid">
    <div classname="row">
        <div classname="col-xs-12 col-sm-6 col-md-3">
            <div classname="col-tab">
                <h4>Encabezado 1</h4>
                <ul>
                    <li>prueba1</li>
                    <li>prueba2</li>
                </ul>
            </div>
        </div>
        <div classname="col-xs-12 col-sm-6 col-md-3">
            <div classname="col-tab">
                <h4>Encabezado 2</h4>
                <ul>
                    <li>prueba 3</li>
                    <li>prueba 4</li>
                </ul>
            </div>
        </div>
        <div classname="col-xs-12 col-sm-6 col-md-3">
            <div classname="col-tab">
                <h4>Encabezado 3</h4>
                <ul>
                    <li>Prueba 4</li>
                    <li>Prueba 5</li>
                </ul>
            </div>
        </div>
    </div>
</div>