Bootstrap navbar not toggling when clicked - asp.net-core

I am using Bootstrap 4 to toggle the collapse of dropdown menu for small screens (sm) in my navbar. But the toggling doesn't work, nothing happens when I click on the toggle button.
I made sure to import all the assets/links in correct order. Can any one see what's wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<environment include="Development">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" asp-action="index" asp-action="home">
<img src="~/images/leon.jpg" height="30" width="30" />
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" datatarget="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-action="index" asp-action="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-action="home" class="nav-link">Create</a>
</li>
</ul>
</div>
</nav>
<div>
#RenderBody()
</div>
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Script", required: false)
}
</body>
</html>


You have a wrong syntax on datatarget, it should be data-target.
Change this:
datatarget="#collapsibleNavbar"
To this:
data-target="#collapsibleNavbar"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>

Related

why is my image carousel not working on bootstrap 5?

Please i need help with image carousel on bootstrap 5!!!
Its not working and im very lost.
Also added the data-bs-target for bootstrap 5, that still didnt work
code below
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="carimages" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carimage" data-slide-to="0" class="active"></li>
<li data-target="#carimage" data-slide-to="1"></li>
<li data-target="#carimage" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="slide 1.jpg" alt=""></div>
<div class="carousel-item active"><img src="slide 2.jpg" alt=""></div>
<div class="carousel-item active"><img src="slide 3.jpg" alt=""></div>
</div>
<a class="left carousel-control" href="#carimages" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#carimages" data-slide="next"><span class="icon-next"></span></a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>

Three things to consider:
follow Bootstrap carousel HTML structure as shown in the docs,
use data-bs-target, data-bs-slide-to, data-bs-slide if you use Bootstrap 5 and
include Bootstrap JS only once (Bootstrap JS bundle or Popper & Bootstrap JS separately, not both).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="carimages" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carimages" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carimages" data-bs-slide-to="1"></li>
<li data-bs-target="#carimages" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img src="slide 1.jpg" alt=""></div>
<div class="carousel-item"><img src="slide 2.jpg" alt=""></div>
<div class="carousel-item"><img src="slide 3.jpg" alt=""></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carimages" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carimages" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="carimages" class="carousel slide" data-ride="carousel">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" class="d-block w-100" alt="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" class="d-block w-100" alt="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" class="d-block w-100" alt="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
</div>
</div>
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>

dropdown navbar at bootstrap 3 not working

anybody can help me?, why my dropdown at navbar not working on localhost?
this is my navbar
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid theme-showcase" style="background-color: #87cefa;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigator</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php" style="background-color: #fff;"><img src="asset/logo_header.png" style="max-width:100%;max-height:100%;"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav style">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Category<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>action</li>
<li>action</li>
<li>action</li>
</ul>
</li>
</ul>
<form class="navbar-form"><button type="button" class="btn btn-default" role="button">Login</button>
</form>
</div>
</div>
</nav>
this is my include css on the page
<link rel="icon" href="asset/logo_header.png">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
this is my include javascript on the page
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

Recheck the paths to your external js and style files. They may not be applying correctly. In the example below I used the Bootstrap CDNs and everything seems to be working as expected.
<link href="css/bootstrap.css" rel="stylesheet">
change to
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> // use this jquery instead
<script src="js/bootstrap.js"></script> // remove not needed if you are using the below line.
<script src="js/bootstrap.min.js"></script>
Also, created a fiddle for review.
Let me know if that helps
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML BEGINS -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid theme-showcase" style="background-color: #87cefa;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigator</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php" style="background-color: #fff;">Brand Image</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav style">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Category<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>action</li>
<li>action</li>
<li>action</li>
</ul>
</li>
</ul>
<form class="navbar-form"><button type="button" class="btn btn-default" role="button">Login</button>
</form>
</div>
</div>
</nav>

Scroll bar has not showing up

I'm having a trouble with no scroll bar showing up on my page when I resized the web page. this page was built up with bootstrap and used CDN as an option to install, so i have nothing to do with the css, any help would be highly appreciated, thank you so much
the code--
<!DOCTYPE HTML>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

You had few mark-up error in your code--you forgot to close the nav and head tag.
now working fine
<!DOCTYPE HTML>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.jumbotron {
height: 1000px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
</body>
</html>

Navbar collapse not working, although it likes I did everything correct

For some reason or another, the navbar doesn't expand, it remains in the collapsed state. I can't find any mistakes in the code though. What might be the problem?
This is what I have included in my page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="https://use.fontawesome.com/4f2cdffc79.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="font-weight: normal;" href="#" class="navbar-brand"> LANDING PAGE</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> INDUSTRIES </li>
<li> OUR TEAM </li>
<li> CONTACT </li>
<li> BLOG </li>
<li> LOGIN </li>
<li> PLANS & PRICING </li>
</ul>
</div>
</div>

Bootstrap navbar miss-aligned

For some reason my Navbar seems to have 0 top padding and be slightly off to the right.
The HTML is almost a directly copy & paste from the example, I cannot for the life of my figure out why it isn't working.
Messed up navbar
<%# Master Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<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"/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Main master</title>
</head>
<body>
<div class="container">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test Demo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>GitHub</li>
<li>NuGet</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>demo</li>
<li>demo</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

You have 2 <div class="container"></div>, which both have an offset. Remove one of them and see if that solves your issue.
<%# Master Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<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"/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Main master</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test Demo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>GitHub</li>
<li>NuGet</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>demo</li>
<li>demo</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap would appear to need custom .css files for some properties, in this case the navbar top handling was handled by "navbar.css"
body {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-bottom: 20px;
}
creating this file and linking it in the header seemed to fix the issue.