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
Related
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.
I have an Razor view with an href anchor tag. I have an onclick event.
When I click on the link, the confirm prompt appears. However, if I choose "Cancel" it still executes the code - the MVC method.
Here is the Razor view:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
#Scripts.Render("~/bundles/modernizr")
<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
#Html.Partial("_NavBar")
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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="#"><strong>Functions</strong></a>
</div>
#* Navigation left-handside (sidebar). *#
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-table fa-fw"></i> Delete Account
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderBody()
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
<script type="text/javascript">
function ConfirmDelete(e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
window.location = $(this).attr('href');
}
// Stop the default action.
e.preventDefault();
}
</script>
I tried using jQuery (adding a deleteaccount class to the link) and it does not prompt all. It just goes right to executing the code.
Here is the Razor view:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
#Scripts.Render("~/bundles/modernizr")
<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
#Html.Partial("_NavBar")
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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="#"><strong>Functions</strong></a>
</div>
#* Navigation left-handside (sidebar). *#
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-table fa-fw deleteaccount"></i> Delete Account
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderBody()
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
<script type="text/javascript">
$('.deleteaccount').click(function (e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
// The button's href will be = to: ?????????????.
window.location = $(this).attr('href');
}
e.preventDefault();
});
</script>
I tried solving your issue, and below is one of the solution:
The default behavior of the a tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false or the event hasn't been prevented.
In your case event is not prevented a you have not passed the event as parameter to your ConfirmDelete() method. Hence both onClick and Href is executed.
So try this Out:
function ConfirmDelete(e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
return true;
} else {
return false;
}
// Stop the default action.
// e.preventDefault();
}
<i class="fa fa-table fa-fw"></i> Delete Account
Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome.
Here is my html code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
</head>
<body>
<div class="jumbotron text-center">
<h1>My Bootstrap Page</h1>
<p>Resize the page to understand Responsiveness</p>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<p>If you want to use Paypal</p>
<i class="fa fa-cc-paypal" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Mastercard</p>
<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Visa</p>
<i class="fa fa-cc-visa" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Google Wallet</p>
<i class="fa fa-google-wallet" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use American Express</p>
<i class="fa fa-cc-amex" style="font-size:36px"></i>
</div>
</div>
</div>
</body>
</html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?
Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript
You forgot to add the below css
.show > .dropdown-menu {
display: block;
}
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.
i want to create a navigation bar in bootstrap
everything works fine except one. when ever I resize the browser to width of mobile and click on the toggle button the dropdown menu does not open.
Please help me. All I wanted is "when ever i click on the stacked toggel button i want the drop down to open".
I have also made changes to class as well as ids in data-toggle attribute of the button.
I have included jquery, bootstrap js and bootstrap css. I have displayed the entire code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<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>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>
Try the following code to include jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Updated :
Are you sure that you linked bootstrap js file properly ?
Remove bootstrap js from ,Try by adding them before </body> and after jQuery library. Below is the correct code (Hope :) )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<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>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>