Script won't execute in html file - javascript

I have a header created in index.html and a separate page in test.html. I'm able to use scripts on the index.html page but not on the test.html page I can't seem to find out why.
In the following file the console log logs the test statement and i'm able to see it in the browser.
Index.html:
<html lang="en">
<head>
<base href="/">
<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="">
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-animate.js"></script>
<!-- Angular Config/Routes -->
<script src="app/app.js"></script>
<script src="app/routes.js"></script>
<!-- Angular Controllers -->
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/emailCtrl.js"></script>
<script src="app/controllers/managementCtrl.js"></script>
<script> console.log('test'); </script>
<!-- Angular Services -->
<script src="app/services/userServices.js"></script>
<script src="app/services/authServices.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- Cascade Style Sheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<title>MEAN Stack App</title>
</head>
<body ng-app="userApp" ng-controller="mainCtrl as main" ng-show="main.loadme" ng-cloak>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<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>
<a class="navbar-brand page-scroll" href="/">MEAN Stack</a>
</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 navbar-right">
<li class="hidden active">
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/dashboard/{{ main.userid }}">Dashboard</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/mytests/{{ main.userid }}">My tests</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/comments">Comments</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/subscriptions">Subscriptions</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/recruitafriend">Invite friend and earn MONEY</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hello {{ main.username }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="#" ng-click="main.logout();">Logout</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/management">Management</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/orders">Orders</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/profile">Hello {{ main.username }}</a>
</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">About</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">Help</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/login">Login</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/register">Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header ng-show="main.home">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">David Acosta</div>
<div class="intro-heading">MongoDB, ExpressJS, AngularJS, NodeJS</div>
<a ng-show="!main.isLoggedIn" href="/login" class="page-scroll btn btn-xl">Sign In</a>
<a ng-show="!main.isLoggedIn" href="/register" class="page-scroll btn twitterbtn">Register</a>
<a ng-show="main.isLoggedIn" href="#" ng-click="main.logout();" class="page-scroll btn btn-xl">Logout</a>
<a ng-show="main.isLoggedIn && main.authorized" href="/management" class="page-scroll btn facebookbtn">View</a>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<!-- Angular View -->
<div ng-view></div>
<!-- Angular View -->
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section ng-show="main.home" id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About This Page</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="glyphicon glyphicon-film"></span>
<h4 class="service-heading">YouTube</h4>
<p class="text-muted">Ensure you check out the YouTube video series associated with this web page. Visit:
https://www.youtube.com/playlist?list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d
</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-usd"></span>
<h4 class="service-heading">Facebook</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-save"></span>
<h4 class="service-heading">Github</h4>
<p class="text-muted">Ensure you check out the GitHub page associated with this web page. Visit:
https://github.com/gugui3z24
</p>
</div>
</div>
</div>
</section>
<footer ng-show="main.home">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © David Acosta</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li>Privacy Policy
</li>
<li>Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- BootstrapJS Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button ng-hide="main.hideButton" type="button" ng-click="main.endSession();" class="close" data-dismiss="modal">×</button>
<!-- Modal Header -->
<h4 class="modal-title">{{ main.modalHeader }}</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>{{ main.modalBody }}</p>
<div ng-show="main.hideButton" class="dizzy-gillespie"></div>
</div>
<div class="modal-footer">
<!-- Modal 'Yes' & 'No' Buttons -->
<button type="button" ng-hide="main.hideButton" ng-click="main.renewSession();" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" ng-hide="main.hideButton" ng-click="main.endSession();" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- BootstrapJS Modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
The test.html won't execute the code within the script tags. But the h1 will show.
Test.html:
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>


If you do not use jquery, Angular uses jqlite. once view is loaded, than inspect it in chrome. You will not find script tag in view.Because Angular don't what to do with script tag hence removes it. When angular detects jquery, it will use jquery instead jqlite for dom manipulation and jquery treat the script tag as special.
< <script src="path/jquery.js"></script>
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>

Related

Bootstrap 5 Navigation, problem with active class

I am trying to create a navigation menu using Bootstrap 5. Unfortunately, I can't manage to cleanly solve the "Active" status of the menu buttons using on-board tools.
When a link in a drop-down menu is clicked, I want the drop-down title to be set to Active. My JS solution causes the Active status to be set, but it takes 2 more clicks on another menu item afterwards to remove the Active status. The page is a one-page layout with anchor links.
Using JavaScript I got further, but the problem still exists.
Javascript Code:
<script>
/* mouse-over effect */
$('.dropdown').mouseover(function () {
$(this).addClass('show').attr('aria-expanded', 'true');
$(this).find('.dropdown-menu').addClass('show');
}).mouseout(function () {
$(this).removeClass('show').attr('aria-expanded', 'false');
$(this).find('.dropdown-menu').removeClass('show');
});
</script>
<script>
/* Code for changing active link on clicking */
var btns = $("#navbar .nav-item-count");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
var hrefValue = current[0].attributes[1].value;
const element1 = document.getElementById("ul1");
const element2 = document.getElementById("ul2");
if (hrefValue == "#section3") {
element.classList.add("active");
} else { element.classList.remove("active"); }
if ((hrefValue == "#section4") || (hrefValue == "#section5")) {
element2.classList.add("active");
} else { element2.classList.remove("active"); }
});
}
/* Code for changing active link on Scrolling */
$(window).scroll(function () {
var distance = $(window).scrollTop();
$('.page-section').each(function (i) {
if ($(this).position().top <= distance + 120) {
$('#navbar .nav-item-count.active').removeClass('active');
$('#navbar .nav-item-count').eq(i).addClass('active');
}
});
}).scroll();
</script>
HTML code:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/bootstrap/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<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://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="row">
<div id="tiny-area" class="col apro-shrink">
<div class="apro-top-bar">
<div class="top-bar-left">
<ul class="social-icons">
<li><i class="bi bi-facebook"></i></li>
<li><i class="bi bi-twitter"></i></li>
<li><i class="bi bi-linkedin"></i></li>
<li><i class="bi bi-skype"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="social-icons">
<li><i class="bi bi-phone-fill"></i>+49 123 456 789</li>
<li> </li>
<li><i class="bi bi-envelope-at-fill"></i>max#mustermann.com</li>
</ul>
</div>
</div>
</div>
</div>
<nav id="navbar" class="navbar sticky-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-nav" id="navbarSupportedContent">
<ul class="nav nav-pills me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active nav-item-count" href="#section1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section2">Link 2</a>
</li>
<li class="nav-item dropdown">
<a id="ul1" class="nav-link dropdown-toggle button-item-count" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-item-count" href="#section3">Link 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="ul2" class="nav-link dropdown-toggle button-item-count" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-item-count" href="#section4">Link 4</a></li>
<li><a class="dropdown-item nav-item-count" href="#section5">Link 5</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section6">Link 6</a>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section7">Link 7</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2">
<!-- Section 1 -->
<h1 id="section1" class="page-section">Seite 1</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 2 -->
<h1 id="section2" class="page-section">Seite 2</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 3 -->
<h1 id="section3" class="page-section">Seite 3</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 4 -->
<h1 id="section4" class="page-section">Seite 4</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 5 -->
<h1 id="section5" class="page-section">Seite 5</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 6 -->
<h1 id="section6" class="page-section">Seite 6</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 7 -->
<h1 id="section7" class="page-section">Seite 7</h1>
<p>
Lorem ipsum...
</p>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
<!-- Javascript code see above -->
</script>
</html>
Can anyone help me with this? Thanks for help

how to pass parameter in include() , ejs?

I am including header and footer file in home.ejs file in my project but I want to pass a string that will be a CSS stylesheet file name , like I am including that header file in my home.ejs file so when I include I want to pass a string to include() and add it to href of my link tag in header.ejs file in that way I can add diff stylesheet for diff ejs files
the link tag above which I have commented // custom stylesheet that's the link tag
code for header.ejs file
<!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">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap" rel="stylesheet">
<!-- boostrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- custom CSS stylesheet -->
<link rel="stylesheet" href="/css/styles.css" >
<title>Yuvraj</title>
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Yuvraj Agarkar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<img class="navbar-toggler-icon" src="../images/More.svg" alt="not found" style="height: 50px; width: 50px;">
<!-- <span class="navbar-toggler-icon"></span> -->
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/newsletter">Newsletter</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Posts</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">fundamentals</a></li>
<li><a class="dropdown-item" href="#">top iOS tips</a></li>
<li><a class="dropdown-item" href="#">General programmic habbits</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
code for home.ejs file , here I want to pass that string name
<%- include('partials/header') -%>
<div class="introDiv">
<div class="intro">
<h2 class="introLine">I am a aspiring <span class="profSpan"> </span> <span class="cur">|</span></h2>
</div>
<div class="imageDiv">
<img class="svgImages" src="/images/catSleeping.svg" alt="Not found">
<h4 class="hustle">**Keep Hustling**</h4>
</div>
</div>
<div class="container">
<div class="row color">
<div class="col-sm-12 col-lg-6 article">
<img src="/images/laptop-code.jpg" alt="article-image" class="article-img">
<h3>
Foundation of programming
</h3>
<h5>
lorem ipsm is the dummy rext rerbsite the dummy rext rerbsite the dummy rext rerbsite
</h5>
</div>
<div class="col-sm-12 col-lg-6 article">
<img src="/images/man-code.jpg" alt="article-image" class="article-img">
<h3>
Basics of programming
</h3>
<h5>
lorem ipsm is the dummy rext rerbsite the dummy rext rerbsite the dummy rext rerbsite
</h5>
</div>
</div>
</div>
<%- include('partials/footer') -%>

Use HTML,CSS and Javascript in java code using IDE Eclipse

I am new to java and stuck in trying to embed the HTML/CSS and Javascript to the java code.
Any pointers will be helpful to finish building my code. I am using Eclipse editor to write my java code.
I have been able to successfully display some part of HTML display in my java code as below however I am trying to achieve a table sort via html/css/javascript and would like to add that too to my java code.
Below is my display.java file
public void transformForRequestSuccessful(MarkupOutput out) {
//Call render methods
renderdisplay(out);
}
public void renderdisplay(MarkupOutput out)
{
out.append("<BR/>");
out.append("<p>Look at the body!</p>");
out.append("<BR/>");
}
Below is the HTML/CSS/JavaScript that can be pasted as is and runs fine.
I saved this HTML file as sort.html and when called independently works fine.
html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Windows-1252">
<script type="text/javascript">
var people, asc1 = 1,
asc2 = 1,
asc3 = 1;
window.onload = function () {
people = document.getElementById("people");
}
function sort_table(tbody, col, asc) {
var rows = tbody.rows,
rlen = rows.length,
arr = new Array(),
i, j, cells, clen;
// fill the array with values from the table
for (i = 0; i < rlen; i++) {
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for (j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order
(asc)
arr.sort(function (a, b) {
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 *
asc);
});
// replace existing rows with new rows created from the sorted array
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
</script>
<style type="text/css">
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid black;
padding: 4px 16px;
font-family: Times New Roman;
font-size: 15px;
text-align: left;
}
th {
background-color: #C8C8C8;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1;
asc3 = 1;">ServerName</th>
<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1;
asc1 = 1;">UserName</th>
<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1;
asc2 = 1;">JobId</th>
</tr>
</thead>
<tbody id="people">
<tr>
<td>Server1</td>
<td>ABC</td>
<td>18</td>
</tr>
<tr>
<td>Server2</td>
<td>XYZ</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
Any help or suggestions how to embed this in java code will be helpful.
My apologies if I sound naive or unaware of the basic java programming.
Thanks

I would use the following frameworks:
Spring IO: https://spring.io/guides/gs/spring-boot/
This example shows you how to create the server and store your HTML/CSS/JavaScript. On the other hand, create a REST service to create a response with your embed HTML code.
JQuery: https://spring.io/guides/gs/consuming-rest-jquery/
This example shows you how to consume a RESTful Web Service with jQuery and append the embed code

In order to escape the special characters you need to integrate the OWASP encoder to encode the data for JS or CSS. Please refer to this link

Although it will not work alone but hope this will help you out to understand the implementation. This is a sample JSP file. In JSP file you can embed java code in the form of tags (scriplet,declarative and expression).
<!DOCTYPE html>
<%#page import="com.demo.dto.RegisterDTO"%>
<%#page import="java.util.ArrayList"%>
<%#page import="com.model.Student"%>
<%#page import="java.util.List"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrtap Free Admin Template - SIMINTA | Admin Dashboad Template</title>
<!-- Core CSS - Include with every page -->
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/main-style.css" rel="stylesheet" />
<!-- Page-Level CSS -->
<link href="assets/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<%List<RegisterDTO> entity = (List<RegisterDTO>)(request.getAttribute("entity")); %>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- navbar top -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<!-- navbar-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">
<img src="assets/img/logo.png" alt="" />
</a>
</div>
<!-- end navbar-header -->
<!-- navbar-top-links -->
<ul class="nav navbar-top-links navbar-right">
<!-- main dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-danger">3</span><i class="fa fa-envelope fa-3x"></i>
</a>
<!-- dropdown-messages -->
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong><span class=" label label-danger">Andrew Smith</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong><span class=" label label-info">Jonney Depp</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong><span class=" label label-success">Jonney Depp</span></strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-messages -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-success">4</span> <i class="fa fa-tasks fa-3x"></i>
</a>
<!-- dropdown tasks -->
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-tasks -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="top-label label label-warning">5</span> <i class="fa fa-bell fa-3x"></i>
</a>
<!-- dropdown alerts-->
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i>New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i>3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i>Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i>New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i>Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- end dropdown-alerts -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-3x"></i>
</a>
<!-- dropdown user-->
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i>User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i>Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i>Logout
</li>
</ul>
<!-- end dropdown-user -->
</li>
<!-- end main dropdown -->
</ul>
<!-- end navbar-top-links -->
</nav>
<!-- end navbar top -->
<!-- navbar side -->
<nav class="navbar-default navbar-static-side" role="navigation">
<!-- sidebar-collapse -->
<div class="sidebar-collapse">
<!-- side-menu -->
<ul class="nav" id="side-menu">
<li>
<!-- user image section-->
<div class="user-section">
<div class="user-section-inner">
<img src="assets/img/user.jpg" alt="">
</div>
<div class="user-info">
<div>Jonny <strong>Deen</strong></div>
<div class="user-text-online">
<span class="user-circle-online btn btn-success btn-circle "></span> Online
</div>
</div>
</div>
<!--end user image section-->
</li>
<li class="sidebar-search">
<!-- search section-->
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!--end search section-->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li class="selected">
<i class="fa fa-dashboard fa-fw"></i>Manage Users
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i>Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris Charts
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-flask fa-fw"></i>Timeline
</li>
<li class="selected">
<i class="fa fa-table fa-fw"></i>Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i>Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i>UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Grid
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i>Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- third-level-items -->
</li>
</ul>
<!-- second-level-items -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i>Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- second-level-items -->
</li>
</ul>
<!-- end side-menu -->
</div>
<!-- end sidebar-collapse -->
</nav>
<!-- end navbar side -->
<!-- page-wrapper -->
<div id="page-wrapper">
<div class="row">
<!-- page header -->
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- end page header -->
</div>
<div class="row">
<form method="post" action="MyServlet">
<input type="hidden" value=1 name="userAction"/>
<input type="submit" name="showData" value="showData"/>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Kitchen Sink -->
<div class="panel panel-default">
<div class="panel-heading">
User Details
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<% if(entity != null){
for(RegisterDTO data:entity){ %>
<tr>
<td><%=data.getId() %></td>
<td><%=data.getFirstName() %></td>
<td><%=data.getLastName() %></td>
<td><%=data.getContact() %></td>
<td><%=data.getEmail() %></td>
</tr>
<% }
}%>
</tbody>
</table>
</div>
</div>
</div>
<!-- End Kitchen Sink -->
</div>
</div>
</div>
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="assets/plugins/pace/pace.js"></script>
<script src="assets/scripts/siminta.js"></script>
<!-- Page-Level Plugin Scripts-->
<script src="assets/plugins/dataTables/jquery.dataTables.js"></script>
<script src="assets/plugins/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
</body>
</html>
In this, I also made a dynamic table using scriplet tag.

If you're new, you're going to be exposed to many different approaches to accomplishing the same thing - how to get your Java code to work with other web technologies. IMO, Spring Boot is one of the quickest ways to get started, as #pakOverflow mentions above.
Another great (and simple) intro is from MyKong: https://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/
One (of the many) thing to keep in mind is that you want to separate concerns (see https://en.wikipedia.org/wiki/Separation_of_concerns). In Java, strive to have fairly small, simple objects work together to do interesting things rather than putting all your code in a very small number of classes that do everything.

Why w3.css Side navbar is not working on my page?

I am new to web page. I am trying to apply side nav bar using w3css file. But It doesn't work.
Here is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
<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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CodeBuild</a>
</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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<br />
<br />
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
Link 1
Link 2
Link 3
</div>
<div class="container">
<h1>Hi this is test page</h1>
</div>
</form>
</body>
</html>
It shows the toggle button when screen size become small. But when I click the button, it refresh the entire page. Not showing the side navbar.I already have bootstrap fixed navbar. Now I want to add side navbar using w3css file. What I did wrong in my code
This is that link from where I takes the code link

You need to add type="button" or return false to your buttons.
type="button"
<button type="button" class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
return false
<button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open(); return false">☰</button>
If you don't do so, the buttons will be by default type="submit" and force the refresh of the page.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyWebsite.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
<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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CodeBuild</a>
</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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<br />
<br />
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
<button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
Link 1
Link 2
Link 3
</div>
<div class="container">
<h1>Hi this is test page</h1>
</div>
</form>
</body>
</html>

how make side navbar using razor in asp.net web app

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 :
http://imgur.com/a/Jxx5m
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">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>Profile</li>
<li class="disabled">Disabled</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">
Primary <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</li>
<li class="dropdown">
Preparatory <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
Secondary <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>One</li>
<li>Two</li>
<li>Three</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">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>Profile</li>
<li class="disabled">Disabled</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.

Categories

Resources