SIMPLE GRID SYSTEM

Columnas

Tamaño definido automáticamente

<div class="container">
    <div class="row">
        <div class="col">1</div>
    </div>

    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
    </div>
    
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
    
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
    </div>
</div>

Tamaño definido manualmente

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-4 col-lg-2">1</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-8">2</div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">3</div>
    </div>

    <div class="row">
        <div class="col-xs-4 col-lg-3">1</div>
        <div class="col-xs-4 col-lg-6">2</div>
        <div class="col-xs-4 col-lg-3">3</div>
    </div>

    <div class="row">
        <div class="col-xs-4">1</div>
        <div class="col-xs-4">2</div>
        <div class="col-xs-4">3</div>
    </div>
</div>

Columnas anidadas

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-4">1</div>
                <div class="col-xs-4">2</div>
                <div class="col-xs-4">3</div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-4">4</div>
                <div class="col-xs-4">5</div>
                <div class="col-xs-4">6</div>
            </div>
        </div>
    </div>
</div>

Offsets

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

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

    <div class="row">
        <div class="col-xs-4 col-xs-offset-8">3</div>
    </div>
</div>