Boostrap Simplex template : Place modal in middle of screen

Question

When i open a modal using the sample given from http://getbootstrap.com/javascript/#modals.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>        

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </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>

It is working fine with the default template but It stops working properly when I load Simplex template (http://bootswatch.com/simplex/).

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/simplex.css"));

After adding simplex.css when I click on the button, the modal appears on the extreme right of my screen. (It even extends my windows x-axis)

How can I adjust the modal so that it appears correctly in the middle of the screen? Thanks!

Answer 1

I was loading the original bootstrap.css + the simplex template instead of just loading the simplex template.

bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/site.css",
              "~/Content/simplex.css"));

I just removed it and it is perfectly working now. Thanks!