I am trying to prevent the collapsed navbar from wrapping under the image. Once the resolution is less than 476px the navbar wraps. I tried using d-sm-inline-block in my <nav> tag but it continues to wrap.
I attached an image showing what the code is exactly doing. I also removed the image I am using from the code because I am building this in a Django Template.
Using Bootstrap4
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
<img class="img-fluid picture-padding" src="temp" alt="temp">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
If I understand the context of your question correctly it looks like you are attempting to add a logo to a responsive bootstrap 4 based template. If my assumption is correct replacing the following line:
<img class="img-fluid picture-padding" src="temp" alt="temp">
With:
<a class="navbar-brand" href="#">
<img src="temp" width="30" height="30" alt="">
</a>
Should accomplish what you're looking for.
Here is the full bootstrap 4 template page code used:
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
<!-- <a class="navbar-brand" href="#">Logo</a> -->
<a class="navbar-brand" href="#">
<img src="./test.png" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</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.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>
</body>
</html>
Here is the mobile result:
Here is the desktop result:
Related
I wonder why the nav-items keeps showing every time I refresh the page in mobile view. I checked the aria-expanded: false but still it does not work.
This is my code:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container-fluid justify-content-between mx-5 px-4">
<a class="navbar-brand" href="#">HELLO</a>
<button
class="navbar-toggler collapse collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link active " aria-current="page" href="#">ABOUT</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page"href="#">PROJECT</a>
</li class="navbar-item">
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">RESUME</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Please note: I'm still a beginner in bootstrap, html and css.
Remove the class collapse collapsed from button and add collapseto a menu div
here is the full code
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light"
<a class="navbar-brand" href="#">HELLO</a>
<button
class="navbar-toggler "
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link active " aria-current="page" href="#">ABOUT</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page"href="#">PROJECT</a>
<li class="navbar-item">
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">RESUME</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
<nav class="navbar navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
The button which is supposed to show up only when window is resized to small size, is always showing on the right of the Website name. It is looking ugly in fullscreen, that is, while viewing in computer mode. I want to remove it from showing in high resolution devices. Tell me where am I making mistake.
Because the correct class name for the Bootstrap 4 Navbar is navbar-toggler, not navbar-toggle.
<nav class="navbar navbar-light navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.codeply.com/go/9uKT2H0EgP
Only use class navbar-expand-sm if you want the icon to show up only on narrow viewports. Find an overview in the documentation. Also you use a wrong class for the hamburger icon: class="navbar-toggler", like
Zim already said.
<!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-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</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>
I'm using Bootstrap v4.0.0-alpha.6 and I'm facing some issues with the navigation menu on Safari starting from 8 and down.
The logo at the left is an image and two buttons('Login', 'Sign Up') at the right are not shown on Safari, I used a live testing website for simulating Safari 6 and I inspected the element and I see that they are in the Dom and taking space in the header, But none of them is shown.
Here is a fiddle: http://jsfiddle.net/h6rc4d7g
Live preview:
.btn-red{
background: #d9534f;
color: #fff !important
}
<!-- Fontawesome 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap v4.0.0-alpha.6 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<!-- Bootstrap v4.0.0-alpha.6 JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable fixed-top">
<div class="container hidden-md-down">
<div class="navbar-collapse clearfix">
<a class="navbar-brand float-left" href="#">
<img class="mt-1" src="http://placehold.it/1121x171/200" width="200" alt="logo">
</a>
<div class="text-center" style="margin: 0 auto; margin-top: 5px; ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link hiw-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hiw-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
<div class="float-right ml-auto" style="margin-top: 5px; ">
<ul class="navbar-nav float-right ">
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="btn btn-red nav-button" href="/new">Sign up</a>
</li>
</ul>
</div>
</div> <!-- .navbar-collapse -->
</div> <!-- .hidden-md-down -->
<div class="hidden-lg-up">
<a class="navbar-brand py-0 float-left mt-3" href="#">
<img style="margin-top: 7px" src="http://placehold.it/1121x171/200" width="150" alt="logo">
</a>
<a class="btn mobile_header_button float-left btn-red mt-3" href="/new">Sign up</a>
<a class="navbar-toggle navbar-toggler-right gray-light float-right" data-toggle="collapse-side" data-target=".side-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</a>
</div> <!-- .hidden-lg-up -->
</nav> <!-- .navbar -->
What is causing this issue and how to solve it?!
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>
This question already has answers here:
Bootstrap 4 navbar not collapsing on large screen
(4 answers)
Bootstrap 4 - Toggle button not working [duplicate]
(3 answers)
Closed 4 years ago.
I'm making a site for my club in school (Brazil) and I'd like to know how to fix the issue in my site on mobile. The three lines in mobile when pressed don't do anything.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>ClubeDiversidade</title>
</head>
<style>
body {
background-color: orange;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Clube da diversidade</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inscrição</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobrenatural.html">Sobrenatural</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tecnologia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outras atividades</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<center>Bem-vindo!!</center>
</div>
</body>
</html>
Hi refers to Bootstrap Documentation.
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
You need to add these lines into your page in order to work.
<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>
I used Bootstrap 4 Editor and copied your code in and it works perfectly, because the editor has built-in bootstrap javascripts.
You have to add jquery and bootstrap js before closing the body to get the working toggle.
Note: The order is important here, put the jquery js link first and then bootstrap js.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>ClubeDiversidade</title>
</head>
<style>
body {
background-color: orange;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Clube da diversidade</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Pagina inicial <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inscrição</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobrenatural.html">Sobrenatural</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tecnologia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outras atividades</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<center>Bem-vindo!!</center>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>
</html>