dotvim/vim/UltiSnips/html_bootstrap4_components-modals.snippets

# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/modal/#usage

# Modals
# Modal - Bootstrap 4
snippet mod
<div class="modal fade" id="${3:modal-1}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">${1:Modal title}</h4>
            </div>
            <div class="modal-body">
                <p>${2:One fine body&hellip;}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
endsnippet

# Modal sizes- Bootstrap 4
snippet modsz
<div class="modal fade" id="${3:bd-example-modal}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-${1:lg|sm}">
        <div class="modal-content">
            ${2:...}
        </div>
    </div>
</div>
endsnippet

# Modal grid- Bootstrap 4
snippet modgr
<div id="${4:gridSystemModal}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridModalLabel">${1:Modal title}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">${2:.col-md-4}</div>
                    <div class="col-md-4 col-md-offset-4">${2:.col-md-4 .col-md-offset-4}</div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-md-offset-3">${2:.col-md-3 .col-md-offset-3}</div>
                    <div class="col-md-2 col-md-offset-4">${2:.col-md-2 .col-md-offset-4}</div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">${2:.col-md-6 .col-md-offset-3}</div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        ${2:Level 1: .col-sm-9}
                        <div class="row">
                            <div class="col-xs-8 col-sm-6">
                                ${3:Level 2: .col-xs-8 .col-sm-6}
                            </div>
                            <div class="col-xs-4 col-sm-6">
                                ${3:Level 2: .col-xs-4 .col-sm-6}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="bd-example bd-example-padded-bottom">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${4:gridSystemModal}">
        ${5:Launch demo modal}
    </button>
</div>
endsnippet

# Modal content based- Bootstrap 4
snippet modcb
<div class="bd-example">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">${1:New message}</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Recipient:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send message</button>
                </div>
            </div>
        </div>
    </div>
</div>
endsnippet

# Modal content based- Bootstrap 4
snippet modbtn
<button class="btn btn-primary" data-toggle="modal" data-target="#${1:bd-example-modal}">${2:Large modal}</button>
endsnippet