# Lists
# List - Bootstrap 4
snippet lis
<ul class="list-group">
    <li class="list-group-item">${1:Cras justo odio}</li>
    <li class="list-group-item">${1:Dapibus ac facilisis in}</li>
    <li class="list-group-item">${1:Morbi leo risus}</li>
</ul>
endsnippet

# List label - Bootstrap 4
snippet lisla
<ul class="list-group">
    <li class="list-group-item">
        <span class="label label-default label-pill pull-right">${1:14}</span>
        ${2:Cras justo odio}
    </li>
    <li class="list-group-item">
        <span class="label label-default label-pill pull-right">${1:2}</span>
        ${2:Dapibus ac facilisis in}
    </li>
    <li class="list-group-item">
        <span class="label label-default label-pill pull-right">${1:1}</span>
        ${2:Morbi leo risus}
    </li>
</ul>
endsnippet

# List linked - Bootstrap 4
snippet lisli
<div class="list-group">
    <a href="#" class="list-group-item active">${1:Cras justo odio}</a>
    <a href="#" class="list-group-item">${1:Dapibus ac facilisis in}</a>
    <a href="#" class="list-group-item">${1:Morbi leo risus}</a>
</div>
endsnippet

# List button - Bootstrap 4
snippet lisbtn
<div class="list-group">
    <button type="button" class="list-group-item">${1:Cras justo odio}</button>
    <button type="button" class="list-group-item">${1:Dapibus ac facilisis in}</button>
    <button type="button" class="list-group-item">${1:Morbi leo risus}</button>
</div>
endsnippet

# List disabled items - Bootstrap 4
snippet lisdis
<div class="list-group">
    <a href="#" class="list-group-item disabled">${1:Cras justo odio}</a>
    <a href="#" class="list-group-item">${1:Dapibus ac facilisis in}</a>
    <a href="#" class="list-group-item">${1:Morbi leo risus}</a>
</div>
endsnippet

# List context - Bootstrap 4
snippet lisco
<ul class="list-group">
    <li class="list-group-item list-group-item-${1:success|info|warning|danger}">${2:Dapibus ac facilisis in}</li>
</ul>
endsnippet

# List context (div -> a href...) - Bootstrap 4
snippet liscoa
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-${1:success|info|warning|danger}">${2:Dapibus ac facilisis in}</a>
</div>
endsnippet

# List custom content - Bootstrap 4
snippet liscc
<div class="list-group">
    <a href="${3:#}" class="list-group-item active">
        <h4 class="list-group-item-heading">${1:List group item heading}</h4>
        <p class="list-group-item-text">${2:Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.}</p>
    </a>
    <a href="${3:#}" class="list-group-item">
        <h4 class="list-group-item-heading">${1:List group item heading}</h4>
        <p class="list-group-item-text">${2:Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.}</p>
    </a>
    <a href="${3:#}" class="list-group-item">
        <h4 class="list-group-item-heading">${1:List group item heading}</h4>
        <p class="list-group-item-text">${2:Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.}</p>
    </a>
</div>
endsnippet

