Pardon me if I am missing something obvious. I am using WebStorm to write a website and wanted to experiment with Bootstrap. Now the problem is that I'm pretty sure the Bootstrap's JavaScript isn't working. For example, I can't toggle a div with a "collapse" class, the Navbar "active" class isn't working as well. Here is my code. UPDATE: updated code, I should also add my javascript is working, but the bootstrap javascript isn't
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shachar's Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My StyleSheet -->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<a class="navbar-brand text-info " href="#">Logo</a>
<button class="navbar-toggler bg-info menu-icon-container" type="button" data-toggle="collapse" data-target="#navbar-info" onclick="animateMenu(this)">
<div class="menu-icon1"></div>
<div class="menu-icon2"></div>
<div class="menu-icon3"></div>
</button>
<div class="collapse navbar-collapse" id="navbar-info">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Test1
<div class="collapse" id="bonus">
Test2
</div>
<div id="homepage-body" class=""></div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- My JavaScript -->
<script type="text/javascript" src="./myscript.js"></script>
</body>
<script> needs to be placed before </body> and add integrity and crossorigin. In general, like this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Here is the documentation.
Related
After i write firebase login, firebase init this file this file appears
My CSS firebaserc
{
"projects": {
"default": "smarthome-e154e"
}
}
My HTML if you want to see my code.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Pembagi Kartu</title>
<link rel = "icon" href = "title.png" type = "image/x-icon">
<link rel="stylesheet" href="styles.css">
<style>
body {
background-image: url('card2.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<header class="fixed-top bg-light">
<nav class="navbar navbar-expand-lg navbar-light container">
<a class="navbar-brand" href="#">Pembagi Kartu Otomatis</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pilihan</a>
</li>
</ul>
</div>
</nav>
</header>
<br><br><br><br><br>
<content>
<div class="container bg-light "style="min-height: 100%;height: 100%; background-color: aliceblue;">
<div class="justify-content-center d-flex">
<button type="button" class="btn btn-success" onclick="led1on()" id="Acak">Acak</button>
<button type="button" class="btn btn-danger" onclick="led1off()" id="Tentukan">Tentukan</button>
<button type="button" class="btn btn-primary">Mulai</button>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</content>
<br><br><br><br><br>
<footer class="fixed-bottom bg-light">
<br>
<div class="inner container">
<p>© Renaldy Kevin Sidharta - 2021</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
i want to update data to firebase, my project is turn light on or off using internet.
My app.js
const firebaseConfig = {
SENSORED };
firebase.initializeApp(firebaseConfig);
let database = firebase.database();
function led1off(){
console.log(document.getElementById());
database.ref('Lampu/Led0').set("0");
}
function led1on(){
database.ref('Lampu/Led0').set("1");
}
My error after write firebase serve --debug --only function
[2021-11-09T12:17:35.704Z] AssertionError [ERR_ASSERTION]: expected value to be defined but got "undefined"
at new AssertionError (internal/assert/assertion_error.js:467:5)
at Object.assertDefined (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\utils.js:360:15)
at C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\serve\index.js:15:36
at arrayMap (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\lodash\lodash.js:653:23)
at Function.map (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\lodash\lodash.js:9622:14)
at serve (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\serve\index.js:14:25)
at Command.actionFn (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\commands\serve.js:47:16)
at C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\command.js:190:25
at processTicksAndRejections (internal/process/task_queues.js:95:5)
Error: An unexpected error has occurred.
What happen? i dont know to solve this problem. Please help me
i want to update this database value to 0 or 1
Note : im using node.js
I am start working with DataTable.js and when I want to integrate in my project which is done in ASP.NET CORE MVC 5.0 I get error like
Uncaught TypeError: $(...).DataTable is not a function
I try to google and I found that this error may come when you JQuery is older version, but I updated to newest version 3.7.1
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
WHat else I look is I try to change calling of function to call by ID and by class but nothing change as well.
Here is my layout page as well where I include datatable.min.js and datatable.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BergClinic</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/fontawesome/css/all.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BergClinic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Patient" asp-action="Index">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Doctor" asp-action="Index">Doctors</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="AdmissionPatient" asp-action="Index">Admission patient</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-white-50 bg-primary">
<div class="container">
© 2021 - BergClinic
</div>
</footer>
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
In my Index View Page I also create calling of datatable in following meaner
#model IEnumerable<BergClinics.Models.Doctor>
#{
ViewData["Title"] = "Index";
}
<div class="container p-3 bg-white">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Doctor's List</h2>
</div>
</div>
<br /><br />
#if (Model.Count() > 0)
{
<table class="table datatable-responsive datatable-doctor" style="width:100%">
<thead>
<tr>
<th>
Doctor Name
</th>
<th>
Code
</th>
<th>
Speciality
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model)
{
<tr>
<td width="25%">#obj.Firstname #obj.Lastname</td>
<td width="25%">#obj.Code</td>
<td width="25%">#obj.Speciality</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Edit" class="btn btn-primary mx-2">
<i class="fas fa-edit"></i>
</a>
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
<i class="far fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p> No Doctor exists.</p>
}
</div>
<script>
$('.datatable-doctor').DataTable({
dom: 'Bfrtip',
//buttons: [
// {
// text: '<i class="btn btn-info"><i class="fas fa-plus"></i> Create New Doctor</a>',
// className: 'btn bg-blue',
// action: function (e, dt, node, config) {
// window.location.replace("/Doctor/Create");
// }
// }
//],
columnDefs: [
//Ovaj dio je potreban
{
responsivePriority: 1,
targets: -1
},
{
targets: [0],
orderable: true,
searchable: true,
printable: true,
width: "120"
}
]
});
</script>
Does anyone know where I made mistake ? What is wrong here ?
When you load jQuery you create a new instance of $ and jQuery which don't have any plugins you had previously loaded and attached to previous instances of jQuery.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
You are loading four different versions of jQuery!
Load one and make sure it is the current version.
Remove all of the lines quoted above except the first one.
You are trying to call DataTables in a script loaded in the body of the document, which is above the footer where you have:
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
You need to load the plugin before you call it.
You also shouldn't load the plugin twice.
Move one of those lines so it is immediately after the line where you load jQuery. Remove the other one.
I am working on a Bootstrap Website with a dropdown box in the Navbar. When the Navbar is in collapse mode. The dropdown menu is not responding
Does anyone know why this would happen
The website can be found at http://horizonarb.co.uk/index.html
The code is as follows;
Many thanks!
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Horizon Arboriculture</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<script src="js/googleFonts.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet"></link>
<!-- Font Awesome -->
<link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<small>MENU</small>
</button>
<img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize">
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Crown Thinning</li>
<li>Crown Lifting</li>
<li>Crown Reduction</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="container" id="topContainer">
<div class="row">
<div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty">
<img src="img/front/HorizonArb_Transparent.png" width="70%">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown is opening and closing, but it's hidden from view by the container. The following CSS should fix that:
.navbar-static-top .navbar-collapse.in {
overflow-y: visible; /* Bootstrap default is "auto" */
}
I tried to load jquery-source script before jquery-bootstrap script by changing their order inside "head" element but it didn't work, also, I made sure to link bootstrap CSS file.
I took a look at bootstrap default navbar example and It seems that everything is right but still not working?
Finally, I'm using JSF-2.2 framework and I don't know if it has anything to do with this problem? Here's the full code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Features
</li>
<li>
Technologies
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>
Using "src" attribute instead of "library" and "name" jsf's attributes solved the problem.
I found the reason is that because I'm using (jsf:libray="" and jsf:name="") inside script tag.!
The resulted HTML file has an invalid URL of the javascript file which means no script is working.
Im trying to build responsive website. To do that, Im using Bootstrap 3. I have downloaded Bootstrap 3 and imported to my website root directory:
I don't know why, but on small screen it doesn't show my icon:
My code:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/jquery-2.1.1.js"></script>
<script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script src="../js/script.js"></script>
<title>
title
</title>
</head>
<body>
<header class="top" role="header">
<div class="container">
<a href="../aplikacija/app.html" class="navbar-brand pull-left">
Application
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li>APP</li>
<li>UX</li>
</ul>
</nav>
</div>
</header>
<div id="app" class="content">
</div>
</body>
</html>
Your glyphicon span should have the following class: glyphicon glyphicon-align-justify as opposed to just glyphicon-align-justify
I would suggest not using align justify in the span as a class - just display the glyphicon and then justify it in an outside div.
<div class="text-justify">
<span class="glyphicon glyphicon-align-justify"></span>
</div>
here is some more info - http://getbootstrap.com/components/#glyphicons-how-to-use