персональный календарь с bootstrap

Question

Я интегрирую новый шаблон bootstrap в asp mvc, но я хочу разместить календарную форму, но она отображается, как показано на рисунке

это моя форма:

 <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><span id="eventTitle"></span></h4>
                    </div>
                    <div class="modal-body">
                        <button id="btnDelete" class="btn btn-default btn-sm pull-right">
                            <span class="glyphicon glyphicon-remove"></span> Remove
                        </button>
                        <button id="btnEdit" class="btn btn-default btn-sm pull-right" style="margin-right:5px;">
                            <span class="glyphicon glyphicon-pencil"></span> Edit
                        </button>
                        <p id="pDetails"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

Я хочу отображать форму посередине: моя проблема в стиле использования шаблона. css и в календаре bootstrap. css