Shift the Search bar to the last position on the navigation bar

I'm looking to relocate the search icon and input field to the end of the navbar. I'm currently using Bootstrap 5.0.2, but I am still new to Bootstrap, HTML, and CSS, so I'm not sure how to accomplish this. I want the width of the search box to remain at 50%, rather than increasing it to 100% which would automatically move the search box and icon to the end. I want both elements to be aligned to the right while keeping the width at 50%.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeabb0aeb0ac">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <!-- Bootstrap Icons -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fc2868c80819cafdec1dedfc1db">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265348564854">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be8e4f9eecbb9a5b2a5b9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba5bba7">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>


</body>

</html>

My goal is to shift the search input and icon to the far right end of the navbar.

htmlcssnavbarbootstrap-5

Answer №1

Eliminate the style="width: 50%" attribute from your search bar input. This is causing the container to be twice as wide as the input, while the search icon remains smaller, resulting in white space.

Although you mentioned in a comment that you want the input to have a width: 50%, you can achieve this by utilizing the class ms-auto on the input element to align all elements to the end of the flexbox container:

Answer №2

    .Header {
  width: 100%;
  height: 75%;
  position: fixed;
  background-image: url(/NavBar/Background.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/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous>

  <!-- Bootstrap Icons -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/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 class="form-control me-2 ms-auto" 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/popper.js/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>


</body>

</html>

Answer №3

The immediate child elements within the .navbar class are styled using flex layout and will automatically be set to justify-content: space-between. If necessary, additional flex utilities can be utilized to modify this behavior. Check out more information on flex utilities here You have the ability to use the flex property in a similar manner to CSS. Consider utilizing the justify-self property if needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"An interactive webpage utilizing HTML5 that transmits sensor information from an iPhone to a server

Recently, I have been immersed in a project that involves utilizing the gyroscope of an iPhone to manipulate items on a computer screen. To achieve this, I have been using an application called "Sensorlogger" which allows me to stream sensor data to the co ...

htmlaccelerometersensorsgyroscope

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

javascripthtmltypescript

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

htmlcssbootstrap-4

Continuously replicate SVG horizontally without limit

In search of the perfect visual effect, I am eager to develop an infinite animation featuring a car moving horizontally with various landscape layers passing by in SVG format. Struggling to find a way to seamlessly repeat my SVG landscape layers along the ...

javascriptcsssvg

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

Ways to update the UI dynamically in Angular without the need to refresh the entire page

On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...

htmlangulartypescriptangular-materialeventemitter

The jQuery click event does not fire within a bootstrap carousel

I am trying to set up a bootstrap carousel where clicking on an image inside it will trigger a self-made lightbox. However, I am facing some issues with the JavaScript code not being triggered with the following syntax: $('html').on("click", ".l ...

javascriptjqueryhtmltwitter-bootstrap

ACTUAL preventing a component from losing its focus

I have been exploring ways to effectively stop a DOM element from losing focus. While researching, I came across different solutions on StackOverflow such as: StackOverflow solution 1 StackOverflow solution 2 StackOverflow solution 3 However, these sol ...

javascriptjqueryhtmlfocus

Utilizing HTML5 history instead of hash URLs to preserve the user's browsing history

Our application is a single page that dynamically loads results based on query strings. The query string format we use is as follows: ?city=Delhi&pn=1 Within the SPA, there are different sections displayed on the same page. As users navigate through ...

javascriptjqueryhtmlhistory.jshtml5-history

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

When it comes to my form, I have a select menu that sends data to an SQL database and then fetches it back when it is called for editing. The value being edited should be displayed in the select menu option as selected. Here's a peek at my code: < ...

htmlangulartypescriptcrud

The Label method in the Html helper does not display the id

The creation of the checkbox and its label was done using an HTML helper: @Html.CheckBoxFor(m=>m[i].checkExport) @Html.LabelFor(m=>m[i].checkExport) To customize the label, I added the following CSS in a separate file: input[type="checkbox"] + l ...

csshtml-helper

Acquire HTML content and save it in a MYSQL database: A Step-by-Step Guide

How can I effectively store an HTML page with CSS in a MYSQL database? Is this even feasible? What type of column should be used for storage? And how can I retrieve the stored formatted HTML and display it correctly using PHP? If the page contains imag ...

phpmysqlhtml

Guide on including a dropdown-item within the navbar

I've implemented a header with a navbar inside. I want to create a dropdown menu element, but for some reason, my item is not appearing. On this link, it looks simple: https://getbootstrap.com/docs/4.0/components/navs/ Pills with dropdowns <l ...

htmlcssdrop-down-menubootstrap-4navbar

Instructions for arranging dropdown options alphabetically with html, vue, and js

When working with JavaScript, is there a method to populate an options list from a database and then sort it alphabetically? ...

javascripthtmlvue.jsvue-component

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...

javascriptjqueryhtml

Achieve perfect alignment in a 2-column row in Bootstrap 5 by removing padding from one column while ensuring column 2 remains perfectly aligned

My Bootstrap 5 layout consists of two columns, each set to 50% width: <div class="container-fluid"> <div class="row"> <div class="col"> One of two columns </div> ...

multiple-columnsbootstrap-5

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

What could be causing my Codepen code to malfunction?

I've transferred the code from CodePen to Atom and saved it. Even though I have added the jQuery script and linked the stylesheets correctly, my local page is still displaying differently. Codepen - http://codepen.io/jordan_miguel/pen/gLwJRb Browser ...

jqueryhtmlcss

Learn how to dynamically insert data retrieved from a database into a PHP database table

After fetching data in a tabular format from the database, I noticed that three columns of the table are retrieved directly while the remaining two consist of drop-down lists and checkboxes. Now, my challenge is to extract data from the retrieved rows and ...

phphtmlforms