i am tring to make the sidebar IN MY ASP.NET web app and using razor here is what id looks now and i want to remove that white space between the end of the page and the side bar also what to make it collapse sidebar so the app is usable on mobile here is the page :
https://i.sstatic.net/TSmd4.jpg
and here is the code and i am using bootstrap and razor in asp.net mvc web app anyone can help i am stuck for two days tell
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5 col-sm-6 col-lg-4">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li><a href="~/Views/chapter/Create.cshtml">Profile</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</ul>
</div>
<div class="col-xs-7 col-sm-6 col-lg-8">
<div class="panel panel-default">
<div class="panel-body">
Basic panel
</div>
</div>
</div>
</div>
</div>
</body>
here is the main _layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="/classRoom/Primary" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Primary <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/subject/select/Primary_One">One</a></li>
<li><a href="/subject/select/Primary_Two">Two</a></li>
<li><a href="/subject/select/Primary_Three">Three</a></li>
<li><a href="/subject/select/Primary_Four">Four</a></li>
<li><a href="/subject/select/Primary_Five">Five</a></li>
<li><a href="/subject/select/Primary_Six">Six</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/classRoom/Primary" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Preparatory <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/subject/select/Preparatory_One">One</a></li>
<li><a href="/subject/select/Preparatory_Two">Two</a></li>
<li><a href="/subject/select/Preparatory_Three">Three</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/classRoom/Primary" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Secondary <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/subject/select/Secondary_Two">One</a></li>
<li><a href="/subject/select/Secondary_Two">Two</a></li>
<li><a href="/subject/select/Secondary_Three">Three</a></li>
</ul>
</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
@if (ViewContext.HttpContext.User.IsInRole("Admin"))
{
<li>@Html.ActionLink("Add Chapter", "newChapter", "chapter")</li>
}
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
it will be great if someone tell me how to make one like this website http://www.w3schools.com/ it is just everything i need thanks
In your _Layout.csthml change HTML from this:
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
To this:
<body>
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</body>
The container div is what is preventing the full width. Keep your View the same but without the <body> tags as these should really stay in the Layout.
Edit:
To hide side bar on mobile screen you can surround sidebar markup with <div class="hidden-xs">:
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="hidden-xs">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li><a href="~/Views/chapter/Create.cshtml">Profile</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-8">
<div class="panel panel-default">
<div class="panel-body">
Basic panel
</div>
</div>
</div>
</div>
Change the col-xs-12 value on visible content as required.