Hey there! I recently created some pages on Bootply.com and attempted to transfer them to the website I'm building in Visual Studios. However, the styling ends up looking off and doesn't match how it appears on Bootply.com. Check out these pictures:
On Bootply:
https://i.sstatic.net/wP5yK.jpg
On Visual Studios:
https://i.sstatic.net/XHzAJ.jpg
I designed it on Bootply using Bootstrap 2.3.2 and downloaded Bootstrap from this link: http://getbootstrap.com/2.3.2/, which is version 2.3.2, so I don't understand why there would be any discrepancies if I simply copy and paste what I created on Bootply into my tags on Visual Studios. This inconsistency isn't due to a difference in the image used because on Bootply, no matter what image I use, it scales to fit the carousel and the menu shows up within the image rather than on top of it.
Here is the HTML for my page, maybe there's something I added that's throwing Bootstrap off:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HomeTest.aspx.cs" Inherits="HomeTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Home</title>
<!-- Bootstrap -->
<link href="Styles/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/css/home.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- NAVBAR
=================== -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">... (full text omitted for brevity)
</div>
</div>
</div> <!-- /.navbar -->
</div> <!-- /.container -->
</div> <!-- /.navbar-wrapper -->
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"> ... (full text omitted for brevity)
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div> <!-- /.carousel -->
</body>