Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h
I copied the HTML and placed it in my JSP page. This is how the final HTML looks:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
<title>2</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<br>
<div class="container">
<h3>Navbar Forms</h3>
<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>
</body>
</html>
When I view this on IE or Google Chrome, the navbar appears larger than in the example, with extra space below the controls. It seems like the button is causing this issue because when removed, the navbar looks similar to the example. Does anyone know what could be causing this discrepancy and how I can fix it? I'm using Bootstrap 4.4.