Bootstrap CDN is not importing correctly - javascript

The following are in my head tags:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="boot.js"></script>
The last script is a reference to another file I am using to do all the jQuery code with. However the code below:
<body>
<nav class="navbar navbar-expand-md navbar-dark">
<nav class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</nav>
</body>
This just displays a white page. However if i use bootstrap cdn for JavaScript version 3.4.1 it works but not how intended (probably because its an older version). Any reason why this is happening?


If you want to keep the dark background into navbar then add on more class bg-dark with <nav class="navbar navbar-expand-md navbar-dark bg-dark">
I think this will work.
Example is given blow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<nav class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</nav>
</body>
</html>

Related

Hamburger Bootstrap Menu in Both Desktop and Mobile

I have a situation where I would like to display the Hamburger Menu on Both Desktop and Mobile, the following code works well on mobile but on desktop, it shows full navigation, in desktop as well I would like to show the same hamburger menu and on the right of the screen on desktop, is that possible?
$(document).ready(function(){
$(".navbar-toggler").click(function(){
$(".navbar-collapse").toggle();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>Responsive Header</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign</a>
</li>
</ul>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Remove navbar-expand-md
Change
<nav class="navbar navbar-expand-md navbar-light bg-light">
to
<nav class="navbar navbar-light bg-light">

Hamburger Menu is not opening on my webpage while using bootstrap. How do I fix this?

My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.
<!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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<div class = "header-my-name">
<header><h2>Hi</h2></header>
</div>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse"
data-bs-target=#navmenu>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item">
Currency Converter
</li>
<li class="nav-item">
Famous Landmarks
</li>
<li class="nav-item">
Project 3
</li>
<li class="nav-item">
Project 4
</li>
<li class="nav-item">
Project 5
</li>
<li class="nav-item">
Project 6
</li>
<li class="nav-item">
Project 7
</li>
<li class="nav-item">
Project 8
</li>
</ul>
</div>
</div>
</nav>
<!--NavBar Color and text center-->
<section class="bg-dark text-light p-5 text-center">
</section>
<!--My Project Displays-->
<main>
<div id = "currency-converter-project">
<iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe>
</div>
<div id = "famous-landmarks-project">
<iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe>
</div>
</main>
</body>
</html>

Link bootstrap javascript file <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

when PHP include is used toogle button doesn't work

I would like to built a basic website.
Î’elow I have the nav.html document where I have designed a basic dropdown menu. When I open the nav.html with the browser the toggle button works fine, when I click on it,dropdown menu collapses and
when I click on it again drop-down disappears.
The problem appears when I include nav.html in a home.php file.
When I click on the toggle button, dropdown-menu collapses, but when I click on it again dropdown-menu remains open and doesn't disappear.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</style>
</head>
<body>
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
home.php
<html>
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<?php include('./nav.html'); ?>
</body>
</html>

You are including HTML in HTML and this is not supported. As you are including nav.html into home.php, you want to remove tags body, html and completly head.
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
PHP and HTML are completly different languages. With PHP you are generating HTML content. You are not including "the result" of nav.html, but the code.

<button> not recognized in Bootstrap4

I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright &copy using Bootstrap4.
I've seen other questions about this topic but none seem to actually answer the question. Other questions have different code with obvious typos, my code doesn't. Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies?
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The button isn't showing up, just the map & cart text. If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. Button

Fixed the typo and updated HTML to show collapsible navBar
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand titleText">Copyright &copy </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

I have made some typo corrections, the toggle functionality now works with this code. But additional modifications are needed to align the elements correctly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
> </script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> .
</script>
<style>
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-fixed-top text-success">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapseNavBar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
<a class="navbar-brand titleText">Copyright &copy </a>
</nav>
</div>
</body>
</html>
I will construct the complete aligned html if need be. Hope this helps!

I cannot figure out why i cannot get bootstrap 4 menu to collapse on mobile

what is wrong with this code before all my hair fallout.
<img src="logo.png" alt="Ask a local" class="img-fluid w-35">"The most trusted local community"
<button class=" navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" id="zeropadding">
<span class="d-md-none" id="zeropadding"><i class="fas fa-align-left " >Menu </i></span> </button></div> <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul></nav>

Here's a responsive Bootstrap collapsible navigation bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</ul>
</div>
</div>
</nav>
</body>
</html>
</body>
</html>

I'm sorry... but your code is really terrible! Same ID twice, </div> never open, text without tag... really terrible! (^_^;)
I do not know where to start... maybe it's better if you read the bootstrap documentation http://getbootstrap.com/docs/4.1/getting-started/introduction/.
Now your menu works (I cleaned your HTML as best as I could), but you have to use HTML&CSS better because as it is, it is not a good work, sorry.
BTW, hope it helps you to improve your web designer techniques.
Cheers :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35">
"The most trusted local community"</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" id="zeropadding">
<i class="fas fa-align-left">Menu</i>
</button>
<div class="collapse navbar-collapse bg-light" id="myTogglerNav"> <!-- Links -->
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</div>
</nav>

Categories

Resources