Gutters

Twitter bootstrap Documentation

Horizontal gutters

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->grid([
    [
        [
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
        ],
        ['gutter' => ['horizontal' => '5']],
    ],
], ['class' => 'px-4']);

echo $this->grid([
    [
        [
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
        ],
        ['gutter' => ['horizontal' => '5']],
    ],
], ['class' => 'overflow-hidden']);

Vertical gutters

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->grid([
    [
        [
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
        ],
        [
            'column' => 6,
            'gutter' => ['vertical' => '5'],
        ],
    ],
], ['class' => 'overflow-hidden']);

Horizontal & vertical gutters

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->grid([
    [
        [
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Custom column padding' .
            '</div>',
        ],
        [
            'column' => 6,
            'gutter' => 2,
        ],
    ],
]);

Row columns gutters

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->grid([
    [
        [
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
            '<div class="bg-light border p-3">' .
            '    Row column' .
            '</div>',
        ],
        [
            'columns' => [2, 'lg-5'],
            'gutter' => [2, 'lg-3'],
        ],
    ],
]);

No gutters

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->gridRow(
    [
        ['.col-sm-6 .col-md-8', ['column' => ['sm-6', 'md-8']]],
        ['.col-6 .col-md-4', ['column' => [6, 'md-4']]],
    ],
    ['gutter' => 0],
);