I'm just beginning to work on a new bootstrap site and I want the search bar to be part of a separate collapse toggle. I envision having the search bar toggle on the right side of the navbar, followed by the menu toggle.
Here are my questions:
- How can I align the two buttons so they appear next to each other on the right side? Currently, one of them seems to be in the center, and I'm not sure why.
- After separating the form into a different DIV, it no longer aligns to the right side of the page but is slightly indented. What could be causing this?
- I want only one collapsed menu to be open at a time. For instance, if the search is open and I click the menu toggle, I want it to close the search and vice versa.
This is what I have managed to achieve so far. It might look pretty default, but as a beginner, I am still getting acquainted with bootstrap.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
.
. (content omitted for brevity)
.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>