The hyperlink menu within the Bootstrap 4 navbar extends into the inline-form

Bootstrap 4's site suggests that a navbar with forms should function properly:

I have used the class="form-inline" and at the same level in the HTML, the ul-tag with 3 hyperlinks.

Check out this codepen example:

http://codepen.io/anon/pen/eWOKXL?editors=1010

HTML

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
     aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">my-app</a>

        <div class="form-inline my-2 my-lg-0">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-btn">
                        <a class="btn btn-primary">Create</a>
                    </span>
                    <select class="form-control">
                        <option selected >Item AAAAAAAAAAAAAABBBBBBBBBB CCCCCCCCC</option>
                   </select> <span class="input-group-btn">
                <div class="btn-group">
                    <button  class="btn btn-secondary" >Open</button>
                    <button class="btn btn-secondary" data-placement="bottom"  triggers="manual" #p="ngbPopover" [ngbPopover]="popContent" 
                    popoverTitle="Delete?">Delete</button>
                </div>
             </span>
                </div>
            </div>
        </div>

        <ul class="navbar-nav mx-auto mt-2 mt-lg-0">
            <li class="nav-item"> <a class="nav-link">link11111111111111</a></li>
            <li class="nav-item"> <a class="nav-link">link22222222222222</a></li>
            <li class="nav-item"> <a class="nav-link">link33333333333333</a></li>
        </ul>

        <div ngbDropdown class="justify-content-end d-inline-block">
            <button class="btn btn-secondary" id="dropdownMenu1" ngbDropdownToggle>Items</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <button class="dropdown-item">Item1</button>
                <button class="dropdown-item" >Item2</button>
            </div>
        </div>

    </div>
</nav>

If you resize the window, you will notice that the 3 menu links bleed into the main element with class="form-inline".

How can I resolve this? Upon examining the Bootstrap 4 sample, I noticed that the menu links come before the form-inline element. I have it arranged the opposite way.

Answer №1

To improve the layout, consider removing the form-group around the input-group and create two separate input-group-btn elements instead of using a btn-group. Keep in mind that Bootstrap 4 is currently in alpha stage and may not be completely stable yet.

For reference, you can visit this link:

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">my-app</a>
        <div class="form-inline my-2 my-lg-0">
            <div class="input-group">
                <span class="input-group-btn">
                    <a class="btn btn-primary">Create</a>
                </span>
                <select class="form-control pr-4">
                    <option selected="">Item AAAAAAAAAAAAAABBBBBBBBBB CCCCCCCCC</option>
                </select>
                <div class="input-group-btn">
                    <button class="btn btn-secondary">Open</button>
                </div>
                <div class="input-group-btn">
                    <button class="btn btn-secondary" data-placement="bottom" triggers="manual" #p="ngbPopover" [ngbpopover]="popContent" popovertitle="Delete?">Delete</button>
                </div>
            </div>
        </div>
        <ul class="navbar-nav mx-auto mt-2 mt-lg-0">
            <li class="nav-item"> <a class="nav-link">link11111111111111</a></li>
            <li class="nav-item"> <a class="nav-link">link22222222222222</a></li>
            <li class="nav-item"> <a class="nav-link">link33333333333333</a></li>
        </ul>
        <div ngbdropdown="" class="justify-content-end d-inline-block">
            <button class="btn btn-secondary" id="dropdownMenu1" ngbdropdowntoggle="">Items</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <button class="dropdown-item">Item1</button>
                <button class="dropdown-item">Item2</button>
            </div>
        </div>
    </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

Stop the inheritance of CSS and JavaScript in ASCX files

Currently, I have an application that consists of only one aspx page called Default.aspx. This page dynamically loads .ascx controls as required, all of which utilize the same JS and CSS file. I am now considering implementing Bootstrap on specific control ...

Bootstrap 4 content block alignment explained

Below is the code snippet I am currently working with: .banner { background: #f9f9f9; width: 300px; height: 60px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" hre ...

embedding HTML code directly into an iframe

Can HTML be directly inserted into an iframe within my HTML template? Would the following code be considered valid? <iframe> <html> <head> </head> <body> <p>Hello world</p> </body> ...

Update the color of the angular material input text box to stand out

Hey there, I'm currently using Angular Material and I want to change the color of the input focus when clicked. At the moment, it's displaying in purple by default, but I'd like it to be white instead. https://i.stack.imgur.com/vXTEv.png ...

Customize your dropdown menu options with JQuery: A step-by-step guide

I am dealing with a situation where I have a dropdown menu labeled as Code. The options available in this dropdown are fetched from a database, populating the dropdown accordingly. Alongside the Code dropdown, there is a textbox named Name. Under certain c ...

Ways to superimpose an image

Struggling to overlay an image over two div columns - I attempted using Z-index and experimented with various positioning properties. What am I missing? The triangle situated behind the two boxes, along with the additional text on JSFiddle, should appear ...

What is causing my css elements to appear larger compared to other instances?

As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and svelte ...

How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

In this section of our code, the function moveTile is responsible for moving a tile. How can I modify it so that the hover color changes to red? function moveTile(identity) { var emptyId = findEmptySpace(); if (isEmptyNeighbor(identity)) { document.ge ...

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

Is there a way to access specific methods within a JavaScript file?

Within my javascript assets folder, I have a file named jstester.js that looks like this: function hehe() { alert("wedsdsd"); } document.write("fdygsdfysdgf"); Then in the main index.html file in the public directory, I include the following code: & ...

Aligning Header and Search Icon in Perfect Harmony with the Body

I've been struggling with alignment issues on my Tumblr blog. Specifically, I'm trying to align a header and a search icon. You can find my site here. Here is the mockup I am aiming for: However, if you visit my site, you'll notice that ...

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line. Both have varying widths that need to remain on the same row. To clarify: .----------container 570px-----------. |[box1] [box2]| Ideal scenario | ...

Center the font in the middle of the text field

I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

I've created a form that displays all available products from a database along with their prices. Users can input the quantity they want to purchase for each product, and upon submission, the total amount will be calculated. There are 5 products in th ...

Why aren't my messages showing up once I exit the textbox on my website?

After writing various functions to compare two passwords, I encountered an issue. My goal was for the message "The passwords match" or "Please enter your password again because the two passwords don't match" to be displayed when clicking out of the "v ...

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

When using HTML and PHP, do note that the function mysql_fetch_array() requires the first parameter to be a resource and

I'm currently working on developing a feature for our website that allows users to search for banned usernames on our servers. The idea is to create a simple form where users can enter the username they want to check and then display any matching resu ...

How can I shift the button's location within a pop-up in Ionic 1?

enter image description here I am struggling to make the button green underneath the three other buttons. Can someone please assist me with this? Here is my code: $scope.showIntroductionPage = function(childs){ if(childs == 0){ var myPopup = $io ...

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

What is the best way to create a div that resembles a dotted line?

I have a bar chart type created using different div elements. CSS: .outer, .inner, .target { height: 14px; margin-bottom: 5px; } .outer { background-color: #cccccc; width: 200px; margin: 0 auto; position: relat ...