Question backgroud:
I am attempting to make a simple ASP.NET MVC website with the use of Twitter bootstrap. I am using Microsoft VS2013 Express on an MVC project.
The issue:
I have downloaded a Bootstrap website which should look as follows:
Mine currently look like:
I so far done the following to no avail:
Deleted the contents of the _layout.cshtml page, added the Header and Footer of the Index.html Header and Footer of the 'MetroMan' theme I've downloaded.
2.Replaced the contents of the 'Scripts' folder with the contents of the Scripts folder of the MetroMan theme.
3.Created a 'Template' Folder under the 'Contents' Folder of the project. In this I have added the img, css, fonts folders and there respective contents from the MetroMan theme.
The _Layout.cshtml file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Title here -->
<title>MetroMan</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" href="css/settings.css" media="screen" />
<!-- Navigation menu -->
<link rel="stylesheet" href="css/ddlevelsmenu-base.css">
<link rel="stylesheet" href="css/ddlevelsmenu-topbar.css">
<!-- PrettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<!-- cSlider -->
<link rel="stylesheet" href="css/slider.css">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
</head>
<body>
<!-- Sliding panel starts-->
<div class="slidepanel">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="spara">
<!-- Contact details -->
<p>
<i class="fa fa-envelope-o lightblue"></i> something#gmail.com
#*<i class="fa fa-twitter lightblue"></i> #something *#
<i class="fa fa-desktop lightblue"></i> 123-456-7890
</p>
</div>
</div>
<div class="col-md-4">
<div class="social">
<!-- Social media icons. Repalce # with your profile links -->
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-rss"></i>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Sliding panel ends-->
<!-- Header starts -->
<header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<!-- Logo starts -->
<div class="logo">
<div class="logo-image">
<!-- Image link -->
<i class="fa fa-desktop blue"></i>
</div>
<div class="logo-text">
<h1>Metro<span class="lightblue">Man</span></h1>
<div class="logo-meta">Cool Metro Theme</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Logo ends -->
</div>
<div class="col-md-9 col-sm-8">
<!-- Navbar starts -->
<div class="navi pull-right">
<div id="ddtopmenubar" class="mattblackmenu">
<!-- Main navigation -->
<!-- Use the background color class in anchor tag for colorful menu -->
<ul>
<li>
<i class="fa fa-home"></i> Home
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>Revolution Slider</li>
<li>Parallax Slider</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<i class="fa fa-desktop"></i> Pages
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>Landing Page</li>
<li>Coming Soon</li>
<li>Features</li>
<li>Service</li>
<li>Our Team</li>
<li>About Us</li>
<li>Resume</li>
<li>Tasks</li>
<li>
Sub Navigation
<ul>
<li>Nav Level #3</li>
</ul>
</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<i class="fa fa-tablet"></i> Pages
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>404</li>
<li>Testimonials</li>
<li>Clients</li>
<li>Pricing Table</li>
<li>Projects</li>
<li>Register</li>
<li>Login</li>
<li>Events</li>
</ul>
</li>
<li>
<i class="fa fa-comments"></i> Blog
<!-- Sub navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li>Blog #1</li>
<li>Blog #2</li>
<li>Blog Single</li>
</ul>
</li>
<li> <i class="fa fa-camera"></i> Portfolio</li>
<li> <i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div class="navis"></div>
<!-- Navbar ends -->
<div class="clearfix"></div>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<!-- Header ends -->
#RenderBody()
<!-- Footer -->
<!-- Below area is for testimonial -->
<div class="foot blightblue">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- User icon -->
<span class="twitter-icon text-center"><i class="fa fa-user"></i></span>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum dolor eget nisi <br />fermentum quis hendrerit magna vestibulum."</em></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="widgets">
<div class="col-md-3">
<div class="fwidget">
<h4>Contact</h4>
<p>Nullam justo nunc, dignissim at convallis posuere, sodales eu orci. </p>
<hr />
<i class="fa fa-home"></i> 123, Some Area. Los Angeles, CA, 54321.
<hr />
<i class="fa fa-phone"></i> +239-3823-3434
<hr />
<i class="fa fa-envelope-o"></i> someone#company.com
<hr />
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-rss"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Categories</h4>
<ul>
<li>Condimentum - Condimentum gravida</li>
<li>Etiam at - Condimentum gravida</li>
<li>Fusce vel - Condimentum gravida</li>
<li>Vivamus - Condimentum gravida</li>
<li>Pellentesque - Condimentum gravida</li>
<li>Fusce vel - Condimentum gravida</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Subscribe</h4>
<p>Duis leo risus, condimentum ut posuere ac, vehicula luctus nunc. Quisque rhoncus, a sodales enim arcu quis turpis.</p>
<p>Enter you email to Subscribe</p>
<form class="form-inline" role="form">
<div class="input-group">
<input type="text" class="form-control" id="subscribe" placeholder="Subscribe...">
<span class="input-group-btn">
<button type="submit" class="btn btn-danger">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Recent Posts</h4>
<ul>
<li>Sed eu leo orci, condimentum gravida metus</li>
<li>Etiam at nulla ipsum, in rhoncus purus</li>
<li>Fusce vel magna faucibus felis dapibus facilisis</li>
<li>Vivamus scelerisque dui in massa</li>
<li>Pellentesque eget adipiscing dui semper</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copy">
<p>Copyright © Your Site - Home | About Us | FAQ | Contact Us</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</footer>
<!-- Scroll to top -->
<span class="totop"><i class="fa fa-angle-up"></i></span>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<!-- prettyPhoto -->
<script src="js/jquery.prettyPhoto.js"></script>
<!-- isotope -->
<script src="js/jquery.isotope.js"></script>
<!-- Navigation menu -->
<script src="js/ddlevelsmenu.js"></script>
<!-- jQuery cSlider / Extra script for cslider -->
<script src="js/jquery.cslider.js"></script>
<script src="js/modernizr.custom.28468.js"></script>
<!-- Support -->
<script src="js/filter.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
<!-- This page JS -->
<script>
/* JS for SLIDER REVOLUTION */
jQuery(document).ready(function () {
jQuery('.tp-banner').revolution(
{
delay: 9000,
startheight: 500,
hideThumbs: 10,
navigationType: "none",
hideArrowsOnMobile: "on",
touchenabled: "on",
onHoverStop: "on",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
stopAtSlide: -1,
stopAfterLoops: -1,
shadow: 0,
fullWidth: "on",
fullScreen: "off"
});
});
</script>
</body>
</html>
The _Layout.cshtml seems to require CSS links that the browser cant find while the website is running.
Add the required files to the scripts folder, and create a style bundle. More on Bundles here: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
You can now render the Bundle in the _Layout.cshtml
Create a script bundle and render it in _Layout.cshtml if required.
When a web site shows like your broken example image, it is because no CSS is loading. This is almost certainly because the path to your CSS files is incorrect.
To easily assess this:
Load the page in Firefox/Chrome, and View Source.
Click the highlighted links in the source to each of the CSS files and see if they actually load. Most likely they will return a 404 Not Found.
Looking at your code the most likely solution is that you will need to change:
<link href="css/bootstrap.min.css" rel="stylesheet">
to
<link href="/css/bootstrap.min.css" rel="stylesheet">
or
<link href="/MyApplication/css/bootstrap.min.css" rel="stylesheet">
Related
I am working on an MVC application, and I am trying to add links to the navigation bar including a dropdown menu and a search form. But whenever I add the dropdown-items and the form to the navbar I am getting this error
An unhandled exception occurred while processing the request.
XmlException: '.', hexadecimal value 0x00, is an invalid character. Line 1, position 1.
AspNetCoreGeneratedDocument.Views_Shared__Layout.b__35_1() in _Layout.cshtml
When I remove the added code the program runs perfectly
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - eTickets</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/eTickets.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">eTickets</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a>
<a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a>
<a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a>
</div>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</form>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - eTickets - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
What could be the problem, I'm using bootstrap 5.1.3 I also added the popper.js package and also the bootstrap package but the error still pops up.
I have solved the problem, instead of using the div tag I replaced it with the ul tag
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a></li>
<li><a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a></li>
<li><a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a></li>
</ul>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
and on the form I replaced the form tag with the div tag as follows
<div class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</div>
Refer to the https://getbootstrap.com/docs/5.1/components/dropdowns/
No changes to the code, shown below.
Upgraded bootstrap from 3.2 to 4.3.1.
Now, the menu
- shows as a line on the left
- hamburger menu doesn't show regardless of window size
- expands and collapses similar to the hamburger menu
I've updated the navbar-inverse to navbar-dark, but can't find any other changes to make.
Collapsed
Expanded
Before upgrading, correct
#using Portal.Helpers;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center For People In Need #ViewBag.Title</title>
#Styles.Render("~/Content/css")
#RenderSection("styles", required: false)
</head>
<body>
<div class="navbar navbar-dark bg-dark 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>
<img src="/Content/Logo.png" alt="l" class="logo" />
#*<img src="/Content/Logo.png" alt="logo" class="logo" />*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#{var UserRoles = Roles.GetRolesForUser();}
#if (UserRoles.Contains("ClientUser") || UserRoles.Contains("ClientAdmin")) {
<li class="#Html.SelectedClass(TempData["activemenu"], "Clients")">
#Html.ActionLink("Clients", "Index", "Clients")
</li>
}
...
There are so many changes in Bootstrap v.4, It's better to read its documentation in order to fix problems:
Bootstrap Navs and Bootstrap Navbar can help you.
I have an MVC 5 application that I created with bootstrap. Now I had to create an MVC 4 application and copied my _layout.cshtml file over to it and made the modifications that I needed. I, further, added bootstrap to the project. However, my menu bar is not showing up. All I get is this pic:
This is kind of what I was expecting. (this is a pic of the app I copied the code from):
Here is my _layout file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="wrapper">
<div class="navbar navbar-inverse 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>*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Interactive Courses", "Index", "PTEInteractiveCourse")</li>
<li>#Html.ActionLink("Tracking Classes", "Index", "PTETrackingClass")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year.ToString() Securities Training Corporation. All rights reserved.</p>
</footer>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am following this tutorial: pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m6-ajax&mode=live&clip=0&course=mvc4-building. When I added autocomplete functionality I had a problem with layout of my form. Before searching it looks like this http://i.stack.imgur.com/RH2WM.png. When I start typing in search form I get expected list but it does not look good: http://i.stack.imgur.com/TWbea.png. Here is my Index.cshtml
#model IEnumerable<MvcApp.Models.Car>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<form method="get" action="#Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
<input type="search" name="searchString" data-mz-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" name="Search By Name" value="Search" />
</form>
#Html.Partial("_Cars", Model)
This is my _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#Page.Title</title>
#RenderSection("head", required: false)
#Styles.Render("~/Content/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<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>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Główna","Index","Home")</li>
<li>#Html.ActionLink("O stronie", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt","Contact","Home")</li>
<li>#Html.ActionLink("Lista samochodów","Index","Cars")</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>ABC</h2>
</div>
</header>
#RenderBody()
#Scripts.Render("~/bundles/mz")
#Scripts.Render("~/bundles/bootstrap")
I guess this is problem with css but I do not have any experience with it. How can I improve it? I want that list would like in that pluralsight tutorial (or google search)
I don't see your target (unless I am missing something). Try this:
<div id="carsList">
<form method="get" action="#Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
<input type="search" name="searchString" data-mz-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" name="Search By Name" value="Search" />
</form>
</div>
In the jquery you could set whether to replace or append to div. You could also move the div where desired.
I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.
The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.
Tabdrops Source
Here is my complete code of my cshtml file in which i have used the tabdrop.js...
<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
if (top.location != location) {
top.location.href = document.location.href;
}
$(function () {
window.prettyPrint && prettyPrint();
$('.nav-tabs:first').tabdrop();
$('.nav-tabs:last').tabdrop({ text: 'More options' });
$('.nav-pills').tabdrop({ text: 'With pills' });
});
</script>
<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />
<div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div id="loading-example">
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="content">
<ul class="nav nav-tabs tabs-example" role="tablist">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<li>Tab 8</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-tab1">
<p>This is tab 1!</p>
</div>
<div class="tab-pane" id="tabs-tab2">
<p>This is tab 2!</p>
</div>
<div class="tab-pane" id="tabs-tab3">
<p>This is tab 3!</p>
</div>
<div class="tab-pane" id="tabs-tab4">
<p>This is tab 4!</p>
</div>
<div class="tab-pane" id="tabs-tab5">
<p>This is tab 5!</p>
</div>
<div class="tab-pane" id="tabs-tab6">
<p>This is tab 6!</p>
</div>
<div class="tab-pane" id="tabs-tab7">
<p>This is tab 7!</p>
</div>
<div class="tab-pane" id="tabs-tab8">
<p>This is tab 8!</p>
</div>
</div>
<!-- top row -->
<!-- /.row -->
</section><!-- /.content -->
</aside>
</div>
</div>
I have the css files stored in the location
Content\css
and Javascript Files stored in the location
Content\js
The cshtml file has the bootstrap theme of ADMINLTE bootstrap.
Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?
I had same issue. The tabdrop plugin initialized when window re-size.
I solved it by resizing the window after init tabdrop.
$(window).resize();