Customize your Bootstrap navbar with a specific width and perfectly centered position

Using Bootstrap 4, I aim to customize the inline form in the navbar to have a specific width on laptops and extend to the full screen on mobile devices.

Here is how it appears on my mobile device: https://i.sstatic.net/gjewu.png

https://i.sstatic.net/KJhnr.png

This is the HTML code I am using:

<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="300" style="text-transform: capitalize;">
  <div class="d-flex flex-grow-1">
    <a href="/" class="navbar-brand">AutoGram</a>

    <form class="form-inline" action="/search">

      <div class="input-group mb-10 ">
        <input type="text" class="form-control from-control-sm"  id="q" name="q" placeholder="Enter Brand,Model,Variant for search" >
        <div class="input-group-append">
          <span class="input-group-text" style="color:whitesmoke; background-color: black;" id="SearchButton">Search</span>
        </div>
      </div>
    </form>
  </div>
  <button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

My goal is to widen the input box and center it in the laptop view, while in the mobile view, I want the input group to extend up to the toggle bar.

Answer №1

To enhance the appearance of your form on different screen sizes, you can implement the following CSS:

form {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 992px) {
  form {
    width: 100%;
  }
}

form div.input-group {
  width: 100% !important;
}

This code snippet will adjust the size of the input fields on smaller screens to fill up the available space. Additionally, the width property for the input fields can be customized to your preference by modifying the width: auto value.

The input-group class has been set to width: 100% to ensure it matches the form size.

If you encounter any difficulties, feel free to reach out for further assistance. We can solve the issue together!

Answer №2

To achieve the desired layout, make sure to implement CSS within a media query.

@media(max-width: 991px){
    .form-inline .input-group {
        width: 100%;
        margin-right: 10px;
    }
    form.form-inline {
        width: 100%;
    }
}

For a visual demonstration, refer to this link: https://codepen.io/rvtech/pen/rNNEExJ

Answer №3

If you're looking to center something horizontally without the need for extra CSS or media queries, you can utilize the responsive flexbox utility classes. No need to specify if you want it vertical center or both, the following code snippet will help achieve horizontal centering.

Check out this example on Codeply

<nav class="navbar navbar-light fixed-top navbar-expand-lg navbar-transparent justify-content-lg-center" color-on-scroll="300" style="text-transform: capitalize;">
    <div class="d-flex flex-grow-1 flex-lg-grow-0">
        <a href="/" class="navbar-brand">AutoGram</a>
        <form class="d-flex d-lg-inline flex-grow-1 flex-lg-grow-0" action="/search">
            <div class="input-group mb-10 ">
                <input type="text" class="form-control from-control-sm" id="q" name="q" placeholder="Enter Brand,Model,Variant for search">
                <div class="input-group-append">
                    <span class="input-group-text" style="color:whitesmoke; background-color: black;" id="SearchButton">Search</span>
                </div>
            </div>
        </form>
    </div>
    <button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Answer №4

Here is a helpful code snippet for you

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">AutoGram</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
    
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Enter Brand,Model,Variant for search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav> 
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbbba4bbbbaeb9e5a1b88bfae5fafde5fb">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>

    

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

Place the social media division at the center of the webpage

I've been struggling to center the social media icons on my website, but haven't had any luck. Here's the code I've been working with: https://jsfiddle.net/2ahgL130/1/ CSS: .table1{ margin:0; padding:0; min-width:100% } ...

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

When the button is clicked, dynamically fetch data from a MySQL database using PHP without the need to refresh

I have a .php page where I am displaying a table from my MySQL database using PHP based on a cookie value. On this same page, I have implemented a feature that allows me to change the cookie data without having to reload the entire page by simply clicking ...

Exploring jQuery Ajax: A Guide to Verifying Duplicate Names

When I apply the blur function to a textbox to check for duplicate names using jQuery AJAX, it works perfectly. Here is the code snippet: function checkForDuplicate(data){ $.post("test.php", {name: data}, function (data){ if(data){ ...

Tips for Rearranging Columns Using Bootstrap 4

In my Bootstrap 4 project, I have utilized the following HTML tags. <div class="container"> <div class="row align-items-center"> <div class="col-md-3"> <div class=&q ...

How can you turn a SWFObject into a clickable link?

Is there a way to create a clickable link using a .swf flash file with swfObject? I want the entire video to be clickable, but I'm struggling to figure out how to do it. If you take a look at this example here: , you'll see that they were able ...

Instructions for setting up qtip2 tooltip with npm in an Angular 2 project

Struggling to integrate qtip2 into my Angular 2 app, encountering errors like this After extensive Google searches, I could not find a definitive solution for installing the qtip2 JQuery plugin via npm to enable tooltips. Even after updating JQuery to ve ...

Strange Actions with JQuery Drag-and-Drop Functionality

Apologies for my limited experience with JQuery UI, but I am in the process of creating a web-based chess engine for 2 players using JavaScript. Instead of point and click, I have decided to implement a user-friendly drag and drop feature for non-mobile us ...

Steps to send parameters to external web service in MVC3

A webservice functions in the following way: I captured this information within a partialview. <form action="www.xyz/x/y" method="post"> <input type="hidden" name="abc" value="40" /> <input type="button" id="btn"/> /> Upon cl ...

How can I hide a select dropdown depending on the value selected in another dropdown menu

Can anyone help me troubleshoot why my script is not functioning correctly? I am trying to hide the sem dropdown when the branch dropdown is set to ALL. Below is the script that I have tried, but it is not working as expected. Here is the script I am usin ...

Troubleshooting: Absence of Link Style in Lotus Notes 8.5 Email Client

While creating an HTML email and testing it with Litmus, I noticed that Lotus Notes 8.5 is not showing any link styles. Despite using traditional methods to ensure compatibility with older mail clients, the links are still not displaying correctly in Lotus ...

Strange outcomes observed with CSS Selector nth-child

When utilizing the CSS nth-child selector, I am encountering some peculiar issues. The HTML structure is as follows: <div class="block feature-callout-c" id="overview"> <div class="row"> <div class="span twelve"> ...

AJAX Post Request Function without Form That Does Not Reset

I am currently struggling with understanding the Ajax POST method. I am attempting to make an API request, and since the response has similar parameters, I decided to create a global function that can be used by other HTML/JS pages. However, I am aware tha ...

Checking validation with parsley.js without triggering form submission

I have been working with the latest release of Parsley for data validation. While it is validating my data correctly, I am encountering an issue where the form does not submit after validation is complete. I have spent hours trying to troubleshoot this pro ...

PHP is struggling to interpret the JSON object

I am struggling to pass the username and password to a PHP script and verify them in the database. To achieve this, I utilize the following client-side script to create a JSON object and send it to the PHP file. var myobj = {}; myobj["usrname"]= $( "#cust ...

What are some effective methods for organizing data to optimize user interface functionality?

In my current project, I am developing an application that involves displaying multiple items on a single page. Each item contains a wealth of information that is dynamically generated in the code behind (.aspx.cs) and then shown on the user interface. As ...

Do we require 'function()' when declaring an event?

I currently have two scripts included in my project: <script src="../js/createopp.min.js"></script> <script src="../js/validation.min.js"></script> Within the first script, there is a line calling a function from the second script ...

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

Thank you for taking the time to help me with my issue. For instance, if a user selects a date range from 10 Dec 2016 to 20 April, how can I calculate the number of days for each month within that range? For example, Dec=22 Days, Jan=31 Days, Feb=28 Days, ...

Progressively increasing the time by 15 seconds during each iteration of the CSS @each loop

I recently made changes to a CSS script that involves the repetition of an animation task. Rather than repeating a segment of code 30 times, I decided to streamline it using a loop. Now, there are 30 <div></div> segments and each one undergoes ...

Use jQuery's .each method to reiterate through only the initial 5 elements

Is there a way to loop through just the initial 5 elements using jQuery's each method? $(".kltat").each(function() { // Restrict this to only the first five elements of the .kltat class } ...