I want to move the search icon and search input at the end of the navbar.
I’m using Bootstrap 5.0.2
IDK how to move the icon and search box at the end as I’m new to Bootstrap, HTML, and CSS as well.
also i dont want to increase the size of the search box i want its width to be 50% if i make the width to 100% the search box and icon will go in the end but i want its width to be 50% and keep both of them in the end
.Banner {
width: 100%;
height: 75%;
position: fixed;
background-image: url(/NavBar/Img.png);
background-size: cover;
background-position: center;
}
.icon-white {
color: white;
font-size: 20px;
cursor: pointer;
}
.cont:hover .cube {
color: black;
}
#searchform {
float: right;
}<!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.0">
<title>Linux Coder</title>
<link rel="stylesheet" href="/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- container -->
<div class="container-fluid bg-dark" style="height: 1000px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark row">
<div class="container-fluid">
<a class="navbar-brand" href="#">Linux Coder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOGS</a>
</li>
<!-- Search box -->
</ul>
<form id="#searchform" class="d-flex">
<input style="width: 50%;" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
</form>
</div>
</div>
</nav>
<hr style="color: white; margin: 0;">
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>I want to move the search input and search icon to the end of the navbar
3
Answers
remove the
style="width: 50%"from the input of your search bar. It causes the container to be twice as large then the input while the search icon is smaller than the input. That caused the white-space.As you said within the comment that you want
width: 50%on the input, you could also use the classms-autoon the input to move all elements to the end of the flexbox container:Immediate child elements of .navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.
https://getbootstrap.com/docs/5.2/utilities/flex/
You can use flex property in the same way of css, justify-self property is what u need I think