Creating a search form in Bootstrap 4 that is centered and expands to full width only on small screens

I'm currently working with a bootstrap v.4 navbar that has 3 elements in it. I've managed to align the elements evenly so that the search bar is centered in the navbar. However, when it collapses it takes up the full width of the screen.

Here is the current HTML:

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar5">
    <span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">Brand</a>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
    <form class="mx-2 my-auto d-inline w-100">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="...">
            <span class="input-group-btn">
            <button class="btn btn-outline-secondary" type="button">GO</button>
          </span>
        </div>
    </form>
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="ion-ios-gear-outline"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
    </ul>
</div>

The issue arises when I use a value less than w-100, as the menu icon gets pulled next to the search bar instead of being in the right corner where I want it. How can I fix this? I'd like to achieve a layout similar to this.

Answer №1

For better responsiveness, it is recommended to use a column class like col-md-3 instead of sizing utilities such as w-100...

Check out this link for more information.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="/" class="navbar-brand">Codeply</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarCodeply">
        <form class="mx-2 my-auto d-inline mx-auto col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="...">
                <span class="input-group-btn">
            <button class="btn btn-outline-secondary" type="button">GO</button>
          </span>
            </div>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    ...
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                    ...
                </div>
            </li>
        </ul>
    </div>
</nav>

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

IOS Troubleshooting: Ineffectiveness of the Transform

So I am encountering a slight issue while trying to incorporate this code on iOS because I am not familiar with how iOS operates. On my website, I have implemented a circle that works perfectly fine on browsers and Android devices. However, when it comes t ...

Guide on moving the parent <div> at an angle within an AngularJS custom directive

The code snippet below demonstrates the functionality of dynamically generated ellipse elements as they change color based on an array. I have been experimenting with updating the style property of the parent div element within a custom directive. This in ...

Designing templates for websites and applications using node.js

Simplified Question: As I delve into improving my skills with node.js, I'm exploring the concept of templating. How would using node to serve one HTML file and loading page-specific information through AJAX/sockets impact performance and design princ ...

Secure Your PHP Accounts

My current website hides the account window where users can change passwords, upload files and more using a simple code snippet: <?php if($is_logged_in) { ?> <div id="account_window"> //content </div> <?php } ?&g ...

Notify the user immediately if an HTML template is stolen using Jquery and PHP

After uploading an HTML template to themeforest, I discovered that some websites were giving away the full source code for free. Since HTML is easy to copy, obfuscation doesn't solve the issue. Is there a way to use JQuery to alert me if someone hosts ...

Does IE 9 support endless local storage capacity?

I recently updated my HTML5 persistent storage (localStorage) capacity testing to address a memory exception issue in the previous version. I even created a jsFiddle showcasing it: http://jsfiddle.net/rxTkZ/4/ The testing code involves a loop: var val ...

Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked. Can someone please provide guidance on achieving this? --code not mine-- ...

what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootst ...

Utilize PHP to sift through HTML content and extract a specific tag

How can I extract a specific form using PHP? $url = '<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div class="waitmsg" id="WaitMessage ...

What is the process of compiling HTML code?

In controller, I bind the same data like $scope.name = "<div>geetha teko</div>", this name will now be bound to the HTML like {{name}}. When I view it in the browser, it prints as "<div>geetha tek0</div>". Is there a way to only di ...

Animate text and div elements with bounce or fade-in effects when they appear on the screen in a React application

Animating the elements of my website is a simple task for me, however I am looking to have them animate only when they are visible on the screen without relying on pixels or offsets. I want the animations to be responsive, even in phone mode, without hav ...

Creating unique CSS classes for custom forms in Web2py

What is the best way to assign a custom web2py form's class? for example: {{=form.custom.begin}} Image name: <div>{{=form.custom.widget.name}}</div> Image file: <div>{{=form.custom.widget.file}}</div> Click here to upload: {{= ...

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

What could be causing the HTML content to not display when the code is executed?

I've recently started using Visual Studio Code for my project. I am able to build my code without any errors, but when I run it, the HTML content does not display properly - only the CSS styling for the header and footer is visible. I have tried click ...

What is the most concise way to align one table row in the middle and another at the top?

Is there a way to align different rows in a table vertically with minimal code? I have a table with 3 rows, and I want the first two rows to be aligned vertically to the top, while the third row should be vertically aligned to the middle. If I try to def ...

When clicking on an image, it triggers a unique PHP query, however the results obtained are not accurate

Greetings, I have a search feature on my website. When a user inputs a keyword and clicks the search button, it directs them to jobsearch.php which then displays a list of relevant jobs from the MySQL database. The functionality is working perfectly. Howe ...

What is causing my jQuery to only impact the initial item in my iron-list?

How can I create a toggle effect for the left border of an iron-list entry in Polymer when clicking on it? I found some jQuery code that adds the border to the first entry clicked, but I need help extending this functionality to apply to all list entries ...

I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation: npm run build <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

Retrieve the values by accessing an element upon clicking the "Submit" button

Here is an interesting example that I found on this website I am currently working on a simple webpage to display both the current forecast and extended forecast. This is my Index.html: <!DOCTYPE html> <!-- To change this license header, choose ...

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...