# Modal

## Easy and Simple.

Map where your photos were taken and discover local points of interest. Map where your photos.

##### Modal title

...

## Easy and Simple.

Map where your photos were taken and discover local points of interest. Map where your photos.

##### Modal title

...

## Easy and Simple.

Map where your photos were taken and discover local points of interest. Map where your photos.

##### Modal title

...

    <button class="btn btn-circle btn-outline-brand" type="button" data-toggle="modal" data-target="#modal-1">Open modal</button>
    <button class="btn btn-circle btn-outline-brand" type="button" data-toggle="modal" data-target="#modal-2">Large modal</button>
    <button class="btn btn-circle btn-outline-brand" type="button" data-toggle="modal" data-target="#modal-3">Small modal</button>

    <!-- Modal -->
    <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title">Modal title</h5>
                   <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               </div>
               <div class="modal-body">
                  ...
               </div>
               <div class="modal-footer">
                   <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                   <button class="btn btn-primary" type="button">Save changes</button>
               </div>
           </div>
       </div>
    </div>

    <!-- Modal Large -->
    <div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title">Modal title</h5>
                   <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               </div>
               <div class="modal-body">
                  ...
               </div>
               <div class="modal-footer">
                   <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                   <button class="btn btn-primary" type="button">Save changes</button>
               </div>
           </div>
       </div>
    </div>

    <!-- Modal Small -->
    <div class="modal fade" id="modal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-sm" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title">Modal title</h5>
                   <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               </div>
               <div class="modal-body">
                  ...
               </div>
               <div class="modal-footer">
                   <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                   <button class="btn btn-primary" type="button">Save changes</button>
               </div>
           </div>
       </div>
    </div>

    button(class="btn btn-circle btn-outline-brand" type="button" data-toggle="modal" data-target="#modal-1") Open modal
    button(class="btn btn-circle btn-outline-brand" type="button" data-toggle="modal" data-target="#modal-2") Open modal
    button(class="btn btn-circle btn-outline-brand" type="button" data-toggle="modal" data-target="#modal-3") Open modal

    // Modal
    #modal-1.modal.fade(tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true")
       .modal-dialog(role="document")
           .modal-content
               .modal-header
                   h5.modal-title Modal title
                   button.close(type="button" data-dismiss="modal" aria-label="Close")
                       span(aria-hidden="true") ×
               .modal-body ...
               .modal-footer
                   button.btn.btn-secondary(type="button" data-dismiss="modal") Close
                   button.btn.btn-primary(type="button") Save changes

    // Modal Large
    #modal-1.modal.fade(tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true")
       .modal-dialog.modal-lg(role="document")
           .modal-content
               .modal-header
                   h5.modal-title Modal title
                   button.close(type="button" data-dismiss="modal" aria-label="Close")
                       span(aria-hidden="true") ×
               .modal-body ...
               .modal-footer
                   button.btn.btn-secondary(type="button" data-dismiss="modal") Close
                   button.btn.btn-primary(type="button") Save changes

    // Modal Small
    #modal-1.modal.fade(tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true")
       .modal-dialog.modal-sm(role="document")
           .modal-content
               .modal-header
                   h5.modal-title Modal title
                   button.close(type="button" data-dismiss="modal" aria-label="Close")
                       span(aria-hidden="true") ×
               .modal-body ...
               .modal-footer
                   button.btn.btn-secondary(type="button" data-dismiss="modal") Close
                   button.btn.btn-primary(type="button") Save changes