2

I'm relatively new to web programming so I used a couple of templates to create my website, all of them related to Twitter Bootstrap.

My login page correctly shows Bootstrap modals. These are the imports I used there:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>

The problems start with the main page after login. It was taken from another template and it uses the following imports:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>

As you can see the only change is the source of Bootstrap. In the first case I downloaded it to the css folder, while in the second case it's taken directly from the server.

As a result the modals do not show in the main page (the second one). The screen fades to black but no modal is shown.

enter image description here

If I modify the imports of the main page to take Bootstrap from the css folder instead of the server, the modals do show, but the layout of the whole page is ruined:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>

enter image description here

Instead of this:

enter image description here

Any ideas?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Szymon Przedwojski
  • 181
  • 2
  • 4
  • 12
  • Ok, I just checked (no idea why it never occurred to me before) that my local Bootstrap is v2.3.2, while the one on the server is v3.1.1. Can it make such a difference, though? – Szymon Przedwojski Jun 21 '14 at 08:49

2 Answers2

0

Have you add meta tag for responsive in head tag of the page. If not then try to add following meta tag into your head tags of the page.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

Hope this will be resolve your problem.

Note : First try this to add into your version in which you imports bootstrap downloaded files.

Sandip Vora
  • 183
  • 7
0

Ok after some research I solved my problem, I hope others will benefit from it.

This post actually solved it: here

Apparently the syntax for the modal in Bootstrap 3 is different and among other things it has to include these lines:

<div class="modal-dialog">
<div class="modal-content">

So I took the example under the link, tweaked it for my purposes and it worked. Problem solved.

Community
  • 1
  • 1
Szymon Przedwojski
  • 181
  • 2
  • 4
  • 12