Issues arise with alignment of the button in an inline form when the Bootstrap navbar collapses

Currently delving into the world of Web Development and experimenting with BootStrap 4.0. I have a search field positioned to the right of the navbar, which looks fine in desktop view. However, as soon as the dimensions change to that of a phone, my nav links collapse and the search field and button are no longer aligned. It works smoothly on tablets but not on smaller phone screens. Would greatly appreciate any assistance with this issue.

<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <!-- Brand and Name -->
        <a href="#" class="navbar-brand">
            <img src="https://logoobject.com/wp-content/uploads/edd/2018/02/Free-Coffee-Logo-1-820x820.png" width = "30" height="30" class="d-inline-block align-top" alt="">
            Koffee
        </a>
        <!-- For hamburger menu -->
        <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>
        <!-- Collapsable nav -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left hand side content use margin-right (mr) -->
            <ul class="navbar-nav mr-auto">
                <!-- Active Link -->
                <li class="nav-item"><a href="#" class="nav-link active">About Us</a></li>

                <!-- Dropdown Menu -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Features</a>
                    <div class="dropdown-menu" aria-labelledby = "navbarDropdown">
                        <a href="#" class="dropdown-item">Cultural</a>
                        <a href="#" class="dropdown-item">The best Cocoa</a>
                        <a href="#" class="dropdown-item">For the workers</a>
                        <!-- Just a line :) -->
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Pricing</a>
                    </div>
                </li>
                <!-- Disabled link -->
                <li class="nav-item"><a href="#" class="nav-link disabled">Reviews</a></li>
            </ul>
            <!-- Right Hand side content use margin-left (ml) -->
            <ul class="navbar-nav ml-auto">
                <form class="form-inline">
                    <input class="form-control" type="search" placeholder="Search..." aria-label="Search">
                    <button type="button" class="btn btn-outline-success">Go!</button>
                </form>
            </ul>

        </div>
    </div>
</nav>

DEMO

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Instead of using form-inline for the search form, consider using d-flex...

Check out this example on jsfiddle

<ul class="navbar-nav ml-auto">
    <form class="d-flex">
        <input class="form-control" type="search" placeholder="Search..." aria-label="Search">
        <button type="button" class="btn btn-outline-success">Go!</button>
    </form>
</ul>

Answer №2

Here are some snippets of styles that impact the .form-control class:

.form-control {
    width: 100%;
}

@media (min-width: 576px)
.form-inline .form-control {
    width: auto;
}

Initially, the default setting is width: 100%, which may not be ideal for your needs. However, as the screen width exceeds 576px, the width: auto property takes precedence. Adjusting the default width: 100% to width: auto should resolve this issue.

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

Eliminating harmful elements in HTML code

I am looking to showcase an HTML-formatted email on a website. I am aware that HTML can contain malicious elements that should be removed before displaying it to users. This HTML email is received from an unidentified source, possibly created by a malici ...

javascripthtmlsecuritymalware

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

javascripthtmlcssangularjs

The table does not recognize any of the CSS classes when the TAG is inputted inside

I am currently working on a challenging form for players to save their personal character sheets in a database. To achieve this, I am incorporating numerous Input TAGs and utilizing tables for layout purposes, ensuring an organized and efficient design. E ...

cssinputhtml-tableuser-agent

Why does the variable in throw new exception print instead of the variable value being printed?

<div style="text-align: left;"> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> Name:<input type="text" name="name"><br> Age:<input type="text" name="age"> <br> ...

phphtml

Issues with jQuery animate not functioning properly when triggered on scroll position

I found a solution on Stack Overflow at this link, but I'm having trouble implementing it properly. The idea is to make an element change opacity from 0 to 1 when the page is scrolled to it, but it's not working as expected. The element is locat ...

jquerycss

Capture line breaks from textarea in a JavaScript variable with the use of PHP

I need help with handling line breaks in text content from a textarea. Currently, I am using PHP to assign the textarea content to a Javascript variable like this: var textareaContent = '<?php echo trim( $_POST['textarea'] ) ?>'; ...

javascriptphphtml

Looking to troubleshoot a white background issue while attempting to create a transparent navbar

I am trying to create a full-page landing with a transparent navbar using bootstrap4. My goal is to have a sticky navbar that remains at the top as the user scrolls down the page. When I apply the class 'fixed-top', the navbar stays at the top b ...

htmlcssbootstrap-4navbar

Modifying KineticJs.Image with css styling

Hey there, I'm currently working on a project that involves canvas manipulation. I've successfully figured out how to draw an image and move it within the canvas, which wasn't too difficult to achieve. However, I'm now facing a challeng ...

csskineticjs

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

Tips for making the height of <select> and <button> elements equal even with padding

I'm trying to make sure that both the 'select' and 'button' elements have the same height. Check out my JS Fiddle here Here's the HTML code: <select><option>...</option></select><button>Button& ...

htmlcssheight

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

The makeSVG function from GoJS is failing to generate the correct HTML SVG object

I have been utilizing the Diagram.makeSVG() method to create an SVG from my diagram. Subsequently, I appended the SVG to a new empty tab using this script (diagram represents my Diagram Object): function print() { var newTab = window.open(), svg ...

javascripthtmlinternet-explorersvggojs

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

Tips for removing a previous file from an 'input type' in HTML5 FileReader

Here is a file input with an associated function: <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" / ...

javascripthtmljqueryfilereader

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...

javascriptphphtmlcss

Switching the parameter to navigate to the appropriate page

Hi there, I'm looking to implement a quick change using the onchange parameter. Can someone assist me in using the onchange parameter to navigate to a new page? So, if someone selects for instance Basic info, they will be directed to a new page custo ...

javascripthtmlonchange

Pick the final offspring of the HTML element that is not assigned to a specific class

Currently, I am attempting to target the final element of a child that lacks a specific class. You can view my progress on this JSFiddle. <aside class="col2"> <div class="infobox teal"></div> <div class="infobox mediumbrown"&g ...

jquerycss

Display fixed or absolute elements within a scrollable container

I want to create a unique design with overlapping divs that can be selectively displayed through scrolling. While this effect is possible with images using background-attachment: fixed, I am seeking a solution that can work for any child element. Here is ...

css

Display Numerous Values Using Ajax

Having difficulty showing data from the 'deskripsisrt' table in a modal bootstrap? I have successfully displayed from the 'srtptr' table, but not sure how to proceed with the 'deskripsisrt' table. Here's a snippet from my ...

javascriptphpjqueryajaxtwitter-bootstrap