Changing the position of toggle button in navbar made through Bootstrap
Question
I have made a navigation bar using Bootstrap. Here the toggle button of the navigation bar is always aligned to the right side of the navigation bar. My question is that why is it aligned to its right? What makes the toggle button remain in the right of the navigation bar. Neither do we have ml-auto class for the button, nor we have an element that is between the brand and button which is of auto length. So which property of what class is being applied on this button to make it right aligned with respect to navigation bar?
On removing ml-auto class from ul tag the toggle button is still aligned to the right hand side of the navigation bar.
Just tell me about the property and the class which is responsible for this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Installation</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">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style1.css">
</head>
<body>
<!-- <div class="green blue text-white">Hey</div> -->
<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 ml-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>
</ul>
</div>
</nav>
<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>
3 answers
solution1
0 2020-12-24 18:04:31
Class .navbar has properties, that align button to the right:
display: flex;
justify-content: space-between;
space-between cause elements to have equal space between them. There are only two elements inside .navbar so there is one space aligning button to the right.
More info: https://www.w3schools.com/cssref/css3_pr_justify-content.asp
solution2
0 2020-12-24 18:20:01
Bootstrap from its version-4 started making use of flexbox . And lots of bootstrap components make use of flexbox properties.
navbar is one such component. navbar has display:flex; and justify-content:space-between CSS applied by default and this changes on large screens. That's why Toggle button stays on the right side on smaller screens.
On large screen, when there is no toggle button. the property changes and becomes justify-content:flex-start .
Image from Bootstrap Website:
solution3
0 2021-01-05 17:02:28
"navbar-brand" is the data-attribute causing your toggler being displayed on the right side. The placement of this attribute inside your HTML is controlling the placement of the toggler on your page.
This is the explanation from Bootstraps official documentation:
Navbar togglers are left-aligned by default, but should they follow a sibling element like a.navbar-brand, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.
So instead, put your toggler class first and navbar-brand class after it to display the togglder to the left side.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.