Why is the toggle button of this Bootstrap navbar not working? - html

I am trying to create bootstrap navbar, but the toggle button does not work. I have used the class .sidebar-collapse on body tag, so the data should appear on the right side when I click on the toggle button. But this does not happen. Can someone tell me what is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/now-ui-kit.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<title>
Techversity
</title>
</head>
<body class="sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#pablo">
Techversity
</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navigation" aria-controls="navigation-
index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end"
id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#pablo">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">Disabled</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo"><i class="fa fa-instagram"
aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo"><i class="fa fa-youtube-
play" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>


The markup is not correct. There shouldn't be a div.container nor a div.navbar-translate element inside the nav.navbar element. I tried it without them and it works. Also, you can check here that the markup isn't the one expected by Bootstrap.


i cant see bootstrap.min.js in your code:
https://getbootstrap.com/docs/4.0/getting-started/introduction/

Related

Navbar donesn't Collapse Boostrap

when i open my html file i don't find the collapse button on the navbar. The button for collapsing does not appear
here is my html code :
<!DOCTYPE html>
<html>
<head>
<title>BoostUp - Boostez vos projets</title>
<link href="/assets/css/boostrap/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/heroes.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
BoostUp
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Référencement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="./assets/js/jquery.js"></script>
<script src="/assets/js/booststrap/bootstrap.bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="./assets/js/firestart.js"></script>
</body>
</html>
Ps : i'm on bootstrap 5

You forgot to include the toggler button.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Toggler

Bootstrap 5 Hamburger Icon Doesn't Show (Trouble with navbar-toggler-icon) [duplicate]

I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked the nav icon or dropdown button,no dropdown menu apears.
I want to specially mention that I also included the jquery file. But it didn't work. Can anyone please tell me what is happening here?
One last thing,I faced severel issues with some others bootstrap classes like mr-auto,ml-auto etc.Is it any bug or new classes come with bootstrap 5 for this kind of job?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
DemoTech
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>

The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
Demo
As explained in the docs, data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. This mean any javascript components (Collapse, Navbar, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.
Bootstrap 5 is a major update with breaking changes. Also see here that ml-auto/mr-auto have changed to ms-auto/me-auto.

Make sure you have added jsDeliver CDN link from bootstrap homepage for Javascript and CSS both in the head tag.
**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
**<!-- JavaScript Bundle with Popper -->**
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
You have used data-toggle this attribute used in old Bootstrap versions while in Bootstrap 5 you need to use this attribute data-bs-toggle and one other most important things is you have make (aria-expanded="true").

me too is facing same problem first I changed data-target to data-bs-target and data-toggle to data-bs-toggle second I have included bootstrap.bundle.min.js and cdn link of plain bootstrap.min.js adding two same script cause problem
`
<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 id="navbarSupportedContent" class="collapse navbar-collapse" >
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href=#Url.Action("Index","Home")>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href=#Url.Action("AboutUs","Home")>About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href=#Url.Action("OurTeam","Home")>Our Team</a>
</li>
#*<li class="nav-item">
<a class="nav-link" href=#Url.Action("Blog","Home")>Blog</a>
</li>*#
<li class="nav-item">
<a class="nav-link" href=#Url.Action("ContactUs","Home")>Contact Us</a>
</li>
#*<li class="nav-item">
<a class="nav-link" href=#Url.Action("LoanCalculator","Home")>Loan Calculator</a>
</li>*#
</ul>
</div>
</nav>`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
DemoTech
<button
class="navbar-toggler"
**data-bs-toggle="collapse"
data-bs-target="#navbar"**
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>

For me just solve this issue by adding -bs to data-target and data-toggle
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>

Besides including the JS link in the body the buttons and div have same aria-control/data-bs-target and ID :
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-controls='navbarSupportedContent'
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

You use "data-toggle" this attribute used in Bootstrap 3 you need to use this attribute "data-bs-toggle"

I had issues with dropdown menus in the current site that I'm editing. Tonight I finally have a nav menu with dropdowns that allows the dropdown menu to close after clicking on links! I styled it to look whoo hoo via a different template. However, when I add the menu to the site I'm editing, the mobile toggle menu Isn;t opening. How can I fix that? Thanks! :--)
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center">
<div class="container">
<div class="header-container d-flex align-items-center justify-content-between">
<div class="logo">
<!--<h1 class="text-light">LOGO TEXT</h1>-->
<!-- Uncomment below if you prefer to use an image logo -->
<a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="U C F" title="U C F" class="img-fluid top-logo wow bounceOut"></a>
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
</div>
<nav id="navbar" class="navbar">
<ul>
<!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>-->
<li class="dropdown"><span>About <i class="fas fa-arrow-down"></i></span>
<ul>
<li><a class="scrollto" href="#about">About</a></li>
<li><a class="scrollto" href="#more-about">Detailed Info</a></li>
<li><a class="scrollto" href="#about">DropDown 03</a></li>
<li><a class="scrollto" href="#about">DropDown 04</a></li>
<li><a class="scrollto" href="#about">DropDown 05</a></li>
</ul>
</li>
<li class="dropdown"><span>DropDown <i class="fas fa-arrow-down"></i></span>
<ul>
<li><a class="scrollto" href="#about">DropDown 06</a></li>
<li><a class="scrollto" href="#about">DropDown 07</a></li>
<li><a class="scrollto" href="#about">DropDown 08</a></li>
<li><a class="scrollto" href="#about">DropDown 09</a></li>
<li><a class="scrollto" href="#about">DropDown 10</a></li>
</ul>
</li>
<li class="dropdown"><span>DropDown <i class="fas fa-arrow-down"></i></span>
<ul>
<li><a class="scrollto" href="#contact">Contact Info</a></li>
<li><a class="scrollto" href="#about">DropDown 12</a></li>
<li><a class="scrollto" href="#about">DropDown 13</a></li>
<li><a class="scrollto" href="#about">DropDown 14</a></li>
<li><a class="scrollto" href="#about">DropDown 15</a></li>
</ul>
</li>
<!--<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>-->
<!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>-->
<li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li>
</ul>
<i class="fas fa-bars mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div><!-- End Header Container -->
</div>
</header><!-- End Header -->

here the 'data-bs-target' id
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">
and div id must be identical
<div id="kickMyAss" class="collapse navbar-collapse">

Bootstrap nav hamburger button not appearing

I am trying to do the basic bootstrap navbar hamburger button on a collapsed screen. I am first just trying to get the button to be displayed but currently it won't display to the screen.
<nav class="navbar bg-light navbar-expand-sm">
<h1 class="narbar-brand">User</h1>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Projects
</li>
</ul>
</div>
</nav>

There is nothing wrong with your html.
However, did you add js file (from bootstrap) to your html?

check this
<!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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">User</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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</nav>
</body>
</html>

Bootstrap : navbar doesn't close when we click, responsive issue

I have some trouble to hide my navbar when it's responsive.
When we click on the button the navbar don't close everytime..
If someone can help me, i'm on an Angular 9 project.
Demo :
http://jordanbretton.fr
index.html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jordan Bretton</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<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>
</body>
</html>
navbar.component.html :
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
<a class="navbar-brand" routerLink="home">Jordan Bretton</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="home">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="skills">Compétences</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="about">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="projects">Projets</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="https://linkedin.com/in/jordanbretton" target="_blank">
<i class="fa fa-linkedin-square fa-2x"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://gitlab.com/JowB" target="_blank">
<i class="fa fa-git-square fa-2x"></i>
</a>
</li>
</ul>
</div>
</nav>
I really don't know how to fix this problem

You need to find why your aria-expanded="false" stays at true even if you click on it. Inspecting your website, you can see that all the classes are changing but aria-expanded is changing from true to true... Then all the classes go back to true instead of false.
Anyway if I were you I'd use one of these libraries with bootstrap on Angular to avoid that kind of problem.
Ng bootstrap
Ngx bootstrap

Bootstrap mobile menu disappears after toggle

I have an Umbraco site that I'm integrating with Bootstrap. I've created a partial view with a navigation menu and everything seems to be working as intended with the exception of the navbar.
So when you click on the button it expands but immediately snaps back up. When you toggle it back, it almost 'pops into existence' and moves back up to close. Here is the entire output of the DOM
<html class="gr__localhost"><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></title>
<link rel="stylesheet" href="/css/master_styles.css">
<style>#media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" 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="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pumpkin's Blog</h1>
<p>Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture </li>
</ul>
<p>I hope you stick around and comment. </p>
</div>
</div>
</div>
<div id="footer">
Copyright 2018
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>

You are using bootstrap 3.3.7 js with bootstrap 4 css !
<html class="gr__localhost"><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>Pumpkin's Blog - Meow</title>
<link rel="stylesheet" href="/css/master_styles.css">
<style>#media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" 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="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pumpkin's Blog</h1>
<p>Hi! I'm Pumpkin. Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture </li>
</ul>
<p>I hope you stick around and comment. </p>
</div>
</div>
</div>
<div id="footer">
Copyright 2018
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>