I am currently teaching myself web based languages and I am a bit stuck on my bootstrap/html code. Currently I am running into some trouble with bootstrap. I am trying to make a navbar and I have copied code I found online and pasted on Atom and then ran the local site.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>testing</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-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="\Users\sealc\.atom\Web Dev\testing\pagethree.html">page three</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagetwo.html">Page two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagefour.html">Page four</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
</body>
</html>
it works when I fiddle with it on codeply, but when I try to run the local site I keep getting this:navbar
It is probably an easy fix, but I am no expert, I already tried using different links for bootstrap an I copied the template on their website, but nothing changed
I tested your code on my environment the link might not work. I changed the link and it worked again. Here it is:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
Check the conflict something like:
How many .JSFile Version you are using?
If you have A master page i guess that is the cause. (Cause by the other pages)
To Resolve:
Try to comment some other .JS and run to check the cause.
May check also your .CSS using inspect element.
By Forcing the style you want or to By pass the old css, you can add in your style !important to the affected area.
Like for Example:
<style>
.sampleclass{
color: red !important
}
</style>
Hello #Jacob Dubois I have check your code. Your code is perfect but bootstrap css has a problems. Please use this bootstrap latest version. For Example :=> https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
Related
Below is the relevant HTML for my _Layout.cshtml page. My issue is that when you click the dropdown menu, Supporting Tables, nothing happens - nothing drops down. I have even tried many other examples after searching Google, but none worked. Finally, one stylesheet link from an online how-to worked, but it changed the styles of my page, so am looking for a solution that won't do that.
Would appreciate it if someone could take a look and see what I might have wrong/be missing. I think it must be a script src or stylesheet link, but I do not know which one I would need to add or replace. Very new to this, so am sorry for my ignorance. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - EmergencyContactsWeb</title>
<link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.2/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">PHECWeb</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="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-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/InfoSites/Index">Site Information</a>
</li>
<!--Dropdown Below-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Supporting Tables</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
<a class="dropdown-item" asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">...
Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)
I needed to include these script srcs under my link rels and in this order:
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
The link to the original solution is here:
Bootstrap 4 Dropdown Menu not working?
Hope that can help others! I had no idea there was a particular order.
You are using Bootstrap but cdn of bootstrap CSS is not included in your head tag. The only thing you have to do is to add this to your head tag :
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
to rework an old webpage, based on Bootstrap 3, I tried to build up a new page from scratch with Bootstrap 4. I started with the navbar element, which should be always shown on top, have a brand logo and the left and some page links on the right - in priniciple not special, but I didn't manage it.
I reduced my wishes more and more and I want solve the problem, I have with the toggling between icon menu and links.
I am only able to get the icon menu button always visible (without "collapse" in button class), also for large screens, or never visible (with "collapse" in button class). The rest of the code should be nearly standard as read in many many examples and tutorials. Could you please have a hint, what is it running wrong?
Thanks in advance,
Ralf
Updated:
I investigate with the Inspector and the it seems the navbar toogle button is there, but completely transparent!? Is this my problem and I have to define a color to this button (it works in principle with background-color, but I missed the lines inside) or could this a problem with Javascript and the switching function?
Here is the code - should be standard (all cosmetics are doesn't matter, I will care about later with css).
<html lang="de">
<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>Testseite</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-default bg-light navbar-fixed-top py-lg-0">
<div class="container-fluid">
<img src="./img/smile.png" width="60" height="60" alt="Logobeschreibung">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item active">Startseite<span class="sr-only">(current)</span>
</li>
<li class="nav-item"><a class="nav-link" href="#">Seite1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite3</a></li>
</ul>
</div>
</div>
</nav>
<!-- Menu -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous "></script>
</body>
</html>
I am assuming you want to always see this block of Bootstrap always shown in your header, correct?
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
Because Bootstrap controls its appearance based on the viewport width using media queries, a simple hack to force it to always show would be the following. Add this to your style sheet:
.navbar-toggle {
display:inline-block !important;
}
I am not a fan of Bootstrap navigation for this reason and many more. It just feels incomplete and difficult to customize with CSS.
Can you please check the below code? Hope it will work for you. You need to use navbar-toggler class in toggle button instead of navbar-toggle as per bootstrap documentation. We have given background in navbar-toggler because you used navbar bg-light class.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/3vmuec5g/10/
.navbar .navbar-toggler {
background: #0000ff;
}
<html lang="de">
<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>Testseite</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-default bg-light navbar-fixed-top py-lg-0">
<div class="container-fluid">
<img src="./img/smile.png" width="60" height="60" alt="Logobeschreibung">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item active">Startseite<span class="sr-only">(current)</span>
</li>
<li class="nav-item"><a class="nav-link" href="#">Seite1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Seite3</a></li>
</ul>
</div>
</div>
</nav>
<!-- Menu -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous "></script>
</body>
</html>
I am trying to make a navbar that changes the style of a particular navbar link to active as the user scrolls down the page. I am trying to do this using Bootstrap's scrollspy feature.
I checked and there are many comprehensible tutorials on this (e.g. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp or https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3).
Although I believe I followed them to the letter, the effect just does not seem to work. I am afraid this may have to do something with the changes to mechanics of the spyscroll feature due to the abandonment of JQuery by BS5. But it very well may by an error in my code, although I did my best to follow the tutorials to the letter.
My code:
(a) included external files:
<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->
(b) style tag
<style>
body
{
position: relative;
}
</style>
(c) body tag
<body data-spy="scroll" data-target="#navbarko">
(d) navbar tag
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"/></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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Our mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#debt">Debt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#finadv">Finland</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
(e) beginning of the section tags throughout the page:
<section class="feature grad_third" id="mission">
<section class="feature grad_third" id="debt">
<section class="feature grad_third" id="finadv">
<section class="companies references" id="references">
<section class="feature grad_third" id="contact">
Many thanks beforehand for your time and help.
Things have changed slightly in Bootstrap 5 - and the W3Schools tutorial is Bootstrap 4.
So you need to change your body tag to (note the 'bs', for Bootstrap):-
data-bs-spy="scroll"
More on this here:-
https://getbootstrap.com/docs/5.0/migration/#javascript
Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle.
I am unable to open the navbar options, it's just a solid button and forms somewhat of a ring around it when clicked.
I had tried some various solutions including adding and removing the scripts, changing the navbar attributes, etc
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pan Indus Exim Enterprises</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/vdnewlogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ab">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#con">Connect</a>
</li>
</ul>
</div>
</div>
</nav>
At first, make sure your computer is connected to the internet. This to ensure the CDN loaded and saved by your browser.
Secondly, open the Developer tools ctrl + shift + i (chrome keyboard shortcut) and check on the tabbed console there is no error. If there have an error message, please fix it first (the most problem is the CDN link is not work or there is a typing error).
If Navbar on mobile is still not collapsing, please clear your browser data ctrl + shift + del (chrome keyboard shortcut) and reload the page.
Note: It's not recommended or bad practice to embed your script to tab head, please embed them to the end of the tag body or before </body>
It is working just make sure you have JavaScript cdn and a proper browser like Chrome, sometimes bootstrap does not support other browsers. Also make sure you are connected to Internet Especially when you are Cdn.
I have searched this problem in multiple threads here on SO and it is a real head-scratcher as to why this isn't working. The below example (which is from a SO thread on this issue) works when it is in jsFiddler, but doesn't work when I serve it from my local machine.
So, I literally copy-pasted the code from jsFiddler to my own file and loaded that file in the same browser that rendered it correctly in the fiddler preview window.
I have tried adding the !doctype html tag and I have tried it with and without head tags around the title/link rel sections, with no change. The navbar is rendered with the brand name and globe on the left, then "link 1 link 2 link3", then a gap, then sign in/register/log out renders on the right side of the navbar. I have also tried serving this as a django page from the dev server and I have tried putting it in a flat HTML file and drag-dropping it from the filesystem. I have also tried several very similar examples from SO with the same basic result.
Here is the page on my server:
http://www.walesdata.com/test.html
Here is a screen shot of how it is rendering for me:
http://www.walesdata.com/Screen.png
I like the look and function of this when I see the working example, but I have not gotten it to work locally.
<!DOCTYPE html>
<html lang="en">
<title>
Site title
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fa fa-globe" aria-hidden="true"></i> Brand Name
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Link 1</li>
<li class="nav-item">Link 2</li>
<li class="nav-item">Link 3</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">Sign In</li>
<li class="nav-item">Register</li>
<li class="nav-item">Log Out</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<nav class="navbar navbar-inverse fixed-bottom text-center">
<!--<a class="navbar-brand" href="#">Fixed bottom</a>-->
<h6 class="text-center">Footer</h6>
</nav>
</div>
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
System info: Mint Linux and Mozilla Firefox. Served from django 2.0 and also from a flat HTML file on the file system.
In Bootstrap 4.1, I fix this issue by manually invoking the JS to toggle with an onclick handler in a button:
<button onclick="$('#navbar-main-collapse-1').toggleClass('collapse')" type="button">
<i aria-hidden="true" class="fa fa-bars"/>
</button>
Example here: https://www.xn--javiercaon-09a.com/2018/01/servicio-atencion-cliente-social-crm-scrm.html
The result of this was that the navbar-collapse will render as a regular navbar on a laptop, and then become the collapsed version on a smaller screen. So if you go into mobile view (Ctl+Shift+M in firefox) you'll see the collapse correctly.