What is the best way to align a search box within a Bootstrap navbar?

Seeking assistance to center the search box within my Bootstrap navbar without disrupting alignment. I am aiming for a similar look as seen on linkedin.com. Any suggestions on how to achieve this? Here is a JSFiddle link to my navbar: https://jsfiddle.net/b6pmy9w4/. Thank you in advance for any guidance.
Html Code:

<nav class="navbar navbar-default" style="border-radius: 0;">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed burger-button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand jura-font" href="/#!/">COLIGN</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <!-- <button type="submit" class="btn btn-default">Submit</button> -->
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">View Profile</a></li>
                                <li><a href="#">Manage Account</a></li>
                                <li><a href="#">Invite a friend</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/auth/signout">Log out</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

Answer №1

Not sure if this is the most effective method, but

  • Delete the navbar-left
  • Reposition it below the ul
  • Adjust to text-align:center

Check out the updated code

Answer №2

Although this post may be dated, I recently discovered a useful trick in Bootstrap4. By simply applying the ml-auto class to the form tag, I was able to achieve the desired alignment:

<form class="form-inline my-2 my-lg-0 ml-auto">

In addition, you have the option of incorporating col classes to customize the size of both the form input and button.

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

The issue with Framer motion's whileInView is that it does not animate the element when it is within the viewport in Next.js

In my current Next.js 14 project with the App Router, I decided to play around with animations using Framer Motion. One specific feature I wanted to implement was animating text elements into view as they enter the viewport. The idea is for the text to gra ...

most effective method for recycling dynamic content within Jquery mobile

My jQuery mobile app has a requirement to reuse the same content while keeping track of user selections each time it is displayed. I have successfully created the necessary html content and can append it to the page seamlessly. The process goes something ...

Is there a way to address this scrollbar issue without relying on HTML?

Currently, I am working on a website where the only customization allowed is related to CSS. While I've been able to make progress, I've encountered an issue with the scrollbar placement. The scrollbar is extending beyond the boundaries of the di ...

What is the method to retrieve the color of a linearGradient in an SVG at a particular

I am working on a unique progress bar that uses a linear gradient and a small ellipse to indicate the completion percentage. The AngularJS binding updates the completion percentage and a function is called. My challenge is to change the color of the ellip ...

Creating a Set of Buttons in HTML

Need some assistance with grouped buttons. Let's consider a scenario where there are 5 buttons on an HTML page. When the 3rd button is clicked, buttons from 0 to 3 should change color and the function should return 3. Similarly, when the 5th button is ...

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

Removing fragment identifier from the URL

If you go to stackoverflow.com/#_=_, the expression window.location.hash will display #_=_. All good so far. But when you run window.location.hash = '' to get rid of the hash, the URL changes to stackoverflow.com/#. (Note the unexpected # at the ...

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

Having trouble with CSS messing up your gridview button display?

Oddly enough, whenever I place buttons inside a gridview, they end up looking very small (as shown in the image below), even though the gridview itself has no CSS applied to it. Is it possible that some other CSS is affecting the buttons? I have too much ...

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...

Using jQuery to extract the HTML content of an element while removing the style attribute

Is there a way to retrieve the raw HTML of an element, or obtain the HTML without the "style" attribute applied? Let's consider the example below: <div class="outer"> <div class="inner"> some text </div> </div> A ...

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

Determining the worth of radio buttons, dropdown menus, and checkboxes

I am working on designing a menu for a pizza place as part of a learning project. The menu allows users to select their pizza size from small, medium, and large using radio buttons, and then customize it further with three select boxes where each selection ...

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?

Hey there, I'm having some trouble extracting data from a URL to my HTML file using jQuery. Can anyone help out? I'm still new to this. Here's the code <html> <head> <title> My Program </title> <script src="ht ...

Select dropdown in AngularJS for Date formatting

After retrieving json data from a web API, I found that it contains a series of datetimes. My goal is to select a specific datetime from a dropdown list. While I can populate the list without any issues, the formatting appears to be incorrect and I'm ...

Is it possible to apply CSS opacity only to the background color without affecting the text on top of it

Is it possible to set the opacity property specifically for the background of a div, without affecting the text inside it? I attempted to achieve this with the following code: background: #CCC; opacity: 0.6; However, it seems like the opacity change is ...

The final section of this code is failing to process PHP forms

My current project involves developing a form in PHP that fetches values from a database. The first code block, which checks for the existence of a value using if (!isset($_POST['nieuweBest'])), is functioning correctly. The second code blo ...

Modifying the .textcontent attribute to showcase an image using JavaScript

I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...

Create a dynamic slideshow using a bootstrap carousel in conjunction with the powerful php glob() function

I'm struggling to create a homepage featuring a slider that pulls images dynamically from a subfolder within the Wordpress uploads directory. Here's my code: <div id="" class="carousel slide" data-ride="carousel"> <!-- Wrapper for sl ...

The animation of the background color over an image appears glitchy when viewed on Safari

I've been attempting to create an animation that changes the background color over an image. Everything seems to be working fine on all browsers and operating systems except for Safari on macOS. I've searched extensively on SO and Google but have ...