So I'm using the new Bootstrap 4.1 and I'm having trouble with scrollbars not appearing. When the page loads, it isn't big enough to need any scrollbars, but then the user does some searches and when the results show up, the page is bigger than the window. You can scroll, but there is no scrollbar to see. I've tried using overflow-y: scroll, but it doesn't work.
How do I get the page to show scrollbars when the content exceeds the vertical size of the window?
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">BRAND</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" id="searchInput" aria-label="Search">
<div class="dropdown">
<button class="btn btn-outline-info my-2 my-sm-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="searchType">All</span>
<span class="caret"></span></button>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<button class="btn btn-outline-success my-2 my-sm-0" id="searchButton" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron JumboHeaderImg">
<div class="container">
<h1 class="display-3">MAIN JUMBOTRON TEXT</span></h1>
<p class="jumboTextStyle">SECONDARY JUMBOTRON TEXT</p>
</div>
</div>
<div class="container">
<div class="row">
<!-- Left Column with navbar search results -->
<div class="col-md-6">
Blah, blah, blah
</div>
<!-- Right column with details of item chosen from left column -->
<div class="col-md-6" id="detailsContainer" style="display:none">
<h2>Details</h2>
<span class="detailsTable"></span>
</div>
</div>
<hr>
</div> <!-- /container -->
</main>
<!-- Custom Script -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
OK, so I think this was an issue with the browser/computer. I had an update/shutdown and when I got back into the page, the scrollbars started appearing automatically. I didn't change the code with regard to trying to display scrollbars, but it seems to have solved itself.
Thanks to everyone who looked into this.
Related
I have the bootstrap nav snippet below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg"><a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item" href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</nav>
</div>
</nav>
I have copied their example on the bootstrap documentation site where possible.
I want to get the second <ul> pushed to the right so am using mr-auto as they do in their example however it's not working for me like it is in the example, I don't understand why. I even tried adding the class d-flex to the #navbarMain div but still no luck.
Even running through the values in the inspector shows everything the same as in the example as far as I can see.
Can someone tell me why this isn't working?
What you want from image you attached:
What my code produces to match your image:
Updated Code: Demo on JsFiddle
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- 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">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand" href="#">Navbar</a>
<a class="navbar-item text-white pr-2" href="#">Home</a>
<a class="navbar-item text-white pr-2" href="#">Link</a>
<div class="dropdown">
<button class="btn text-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
<button class="btn btn-disabled text-white pr-2" disabled>Disabled</button>
<nav class="navbar navbar-dark bg-dark ml-auto mr-1">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</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>
Found the issue, it was where I had used a container to constrain the nav elements:
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg">
You can have nested nav's but shouldn't have nested navbar classes, removing the additional <nav class="navbar"> made everything work:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item"
href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</div>
</nav>
A MVC 5 project was created and you want to change the menu of this one, for it resorted to Bootwatch, the menu that you want to implement is the following
The first thing I did was change the general style of my project, download the bootstrap.css file
and then I replaced it with my BundleConfig because of the previous one I had, this modifies the style of my project, but does not include the aforementioned navbar
To put the Navbar that you want, implement the following code in my _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Muebles Pangal</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">Muebles Pangal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<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="#Url.Action("Index", "Categorias")">Categorias </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Productoes")">Productos </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Ubicacions")">Proveedores </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Buscar" type="text">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Sistema Bodega</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
But when executing my project I find the following problem, my menu does not work in a good way to the responsive call, this means that when I change (shrink) the size of my browser and call the menu from my <span class = "navbar- toggler-icon "> </ span> this is displayed, but it immediately collapses again.
So it does not work in the right way, I've been trying to solve this for days but I have not had good results.
I have installed the Bootstrap and Bootstrap.less packages, could someone help me? what's going on?
any help for me?
You are missing jQuery.min.js i believe, or it might be placed in the wrong order in your code structure. Hope this snippet helps!!
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">Muebles Pangal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<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="#Url.Action(" Index ", "Categorias ")">Categorias </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" Index ", "Productoes ")">Productos </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" Index ", "Ubicacions ")">Proveedores </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Buscar" type="text">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
Can you check your css for the following:
.navbar-collapse.collapse {
display: none!important;
}
I am able to get a working menu in a new MVC 5 project using what you posted, but I do not have the same css as you.
Please see a similar problem: Bootstrap mobile menu wont stay open
This question already has answers here:
Bootstrap 4 - Toggle button not working [duplicate]
(3 answers)
Closed 4 years ago.
I just created a new file and copy and pasted the Bootstrap Starting Code from its official site.
But the problem is whenever I minimize the browser screen to test how this menu works in small devices, the menu toggle button does not seem to be working.
As in this image shows, when I click on the button, it does not collapse and shows the menu items, somehow:
So what's wrong with this menu?
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>Hello, world!</title>
</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>
<div class="collapse navbar-collapse topMenu" id="navbarSupportedContent">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Try this code - if you post your code then I can see what your doing. Do you definitely have the class="navigation-toggle" and data-toggle="collapse" and data-target="#navigation-id" (which links to your nav menu - this needs to be done to sync the two up.
Use the CDN
<head>
<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>
<header class="navigation navbar" role="navigation">
<div class="container-fluid">
<div class="row">
<header class="navigation navbar" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<img class="navbar-brand contini-logo" src="contini-logo.jpg">
</div>
<nav class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="contini-navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!--Navbar header end - wierd since it is a wrapper -->
<div class="collapse navbar-collapse" id="contini-navigation">
<ul class="nav navbar-nav" id="main-menu">
<li><a>Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Our Restaurants<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Contini George Street</li>
<li>Canonball Restaurant & Bar</li>
<li>The Scottish Cafe</li>
</ul>
</li>
<li><a>About</a></li>
<li><a>Events</a></li>
<li><a>What's On</a></li>
<li><a>News</a></li>
<li><a>Gifts</a></li>
</ul>
</div> <!-- id contini navigation -->
</div> <!-- col-sm-12 -->
</div> <!-- row -->
<!-- <div class="row"> ===== DON"T Understand what they have done on the original site here =====
<div class="col-sm-12">
</div>
</div> -->
</nav>
</div> <!-- row -->
</div> <!-- container -->
</header>
Bootstrap's v4 btn-outline-primary doesn't work on the nav links when viewed on my iPhone, but works fine (albeit solid without outline) when viewed on my laptop and desktop screens. I looked around and didn't find any solutions specific to this. I'm using Bootstrap 4.0.0.
HTML is:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>
<!-- START NAVBAR -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
<span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<!-- removed .active -->
<a class="nav-link btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
</div>
</li>
</ul>
<!-- REMOVED THE SEARCH FORM -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</div>
<!-- END ADDED DIV -->
</nav>
<!-- END NAVBAR -->
<!-- START JUMBOTRON -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col titleDiv">
<h1 class="line1">RON SMITH</h1>
<p class="line2">JavaScript Is Cool</p>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<!-- START FOOTER -->
{{>footer}}
<!-- END FOOTER -->
<script src="../js/jquery.slim.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
Everything works fine except when tapping on iPhone. There's no highlighting of the button or links with color in responsive mode.
The btn-outline-primary class is not designed to be used the way you were using it. So, saying that it "works fine" means you misunderstood how it was supposed to work in the first place because based on the current behavior resulting from your code, it does NOT work "fine".
To make the btn-outline-primary class work the way it's supposed to be used and work, you need to add the btn class additionally to that as shown in the code snippet below. In other words, btn is required for btn-outline-primary to work properly even though the effect you get that way might not be the effect you were going for.
Here's the code snippet (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container"> <!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
<span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <!-- removed .active -->
<a class="nav-link btn btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link btn dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
</div>
</li>
</ul>
<!-- REMOVED THE SEARCH FORM -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</div> <!-- END ADDED DIV -->
</nav>
I'm learning to work with Bootstrap, I made a menu, but the menu items get added in the right side, vertically, instead of the left side, horizontally. Help me identify my mistake.
Html file:
<html>
<head>
<title>Register</title>
<link rel ="stylesheet" href="css/bootstrap.min.css"/>
<link rel ="stylesheet" href="css/main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default " id="navbar">
<div class="container-fluid">
<div class = "navbar-header">
Brand
</div>
<ul class = "nav navbar-nav" >
<li> Home <span class="caret"></span></li>
<li>Team</li>
<!-- Gallery
Partners
News
Contact us
Register -->
</ul>
</div>
</nav>
<div></div>
</body>
</html>
main.css:
#navbar{
/*back ground color*/
background-color: #4311dd
}
/*change color to white*/
#text{
color:#FFFFFF;
}
The webpage I see,
Help me find where I have gone wrong.
This is because you are leaving out important components i.e. stuff that's designed to be part of the Bootstrap navbar. Include those components back in and everything will show up as intended.
Bootstrap 4 is designed to be mobile first.
So, if you leave out the navbar-toggler components, then you get what you see because on mobile devices the navigation is stacked vertically.
Use this sample code as a template:
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
P.S. The most recent version of Bootstrap 4 is beta 3. Beta 3 did introduce a few breaking changes as opposed to beta 2. (although none of them affect the navbar components)
You should add navbar-expand-lg class on <nav> and mr-auto in ul like following way:
<nav class="navbar navbar-default navbar-expand-lg " id="navbar">
<div class="container-fluid">
<div class="navbar-header">
Brand
</div>
<ul class="nav navbar-nav mr-auto" >
<li> Home <span class="caret"></span></li>
<li>Team</li>
<!-- Gallery
Partners
News
Contact us
Register -->
</ul>
</div>
</nav>