I am creating a search bar with bootstrap and the problem is that I want it to align to the right side of the nav bar, instead it is staying on the left. Here is the issue:
FYI, the search text is being overlapped by the logo, but we don't need to worry about that. The problem is I want the search bar to be on the right side of the screen. By the way, the navbar element is parented to a container-fluid, but not a row.
Why is it not aligned to the right side of the navbar?
#search-bar {
background: #FFFFFF;
float: right;
height: 28px;
width: 32%;
margin-right: 40px
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav > <img src="https://via.placeholder.com/50" alt="Ventr Logo" width="100">
<input type="text" placeholder="Search" aria-label="Search" id="search-bar" align="right">
</nav>CodePudding user response：
Solved, Bootstrap is not necessary for this, I'm just going to use regular HTML and CSS.
CodePudding user response：
Go take a look at the bootstrap navigations that are pre-built. In most cases, they've been the base of what I needed. You can customise them as much as you really want. The code is provided and the search bars are aligned to the right from the start.