popups

<div class="container" style="padding-top: 60px;">
    
    <!-- MODAL POPUP -->

    <div class="modal" id="mymodal">
        <div class="modal dialog">
            <div class="modal-content">
                <div class="modal-header"> 
                    <button class="close" type="button" 
                        data-dismiss="modal" x> </button>
                    <h2 class="modal title"> How to be a badass ninja! </h2>
                </div>
                <div class="modal-body"> 
                    <p> Bacon ipsum dolor amet... </p>
                </div> 
            </div> <!-- end modal-content -->
        </div> <!-- end .modal dialog -->
    </div> <!-- end .modal -->

    <!-- END MODAL -->


    <!-- PANEL -->
    <div class="row">
        <div class="col-xs-6 col-sm-3">
            <div class="panel panel-primary">
                <h1 class="panel-title">Ninja</h1>
            </div>
            <div class="panel-body">
                <p> Hello! (2) </p>
            </div>
            <div class="panel-footer">
                <a href="#" data-toggle="modal"
                    data-target="#mymodal"> More info... </a>
            </div>
        </div>
    </div>

    <!-- END PANEL-->

</div>