index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/12bool.css">
    <link rel="stylesheet" href="css/style.css">
    <title>12bool Framework</title>
</head>
<body>
    
<div class="container">

    <h1>12Bool Framework</h1>

<!-- row 1 -->
    <div class="row">
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-1">1 col xs</div>
    </div>

<!-- row 2 -->
    <div class="row">
        <div class="col-xs-2">2 col xs</div>
        <div class="col-xs-grow-1">1 col grow xs</div>
        <div class="col-xs-grow-1">1 col grow xs</div>
    </div>

<!-- row 3 -->
    <div class="row">
        <div class="col-xs-12">12 col xs</div>
    </div>

<!-- row 4 -->
    <div class="row">
        <div class="col-xs-8">8 col xs</div>
        <div class="col-xs-2">2 col xs</div>
        <div class="col-xs-2">2 col xs</div>
    </div>

<!-- row 5 -->
    <div class="row">
        <div class="col-xs-1">1 col xs</div>
        <div class="col-xs-2">2 col xs</div>
        <div class="col-xs-2">2 col xs</div>
        <div class="col-xs-6">6 col xs</div>
        <div class="col-xs-1">1 col xs</div>
    </div>

<!-- row 6 -->
    <div class="row row-padding">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-2">Nested 2 col</div>
                <div class="col-xs-2">Nested 2 col</div>
                <div class="col-xs-8">Nested 8 col</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6">Nested 6 col</div>
                <div class="col-xs-6">Nested 6 col</div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
<!-- row 7 -->
        <div class="row">
            <div class="col-xs-grow-1"></div>
        </div>
<!-- row 8 -->
        <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-grow-1"></div>
        </div>
<!-- row 9 -->
        <div class="row">
            <div class="col-xs-2"></div>
            <div class="col-xs-grow-1"></div>
        </div>
<!-- row 10 -->
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-grow-1"></div>
        </div>
<!-- row 11 -->
        <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-grow-1"></div>
        </div>
<!-- row 12 -->
        <div class="row">
            <div class="col-xs-5"></div>
            <div class="col-xs-grow-1"></div>
        </div>
<!-- row 13 -->
        <div class="row">
            <div class="col-xs-grow-1"></div>
            <div class="col-xs-grow-1"></div>
        </div>


    </div>

    <div class="container-fluid">

        <h1>Offset</h1>
<!-- row 14 -->
        <div class="row">
            <div class="col-xs-1 col-xs-offset-11"></div>
        </div>
<!-- row 15 -->
        <div class="row">
            <div class="col-xs-2 col-xs-offset-10"></div>
        </div>
<!-- row 16 -->
        <div class="row">
            <div class="col-xs-3 col-xs-offset-9"></div>
        </div>
<!-- row 17 -->
        <div class="row">
            <div class="col-xs-4 col-xs-offset-8"></div>
        </div>
<!-- row 18 -->
        <div class="row">
            <div class="col-xs-5 col-xs-offset-7"></div>
        </div>
<!-- row 19 -->
        <div class="row">
            <div class="col-xs-6 col-xs-offset-6"></div>
        </div>
<!-- row 20 -->
        <div class="row">
            <div class="col-xs-7 col-xs-offset-5"></div>
        </div>
<!-- row 21 -->
        <div class="row">
            <div class="col-xs-8 col-xs-offset-4"></div>
        </div>
<!-- row 22 -->
        <div class="row">
            <div class="col-xs-9 col-xs-offset-3"></div>
        </div>
<!-- row 23 -->
        <div class="row">
            <div class="col-xs-10 col-xs-offset-2"></div>
        </div>
<!-- row 24 -->
        <div class="row">
            <div class="col-xs-11 col-xs-offset-1"></div>
        </div>

    </div>

</div>

</body>
</html>