Bootstrap Bootsnipp snippet won't render correctly - html

I'm trying to use a Bootsnipp snippet in my page.
Namely, collapsible-tree-menu-with-accordion.
However the entire thing is being rendered in a 'flat' way. The collapse/expand mechanism is working fine, but the list items are not indented, nor are they surrounded with a box.
I imagine this is a CSS issue, but I can't figure it out.
Here is the HTML (generated from django templates), with the snippet pasted as-is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Hasadna: Community</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>admin</li>
</ul>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li>Users</li>
<li class="active">Lucid</li>
</ol>
<div class="well">
<center>
<img src="http://www.gravatar.com/avatar/8b1d41ccb353509f6c864b1faddf3202?d=blank?s=140" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
<h3 class="media-heading">Lucid</h3>
<h3 class="media-heading"><small>עמרי דור | Omri Dor</small></h3>
<span><strong>Skills: </strong></span>
<span class="label label-warning">Baking Cookies</span>
</center>
<hr>
<p class="text-left"><strong>Email: </strong><br>
a#b.c</p>
<hr>
<center>
<p class="text-left"><strong>Bio: </strong><br>
Hi guys.
</p>
</center>
<hr>
<p class="text-left"><strong>Code Contributions: </strong></p>
<ul class="list-group">
<li class="list-group-item"><strong>Total Commits:</strong> 7</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div class="menu">
<div class="accordion">
<!-- Áreas -->
<div class="accordion-group">
<!-- Área -->
<div class="accordion-heading area">
<a class="accordion-toggle" data-toggle="collapse" href=
"#area1">Área #1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle=
"dropdown" href="#" style="font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar equipamento -->
<li>
<a href="../equipamento/add.php"><i class=
"icon-plus"></i> Adicionar equipamento</a>
</li>
<li class="divider"></li><!-- Editar área -->
<li>
<a href="../area/edit.php"><i class=
"icon-pencil"></i> Editar área</a>
</li>
<li class="divider"></li><!-- Remover área -->
<li>
<a class="danger" href="#remove"><i class=
"icon-remove"></i> Remover área</a>
</li>
</ul>
</div>
</div><!-- /Área -->
<div class="accordion-body collapse" id="area1">
<div class="accordion-inner">
<div class="accordion" id="equipamento1">
<!-- Equipamentos -->
<div class="accordion-group">
<div class="accordion-heading equipamento">
<a class="accordion-toggle" data-parent=
"#equipamento1-1" data-toggle="collapse" href=
"#ponto1-1">Equipamento #1-1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil"
data-toggle="dropdown" href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar ponto -->
<li>
<a href=
"../ponto/add.php"><i class="icon-plus">
</i> Adicionar ponto</a>
</li>
<li class="divider"></li>
<!-- Editar equipamento -->
<li>
<a href=
"../equipamento/edit.php"><i class=
"icon-pencil"></i> Editar
equipamento</a>
</li>
<li class="divider"></li>
<!-- Remover equipamento -->
<li>
<a class="danger" href=
"#remove"><i class=
"icon-remove"></i> Remover
equipamento</a>
</li>
</ul>
</div>
</div><!-- Pontos -->
<div class="accordion-body collapse" id="ponto1-1">
<div class="accordion-inner">
<div class="accordion" id="servico1">
<div class="accordion-group">
<div class=
"accordion-heading ponto">
<a class="accordion-toggle"
data-parent="#servico1-1-1"
data-toggle="collapse" href=
"#servico1-1-1">Ponto
#1-1-1</a>
<div class="dropdown edit">
<a class=
"dropdown-toggle icon-pencil"
data-toggle="dropdown"
href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar servico -->
<li>
<a href=
"../servico/add.php">
<i class=
"icon-plus"></i>
Adicionar
servico</a>
</li>
<li class="divider">
</li><!-- Editar ponto -->
<li>
<a href=
"../ponto/edit.php">
<i class=
"icon-pencil"></i>
Editar ponto</a>
</li>
<li class="divider">
</li><!-- Remover ponto -->
<li>
<a class="danger"
href=
"#remove"><i class=
"icon-remove"></i>
Remover ponto</a>
</li>
</ul>
</div>
</div><!-- Serviços -->
<div class=
"accordion-body collapse" id=
"servico1-1-1">
<div class="accordion-inner">
<ul class="nav nav-list">
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-1</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-2</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-3</a>
</li>
</ul>
</div>
</div><!-- /Serviços -->
</div>
</div>
</div>
</div><!-- /Pontos -->
</div><!-- /Equipamentos -->
</div>
</div>
</div>
</div>
</div><!-- /accordion -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p></p>
</footer>
</div>
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And this is the additional CSS file, '/static/css/style.css', containing the CSS snippet that's supposed to go along with the HTML snippet:
body {
padding-top: 80px;
padding-bottom: 20px;
}
.menu .accordion-heading { position: relative; }
.menu .accordion-heading .edit {
position: absolute;
top: 8px;
right: 30px;
}
.menu .area { border-left: 4px solid #f38787; }
.menu .equipamento { border-left: 4px solid #65c465; }
.menu .ponto { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }
Any ideas?


So it turns out I had two problems:
I was using Bootstrap v3.1.0, which was incompatible with this snippet.
Even after switching to v2.3.2, the files sat in the same exact (django served /static/) path, and my browser kept using the cached version (3.1.0).
About (1):
Unfortunately if I go back to 2.3.2 then my navbar is no longer rendered correctly. I would really like to migrate the snippet to Bootstrap 3.1.0, but my CSS is far too poor for me to be able to do it.
About (2):
A quick workaround was to indicate the version number somewhere in the path (i.e. boostrap/2.3.2/css/...).
A cleaner solution is django-cachebuster, which adds a meaningless get parameter for your static resources (i.e. /static/my.css?v=9393939). This parameter can be set to be the file's last modification date, so that ought to do it.
Thanks for your help guys!

Related

Sticky navbar only is sticky for first section of page

So I am creating a bootstrap website. It is supposed to be a one-page website and I have a navar at the top. My navbar is only sticky for the first section and then it just entirely disappears. How do I make it continue to stay sticky so that when I scroll through the entire page comes along at the top?
Here is my current code:
body,
td,
th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Get Involved</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career Fair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ideation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">CLUB</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- About -->
<section class="content-section bg-primary text-white text-center" id="about">
<div class="container text-center">
<div class="content-section-heading">
<h2 class="mb-5">Vision</h2>
<h4 style="font-weight:normal">business</h4>
<h4 style="font-weight:normal">careers</h4>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="content-section" id="portfolio">
<div class="container">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">Recent Projects</h2>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Stationary</h2>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-1.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Ice Cream</h2>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-2.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Strawberries</h2>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-3.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Workspace</h2>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-4.jpg" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>

You can remove the sticky-top class and just add header{position:sticky;} in css as there is some particular javascript which hides your header after first section.

Add 'fixed-top' in the nav tag
and remove the " sticky-top" from header tag

Confused with the Div being a child of "a"

After checking my code through a validator, the validator error states that on the
div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000"
Element div not allowed as child of element a in this context. (Suppressing further errors from this subtree.)
The rest of the code is the page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=dvice=width, initial-scale=1">
<meta name="keywords" content="Contect Free Art, Design, Grammer">
<meta name="description" content="Art Created with CDFG">
<meta name="author" content="Dakotah Hutchinson">
<title> O'sullivan Clemens</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIIj8LyTjo7mOUStjskKC4pOpQbyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/CDFG.css" rel="stylesheet">
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
</head><body>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<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>
<h1> O'sullivan Clemens </h1>
</div>
<div class="container">-
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Galleries... <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="guest_art.php">Guest Art
</a></li>
<li><a href="carousel.php">Carousel
</a></li>
<li><a href="contribute.php">Contribute Art
</a></li>
<!--links.php -->
</ul>
<li>Resources<b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="links.php">Suggest a Link
</a></li>
<li><a href="Location.php">Location
</a></li>
<li><a href="news.php">News
</a></li>
</ul>
<li>Contact... </li>
</ul>
</div>
</div>
</div>
Code block location
<div class="container">
<div class="main">
<h1> Lawyers <b> Slideshow </b> | <a href="lightbox.php"> Lightbox
<!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
<div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
<div class='carousel-outer'>
<div class='carousel-inner'>
<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>
</div>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->
</div>
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0"class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1"class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2"class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3"class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<i class="fab fa-twitter" aria-hidden="true"></i>
</div>
<div class="navbar-text pull-right">
GTT 20XX (CC BY-NC-NC 4.0)
</div>
</div>
</div>
<!-- Video Sending Email - Form Reset -->
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contact" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1> Contact </h1>
<p><span class="error">* required field. </span></p>
<p>Either <a href="mailto:name#gmail.com">
email me</a> directly or fil in the form below...</p>
<p>
<b>Name<sup class="error">*</sup>:</b><br/>
<input type="text" name="name" size="25" value="" required />
</p>
<p>
<b>Email<sup class="error">*</sup>:</b><br/>
<input type="email" name="email" size="25" value="" required />
</p>
<p>
<b>Comment<sup class="error">*</sup>:</b><br/>
<textarea name="comment" required
></textarea>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" name="submit">Send</button>
<a class="btn btn-warning" data-dismiss="modal">Cancel</a>
</div>
</form>
</div>
</div>
</div>

You do not appear to have closed the 'a' tag on the previous line
<a href="lightbox.php"> Lightbox
Which makes the subsequent div a child of the 'a' tag which is not allowed in most circumstances.
It should probably be
Lightbox
Have a look at the following answer to see what you can and cannot do.
I also don't see where you have closed the <h1> tag on the same line. I know that many browsers are tolerant of unclosed tags but it's bad practice and can lead to unexpected results. If you use a code prettifier (such as the one embedded in editors like Sublime Text) you will see that the indent levels do not line up in your code. Adding the </h1> and </a> tags cures this and gives you
<div class="container">
<div class="main">
<h1> Lawyers</h1> <b> Slideshow </b> | Lightbox
<!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
<div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
<div class='carousel-outer'>
<div class='carousel-inner'>
<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>
</div>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->
</div>
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0" class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1" class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2" class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3" class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>
</div>
</div>
</div>
</div>
for the first half of Code block location

W3 validation error

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<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> ARPIT - Accounting & Reconciliation Portal of Indirect Taxes </title>
<!-- Fonts -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
#*<link href="~/Content/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />*#
<!-- Custom CSS -->
<link href="~/Content/theme/assets/admin/css/custom_website.css" rel="stylesheet" />
<!-- Bootstrap Core CSS -->
<link href="~/Content/theme/assets/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery.js"></script>
<!-- HTML5 Shim and Respond.js 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="~/Content/theme/assets/global/plugins/html5shiv.js"></script>
<script src="~/Content/theme/assets/global/plugins/respond.min.js"></script>
<![endif]-->
</head>
<body id="content">
<div class="page-wrap ">
<header id="header" style="min-height: 163px;">
<div class="header-body" style="top: 0px;">
<div class="header-top">
<div class=" container-xl container">
<div class="top-responsive-menu">
<div class="top-menu-area">
<ul class=" nav navbar-nav top-menu-4">
<li class="login">
<i class="fa fa-user"></i> #CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resLoginMenu
</li>
</ul>
</div>
<div class="top-menu-area ">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resColorThemeMenu <i class="fa fa-caret-down top -menu-3"></i>
<ul class=" nav navbar-nav top-menu menu-3 ">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<img src="~/Images/multicolor.png" style="width:25px" title="Color Theme" alt="Color Theme">
</a>
<ul class="dropdown-menu multicolors-name">
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resGreenThemeMenu</li>
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resBlueThemeMenu</li>
</ul>
</li>
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resWhiteThemeMenu</li>
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resBlackThemeMenu</li>
</ul>
</div>
<div class="top-menu-area">
<ul class=" nav navbar-nav top-menu-2 ">
<li class="language menu-2" title="हिन्दी">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resLanguageMenu</li>
</ul>
</div>
<div class="top-menu-area">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resZoomMenu <i class="fa fa-caret-down"></i>
<ul class=" nav navbar-nav top-menu menu-1 top-menu-1">
<li>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resIncreaseFontMenu </li>
<li><a class="zoom" href="#" title="Reset Font Size" style="padding: 6px 14px 6px 3px;" onclick=resetFont()>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resResetFontMenu</a></li>
<li style="margin-right:20px"><a class="zoom " href="#" title="Decrease Font Size" onclick=decreaseFont() style=" padding: 6px 14px 6px 3px;"> #CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resDecreaseFontMenu </a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<!-- <p class="welcome-msg">DEFAULT WELCOME MSG!</p> -->
</div>
</div>
<div class="header-container container container-xl">
<div class="header-row">
<div class="header-column">
<div class="header-logo">
<a href="#Url.Action("Index", "HomePage", null)">
<img alt="ARPIT" class="logo" src="~/images/arpit_logo.png" title="Accounting & Reconciliation Portal of Indirect Taxes">
</a>
</div>
</div>
<div class="header-column">
<div class="header-logo govt-authorities-name">
<img alt="CCA & CBEC" title="CCA & CBIC" height="76" src="~/Images/govt-authorities.png">
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed -top header-container header-nav" role="navigation">
<div class="container container-xl responsive-padding-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-pills responsive-nav navigation">
<li class="menuSelect" id="Index">
<a href="#Url.Action("Index", "HomePage", null)" title="Home">
#CGA.CPSMS.BusinessModels.ResourceFiles.CAS_Resource.Home
</a>
</li>
<li class="dropdown-submenu menuSelec t" id="AboutUs">
<a href="#" title="About Us" class="dropdown-toggle " data-toggle="dropdown">
#CGA.CPSMS.BusinessModels.ResourceFiles.CAS_Resource.AboutUs <b class="caret"></b>
</a>
<ul class="about-dropdown-menu dropdown-menu ">
<li id="Overview">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resOverviewMenu </li>
<li id="OrganisationChart">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resOrganisationChartMenu</li>
<li id="OrganisationFunctions">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAboutUsOrganisationFunctionMenu</li>
<li id="DirectoryofOfficers">#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAboutUsDirectoryofOfficersMenu</li>
</ul>
</li>
<li class="menuSelect" id="Administration">
<a href="#Url.Action("Administration", "StaticPage", null)" title="Administration">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAdministrationMenu
</a>
</li>
<li class="menuSelect" id="PAO">
<a href="#Url.Action("PAO", "StaticPage", null)" title="PAO">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resPAOMenu
</a>
</li>
<li class="menuSelect" id="DDODirectory">
<a href="#Url.Action("DDODirectory", "StaticPage", null)" title="DDO Directory">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resDDODirectoryMenu
</a>
</li>
<li class="menuSelect" id="ListofAuthorisedBanks">
<a href="#Url.Action("ListofAuthorisedBanks", "StaticPage", null)" title="List of Authorised Banks">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resListofAuthorisedBanksMenu
</a>
</li>
<li class="menuSelect" id="Publication">
<a href="#Url.Action("Publication", "StaticPage", null)" title="Publication">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resPublicationMenu
</a>
</li>
<li class="menuSelect" id="Tender">
<a href="#Url.Action("Tender", "StaticPage", null)" title="Tender">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resTenderMenu
</a>
</li>
<li class="menuSelect" id="ContactUs">
<a href="#Url.Action("ContactUs", "StaticPage", null)" title="Contact Us">
#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resContactUsMenu
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</header>
#RenderBody()
</div>
<footer id="footer">
<div class="footer-link">
<div class="container container-xl">
<div class="bottomNav">
<nav>
<ul class=" bottomnavControls social-icons">
<li class="footer-image"><i class="fa fa-sitemap footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resSitemapMenu </li>
<li class="footer-image"><i class="fa fa-comments footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resFeedbackMenu </li>
<li class="footer-image"><i class="fa fa-question-circle-o footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resFAQMenu </li>
<li class="footer-image"><i class="fa fa-users footer-icon"></i> #CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resRTIMenu </li>
<li class="footer-image"><i class="fa fa-exclamation-triangle footer-icon "></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resDisclaimerMenu </li>
<li class="footer-image"><i class="fa fa-pencil footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resTermsofUseMenu </li>
<li class="footer-image"><i class="fa fa-wheelchair footer-icon "></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resAccessibilityStatementMenu </li>
<li class="footer-image"><i class="fa fa-file-text-o footer-icon"></i>#CGA.CPSMS.BusinessModels.ResourceFiles.CBEC_Website_Content.resWebsitePoliciesMenu</li>
</ul>
</nav>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<p class="copyright-text" title="© Content Owned, Updated & Maintained by O/o Pr. CCA , Central Board of Indirect Taxes & Customs, Department of Revenue, Ministry of Finance, Government of India">© Content Owned, Updated & Maintained by </p>
<p class="copyright-text" title=" © Content Owned, Updated & Maintained by O/o Pr. CCA , Central Board of Indirect Taxes & Customs, Department of Revenue, Ministry of Finance, Government of India">O/o Pr. CCA , Central Board of Indirect Taxes & Customs, Department of Revenue, Ministry of Finance, Government of India</p>
</div>
</div>
</div>
</footer>
<!-------------------------------------------Middle Content FINISH---------------------------->
<!-- javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="~/Scripts/elmenu.js"></script>
#*<script src="~/Scripts/bootstrap.min.js"></script>*#
<script src="~/Content/theme/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$(this).bind("contextmenu", function (e) {
e.preventDefault();
});
});
function disableBackButton() {
window.history.forward()
}
function noBack() {
disableBackButton();
window.onload = disableBackButton();
window.onpageshow = function (evt) { if (evt.persisted) disableBackButton() }
window.onunload = function () { void (0) }
}
</script>
<script type="text/javascript">
history.pushState(null, null, ' ');
window.addEventListener('popstate', function (event) {
history.pushState(null, null, ' ');
});
</script>
<script>
$(function () {
$('.pop').on('click', function () {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
<script>
//Code start for Menue activation
$(document).ready(function () {
if (('Overview,OrganisationChart,OrganisationFunctions,DirectoryofOfficers').indexOf('#ViewBag.Title') >= 0) {
$('#AboutUs').addClass('active');
$('#' + '#ViewBag.Title').addClass('active');
} else {
$('#' + '#ViewBag.Title').addClass('active');
}
});
//Code end for Menue activation
</script>
<script type="text/javascript">
var section;
var factor = 0.8;
function getFontSize(el) {
var fs = $(el).css('font-size');
if (!el.originalFontSize) el.originalFontSize = fs; //set dynamic property for later reset
return parseFloat(fs);
}
function setFontSize(fact) {
if (section == null)
section = $('#content').find('*')
.filter(
function () {
return $(this).clone()
.children()
.remove()
.end()
.text().trim().length > 0;
}); //filter -> exclude all elements without text
section.each(function () {
var newsize = fact ? getFontSize(this) * fact : this.originalFontSize;
if (newsize) $(this).css('font-size', newsize);
});
}
function resetFont() {
setFontSize();
}
function increaseFont() {
setFontSize(1 / factor);
}
function decreaseFont() {
setFontSize(factor);
}
</script>
</body>
<style>
.page-wrap:after {
content: "";
display: block;
}
#footer, .page-wrap:after {
height: 103px;
}
</style>
</html>
when I check on the w3 validation. Below error is coming:-
Stray end tag “head”.
From line 30, column 1 to line 30, column 7
Code Extract:
dif]-->↩ ↩↩↩↩
Cannot recover after last error. Any further errors will be ignored.
From line 32, column 1 to line 32, column 19
Code Extract:
↩↩↩
How this will resolve. I am not able to understand. You can also check by
https://validator.w3.org/nu/#textarea . Same error will show.

The layout is displayed incomplete when using thymelaf

I'm trying to create a typical user panel with thymeleaf layouts.
As you can see on the expected result picture below, the layout is composed by a header and left menu. The contents chosen from the menu are displayed in the child section:
However, the result I get is this one:
This is my "fixed parts" code where the header is the "header" fragment and the menu is the "menu" fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<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="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
<nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/>
</li>
<li>
<i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/>
</li>
</ul>
</div>
</nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
This is my "child" page where I import both, the header and the menu fragments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>
<div>
my page content
</div>
<script>
function test() {
alert("TEST");
}
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
You can find the gitHub repository with the sample code at this link:
https://github.com/MichaelKnight/thymeleafLayout

Bootstrap Dashboard
This Bootstrap Dashboard example showcases how to achieve a three component page.
Top Navigation Bar
Sidebar Navigation Menu
Content Area
The Top Navigation bar is a root component inside your <body>. The Sidebar and Content Area are <div class="col-xs-*"> columns located inside a <div class="row"> row which resides in a <div class="container-fluid"> container.
Visit the link above and view-source to see the structure of the HTML. Fundamentally this is a CSS problem, as your current GitHub project contains all of the elements, they are just positioned behind each other out of view. Adding the appropriate Bootstrap classes will resolve the problem.
The Thymeleaf fragments are being included properly.

The layout sample is uploaded to my gitHub repository which you can find at the end of the issue description.
The top bar:
<div layout:fragment="header">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<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="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
</div>
The side menu:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
Then you have to create the layout page:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>

twitter drop down not working

here is the code that I am using but the dropdown is not being shown. My javascript ref erence is in the correct sequence. and i have also added a function for dropdown toggle.
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Include bootstrap CSS -->
<script src="includes/jquery/jquery-2.1.0.min.js"></script>
<script src="includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/style.css" rel="stylesheet">
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class= "container">
tech site
<button= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li> Home </li>
<li> Login </li>
<li class="dropdown">
Social Media<b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook </li>
<li>Twitter </li>
<li> Google+ </li>
</ul>
</li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</div>
</body>
<div>
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
</body>
</html>
</html>

You have to insert the collapse plugin, and use include the wright versions of jquery and bootstrap. You don't have to insert any script of your own to make it works. Here is your code with the minimal modifications, just to make it works:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navbar Collapse</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class= "container">
tech site
<button class= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li> Home</li>
<li> Login</li>
<li class="dropdown">
Social Media<b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li> Google+</li>
</ul>
</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
</div>
<div>
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
</body>
</html>
Check this link jsfiddle to see a working example.
It's better if you change the tag of the navbar navbar-inverse navbar-static-top from div to nav. And also add the role="navigation" to every navbar to help with accessibility.
Hope it's useful!