Center the alignment of Navbar search form and button using Bootstrap 4

Below is the code for the header, and I am trying to center align its search bar and button

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Aditya Shrivastava</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <nav class="navbar navbar-light bg-light">
      <form class="form-inline text-center justify-content-center">
        <input class="form-control mr-sm-2 text-center justify-content-center" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0 text-center justify-content-center" type="submit">Search</button>
      </form>
    </nav>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ml-auto text-center justify-content-center">
        <a class="nav-item nav-link" href="#">Twitter</a>
        <a class="nav-item nav-link" href="#">Resume</a>
        <a class="nav-item nav-link" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>

htmlcssbootstrap-4navbar

Answer №1

When working with Bootstrap 4 Navbar content, it is recommended to utilize the utility classes

  • flex-grow-1 should be applied to the brand and form elements to ensure they fill the width
  • mx-lg-auto can be used to center the form on lg devices and above (navbar-expand-lg breakpoint)
  • ml-auto will keep the right navbar-collapse aligned to the right
  • m-* and p-* are useful for adjusting margins and padding as needed
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand flex-grow-1" href="#">Aditya Shrivastava</a>
        <div class="flex-grow-1 d-flex">
            <form class="form-inline flex-nowrap bg-light mx-0 mx-lg-auto rounded p-1">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ml-auto">
                <a class="nav-item nav-link" href="#">Twitter</a>
                <a class="nav-item nav-link" href="#">Resume</a>
                <a class="nav-item nav-link" href="#">Blog</a>
            </div>
        </div>
    </nav>
</header>

https://www.codeply.com/go/NXIwAj610b

Related: Bootstrap NavBar with left, center or right aligned items

Answer №2

Ensure you add text-align: center; to the .form-inline class, or utilize the built-in Bootstrap class align="center".

I hope this guidance proves useful.

If you need more clarification, please feel free to ask.

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Aditya Shrivastava</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <nav class="navbar navbar-light bg-light">
      <form class="form-inline" style="text-align: center;">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </nav>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ml-auto">
        <a class="nav-item nav-link" href="#">Twitter</a>
        <a class="nav-item nav-link" href="#">Resume</a>
        <a class="nav-item nav-link" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>

Answer №3

Bootstrap comes with built-in center alignment, you just need to add align="center" next to your form class.

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Aditya Shrivastava</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <nav class="navbar navbar-light bg-light">
      <form class="form-inline" align="center">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </nav>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ml-auto">
        <a class="nav-item nav-link" href="#">Twitter</a>
        <a class="nav-item nav-link" href="#">Resume</a>
        <a class="nav-item nav-link" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>

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

Using JQuery to properly introduce a script in the body of a webpage

<script> /* adjust #splash-bg height based on #meat element */ $(window).on('load',function(){ var splashbgHeight = $("#meat").css("top"); $("#splash-bg").css("height",splashbgHeight); $(w ...

javascriptjqueryhtml

The issue of Markdown not being recognized inside nested divs

As I develop a Bootstrap-themed website with Jekyll, I've encountered an issue when formatting content in markdown. My goal is to organize my posts using Bootstrap grids like this: <div class="row"> <div class="col col-md-6" markdown="1"&g ...

htmlbootstrap-4markdownjekyllkramdown

css clip-path hover effect restricted to specific shape

In the codepen I created, there are two greyscaled shapes. Currently, it's only possible to hover over one of them, as the original size is a box that overlaps both images. Is there a way to detect the shape being hovered over? Z-index hasn't pro ...

javascripthtmlcss

Dynamic page url redirection involves creating search-engine friendly URLs for dynamic

After successfully incorporating URL rewriting into my PHP website, I am facing an issue with displaying the links as desired. mydomain.com/komet-india/Best-Indian-Hill-Stations-1/Delhis-Hotel The elements Best-Indian-Hill-Stations,1,Delhis-Hotel in the ...

phphtmlurl-rewriting

a:hover CSS style altering the behavior of buttons with images in a web browser

Earlier I attempted to ask this question from my phone, but it ended up being overly convoluted and confusing. Therefore, I have decided to start fresh after locating a working PC. Unfortunately, due to the sensitive nature of the project, I am unable to p ...

javascripthtmlcssinternet-explorerinternet-explorer-11

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

I have been exploring the use of @vanilla-extract/css for styling in my React app. The style method in this library exports a className from the *.css.ts file, but I need inline styling to achieve Shadow DOM encapsulation. During my research, I came acros ...

javascriptcssreactjsstitchesvanilla-extract

Enhancing website interactivity by dynamically updating multiple elements with PHP and jQuery without the need for page refresh

I have a PHP page that incorporates jQuery to allow users to update a specific item without the need for page refreshing. This functionality is used for updating availability for an event where users can choose between Yes, No, or Maybe. Each click on the ...

phpjqueryhtml

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

jquerycsshtml

Learn how to merge cells vertically and make their text appear vertically using PHP and SQL queries

Can someone help me figure out how to merge cells in the Kitchen Time column and make the time text vertical? I've been trying different things, but all I managed to do was hide cells with the same kitchen time below. Here's a link to the screens ...

phpcss

Create gaps between two buttons in HTML without using CSS

I created two buttons and aligned them to the right side of the page, but they are stuck together without any space in between. I tried adding a margin of 30px, but they both moved together. <button type="button" class="btn btn-primary&qu ...

htmlcssweb

Explore the differences between the "date" type in HTML and the Date object in Typescript

Here is some code in HTML: <div class="form-group row"> <label class="col-sm-2 col-form-label">Due date: </label> <div class="col-sm-10"> <input type="date" class="form-control" #due_date> ...

htmlangulartypescript

Changing fonts for languages that are read from right to left in WordPress

I am currently working on a WordPress site that features posts in both English and Urdu. The English posts are written from left to right (ltr), while the Urdu posts are written from right to left (rtl). When I submit post data in the wp editor, it publish ...

csswordpressfontsright-to-left

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...

jquerycssinternet-explorer-8

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?

I have been working with GWT (Google Web Toolkit) version 2.5.1 and successfully developed a sample application to display the username and password. However, I am now facing challenges in inserting these values into a MySQL database table using JDBC or Hi ...

mysqlhtmlhibernategwt-rpc

Guide to positioning an icon beside the tab title in bootstrap-vue

Is it possible to add an icon next to the tab titles in vue-bootstrap? I have been searching for documentation on this but haven't found any information. I attempted using headHtml, which did insert the icons but caused the tab titles to be non-react ...

tabsvuejs2bootstrap-4

Is there a way to automatically close a created div by clicking anywhere outside of it?

I'm facing an issue with a dynamically created div that I want to close by clicking outside of it. However, when I try to achieve this functionality, the div closes immediately as soon as it is opened. closediv(); } function closediv() { d ...

javascripthtmlweb

Is there a way to condense a previously expanded row within an expandable section of an Angular material table?

Trying to collapse an expanded row in Angular has been a challenge for me. I have a page structured similarly to this example: https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html (sourced from the documentation here: h ...

htmlangularangular-material

The Bootstrap dropdown is causing a paragraph to have an overflow issue

When my paragraph text contains too many words, it tends to overlap. Take a look at the code snippet below: <a class="dropdown-item content btnOpen"> <div class="col-sm-12"> <div class="row"> <div class="col-md-2 p-1"> ...

htmlcssbootstrap-4

Attempting to input data into elements that have been generated automatically

Trying to set values to elements with automatically generated id's: This code is functional: <input type="tekst" id="<?php echo $item->getId();?>"> <script> document.getElementById("<?php echo $item->getId();?>").v ...

javascriptphphtmlmysqldatabase

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

I am currently in the process of creating a user interface for setting pricing parameters. There are three categories that need to be visually represented, along with two sliders to determine suggested Buy/Sell prices. To demonstrate my progress so far, I ...

javascripthtmlsvg