dotvim/vim/UltiSnips/html_bootstrap4_layout-grid.snippets

# Containers
# Container - Bootstrap 4
snippet con
<div class="container">
    $1
</div>
endsnippet

# Container Fluid (full width) - Bootstrap 4
snippet conf
<div class="container-fluid">
    $1
</div>
endsnippet

# Grid
# Row - Bootstrap 4
snippet row
<div class="row">
    $1
</div>
endsnippet

# CRC
# Simple grid - Bootstrap 4
snippet grid
<div class="container">
    <div class="row">${4:
        <div class="col-${1:xs|sm|md|lg|xl}-${2:1-12}">
            $3
        </div>
    }</div>
</div>
endsnippet


# 3 Columns grid - Bootstrap 4
snippet 3col
<div class="container">
    <div class="row">
        <div class="${1:col-md-4}">
            ${2:One of three columns}
        </div>
        <div class="${1:col-md-4}">
            ${2:One of three columns}
        </div>
        <div class="${1:col-md-4}">
            ${2:One of three columns}
        </div>
    </div>
</div>
endsnippet

# 3 Responsive Columns grid - Bootstrap 4
snippet 3colr
<div class="container">
    <div class="row">
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-4}">
            ${4:One of three columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-4}">
            ${4:One of three columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-4}">
            ${4:One of three columns}
        </div>
    </div>
</div>
endsnippet

# 2 Columns grid - Bootstrap 4
snippet 2col
<div class="container">
    <div class="row">
        <div class="${1:col-md-6}">
            ${2:One of two columns}
        </div>
        <div class="${1:col-md-6}">
            ${2:One of two columns}
        </div>
    </div>
</div>
endsnippet

# 2 Responsive Columns grid - Bootstrap 4
snippet 2colr
<div class="container">
    <div class="row">
        <div class="${1:col-xs-12} ${2:col-md-6}">
            ${3:One of two columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-md-6}">
            ${3:One of two columns}
        </div>
    </div>
</div>
endsnippet

# 4 Columns grid - Bootstrap 4
snippet 4col
<div class="container">
    <div class="row">
        <div class="${1:col-md-3}">
            ${2:One of four columns}
        </div>
        <div class="${1:col-md-3}">
            ${2:One of four columns}
        </div>
        <div class="${1:col-md-3}">
            ${2:One of four columns}
        </div>
        <div class="${1:col-md-3}">
            ${2:One of four columns}
        </div>
    </div>
</div>
endsnippet

# 4 Responsive Columns grid - Bootstrap 4
snippet 4colr
<div class="container">
    <div class="row">
        <div class="${1:col-xs-6} ${2:col-md-3}">
            ${3:One of four columns}
        </div>
        <div class="${1:col-xs-6} ${2:col-md-3}">
            ${3:One of four columns}
        </div>
        <div class="${1:col-xs-6} ${2:col-md-3}">
            ${3:One of four columns}
        </div>
        <div class="${1:col-xs-6} ${2:col-md-3}">
            ${3:One of four columns}
        </div>
    </div>
</div>
endsnippet

# 6 Columns grid - Bootstrap 4
snippet 6col
<div class="container">
    <div class="row">
        <div class="${1:col-md-2}">
            ${2:One of six columns}
        </div>
        <div class="${1:col-md-2}">
            ${2:One of six columns}
        </div>
        <div class="${1:col-md-2}">
            ${2:One of six columns}
        </div>
        <div class="${1:col-md-2}">
            ${2:One of six columns}
        </div>
        <div class="${1:col-md-2}">
            ${2:One of six columns}
        </div>
        <div class="${1:col-md-2}">
            ${2:One of six columns}
        </div>
    </div>
</div>
endsnippet

# 12 Columns grid - Bootstrap 4
snippet 12col
<div class="container">
    <div class="row">
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
        <div class="${1:col-md-1}">
            ${2:One of twelve columns}
        </div>
    </div>
</div>
endsnippet

# 12 Responsive Columns grid - Bootstrap 4
snippet 12colr
<div class="container">
    <div class="row">
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
        <div class="${1:col-xs-12} ${2:col-sm-6} ${3:col-md-2} ${4:col-lg-1}">
            ${5:One of twelve columns}
        </div>
    </div>
</div>
endsnippet


# Columns
# Column (full option)
snippet col
<div class="col-${1:xs|sm|md|lg|xl}-${2:1-12}">
$3
</div>
endsnippet

# Column Extra Small
snippet col-xs
<div class="col-xs-${1:1-12}">
$2
</div>
endsnippet

# Column Small
snippet col-sm
<div class="col-sm-${1:1-12}">
$2
</div>
endsnippet

# Column Medium
snippet col-md
<div class="col-md-${1:1-12}">
$2
</div>
endsnippet

# Column Large
snippet col-lg
<div class="col-lg-${1:1-12}">
$2
</div>
endsnippet

# Column Extra Large
snippet col-xl
<div class="col-xl-${1:1-12}">
$2
</div>
endsnippet

# Clearfix
# Clearfix for Grid system
snippet colcf
<div class="clearfix"></div>
endsnippet