Location of the search bar

I am having trouble figuring out which class in Bootstrap I should modify in order to center the search bar in the navigation bar. Can anyone help?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7c7b7f626e286b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="264449494d5d525a4f466744191a08110c4f374f54">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f7fafae4f9f9f0ebccdbdb929e969c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6c8cfcac8dfcbcac8efd7d8c78481899fcc">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/home/home/Desktop/JAIN MEDICOS/css/master.css">
    <title>Title</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Jain Medicos</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">
        </li>
      </ul>
      **<form class="d-flex justify-content-center">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" size="90">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>**
    </div>
  </div>
 </nav>
  </body>
</html>

htmlcssbootstrap-5

Answer №1

Make sure to include the mx-auto class in your form element.

If you are not using the following code snippet, it is recommended to remove it as it may impact the positioning of the search input:

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
  </li>
</ul>

I have made some adjustments to the position of your link and script tags to ensure they are in the correct place.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425c425c410e09180d5e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" href="/home/home/Desktop/JAIN MEDICOS/css/master.css">
  <title>Title</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Jain Medicos</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">
          </li>
        </ul>
        <form class="d-flex mx-auto">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" size="90">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
</body>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736d703f38293c6f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

</html>

See the changes in action on Codepen: https://codepen.io/manaskhandelwal1/pen/poNNpOR?editors=1000

Answer №2

Apply the mx-auto class to the form and remove the me-auto class from the navbar-nav...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Jain Medicos</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 mb-2 mb-lg-0">
                <li class="nav-item">
                </li>
            </ul>
            <form class="d-flex mx-auto">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" size="90">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Check out the demonstration

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

Add a picture and adjust its size as needed

Currently facing an issue where I am attempting to upload an image and display it on screen in a draggable and resizable manner. Utilizing jquery for the draggable and resizable functionalities, the problem lies in the fact that the draggable function is f ...

javascriptjqueryhtml

Leveraging trustAsHTML with an array of object elements

I'm facing a challenge in passing an array of objects from an Angular Controller to the ng-repeat directive. The objects within the array have multiple properties, some of which may contain HTML that needs to be displayed using the ng-repeat. I' ...

javascripthtmlangularjs

Having trouble with the auto suggest feature in PyCharm with Material Design Lite?

Struggling with setting up a fresh Django project in PyCharm and encountering issues with HTML code autocompletion. I've integrated Material Design Lite as the front-end framework, storing the files in a static folder within the project. I attempted ...

htmlpycharmautosuggestmaterial-design-lite

Troubleshooting issue with Django development server causing HTML5 video element to become non-seekable

My Django app is currently serving a webpage with an HTML5 video element, but I've encountered a strange issue. The video.seekable property is returning a timeRanges object with a length=0, when it should actually be length=1. Unfortunately, this mea ...

javascriptpythondjangohtmlhtml5-video

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

javascriptjqueryhtmlarraysjson

Tips for choosing an option from a react dropdown using Cypress

Exploring Cypress: I am currently working with the following code snippet. Although it seems to be functioning, I have a feeling that there might be a more efficient way to achieve the desired result. There are 25 similar dropdowns like this one on the pag ...

cssxpathcypress

The concept of vertical alignment within the CSS Grid system

I am attempting to utilize CSS grids in order to vertically align an unordered list. However, I am encountering the following layout: *A******* *B * *C******* ********* * * ********* ********* * * ********* While the grid template rows a ...

csscss-grid

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

asp.netasp.net-mvcvisual-studio-2010html

Adjusting the sound levels of an HTML audio element using JavaScript

I'm looking to adjust the volume of an <audio> element when a user clicks on an image. HTML: <div id="cloud"> <img name="jsVolumeButton" src="images/cloud.png" width = "140px"/> </div> <audio id="player" src="sounds/rain. ...

javascripthtmlaudio

Enhance the standard input control in Vue.js by extending it to include features such as

Incorporating vue.js: Can you enhance a standard HTML input without the need for a wrapper element? I am interested in customizing a textarea like so: Vue.component('custom-textarea', { data () => { return { } }, template: &apo ...

javascripthtmlvue.jscustom-tag

Exploring the varying treatment of the noscript tag across different web browsers

I've been searching everywhere, but I can't find any information on this topic. What I really want to understand is what browsers do with the content inside a noscript tag when JavaScript is enabled. Let's consider an example: According t ...

javascripthtmlcsscross-browsernoscript

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

Troubleshooting Alignment Problems in Bootstrap 4 Tables

Having trouble aligning certain items. In thisFiddle, I have two options: Option1 and Option2. I want to align the toggle switches with the ones in the first two rows. Specifically, I want the toggle switches to be in the second column of the table and t ...

htmlcssbootstrap-4

Practical applications of flexible layouts in everyday life

I'm currently on the hunt for real-world examples of elastic layouts, specifically those based on using em's for widths. Surprisingly, I haven't been able to find much out there. If anyone knows of any examples, I would greatly appreciate it ...

htmlresponsive-designelasticlayout

Using HTML and CSS to create a flexbox layout with multiple rows

.ent__food__image { display: flex; justify-content: end; } .bev__food__image { display: flex; justify-content: end; } .kids__food__image { display: flex; justify-content: end; } <main class="flex-container"> <!-- Entrees --> & ...

htmlcssflexbox

Access Information within live tabs

When attempting to click on any tabs in order to retrieve their respective data, I am successfully able to do so. However, I'm only able to retrieve the data of one row at a time. Can anyone provide assistance with this issue? <div class="col-lg-1 ...

phphtmltwitter-bootstraplaravel

Whenever I select a link on a navigation bar, it transports me to the desired section of the page. However, I often find that the navbar ends up

Recently, I came across some website templates where clicking on a link in the navbar smoothly scrolls to the corresponding section with perfect alignment. The content at the top of the page aligns perfectly with the top of each division. Upon attempting ...

javascripthtmlcssnavbar

Conceal certain elements from being printed by the client side on a website

Imagine logging into social media but not wanting to see the number of "likes" on posts as the page loads. For example, when you open a photo from a friend and underneath it shows "Somefriend, someotherfriend, and 123123 persons like this", you may want t ...

htmlbrowser

Reduce the border width on my horizontal navigation menu

Check out my css code for a horizontal menu that is compatible across all browsers and functions exceptionally well, except for one small glitch. :) The #menu element that wraps the menu items needs to have a width set to 100%. However, when I add a borde ...

csslist

Tips for aligning specific items to the right side of the navigation bar

I've been grappling with creating a navigation bar for a website, aiming to position 4 elements on the left side of the screen and 2 on the right. Despite knowing that there's likely a straightforward solution, I'm struggling to get the elem ...

htmlcss