What is the best way to split a Bootstrap navbar into two separate rows?

I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c415c6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c5d8c6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md bg-body-tertiary">
    <div class="container">
        <div class="col-sm-6 col-xs-12">
            <a class="navbar-brand" href="#">Navbar</a>
        </div>
        <div class="col-sm-6 col-xs-12 float-end">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </div>
</nav>

Desired outcome:

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

htmlcssbootstrap-5

Answer №1

At the default breakpoint, there is no more -xs-, so the appropriate classes to use would be col-12 col-md-6; however, this may not be sufficient when within the .navbar.
In such situations, you can create a manual break with:

<div class="w-100 d-md-none"></div>

This will make the element take up the entire width, causing it to wrap below the md breakpoint.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117041525504b564b55">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d5c8d6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-md bg-body-tertiary">
  <div class="container text-center text-md-start">
    <div class="col-12 col-md-6">
      <a class="navbar-brand m-0" href="#">Navbar</a>
    </div>
    <div class="w-100 d-md-none"></div>
    <div class="col-12 col-md-6">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </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

Integrate a PHP form that includes a redirect feature and an optional opt-in box

I'm a beginner and I'm trying to enhance this code by adding some extra features. When the form is submitted, I want the page to redirect to an external URL like www.google.com The checkbox should be automatically checked and when the client re ...

phphtml

Is there a way to conceal/remove the text displayed on the submit button?

I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...

phpcss

Top-notch Bootstrap 5 navigation bar featuring a centrally aligned brand logo and a sleek dropdown menu

I'm currently working on designing a responsive navbar using Bootstrap 5. My goal is to have the brand text centered along with an icon that includes a dropdown menu, all while ensuring it does not collapse in mobile view. Here's the code I&apos ...

twitter-bootstrapnavbarbootstrap-5

Issues with hover styles and transitions not being correctly applied to newly appended elements in Firefox

Utilizing an SVG as an interactive floor plan, I have implemented a feature where hovering over different areas on the floor plan (<g> elements) causes them to expand and float above other areas. The element scaling is triggered by CSS, but I use jQu ...

javascriptjqueryhtmlcsssvg

How can I eliminate the border from the last child in a row within a responsive framework?

Put simply, I am trying to target not only the last child in a parent div, but also the last item in a row that adjusts based on screen size. I have a row of 4 elements (divs) with borders on all but the last one using :last-child. However, when the screen ...

csstwitter-bootstrap-3

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

I have a unique challenge where I need to only deal with positive values as input. var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name=" ...

javascripthtmljquery

When an element within a dropdown is hovered over, a dropdown menu is triggered

As a newcomer to Web Development, I am facing a fundamental issue with my bootstrap navigation bar. The navigation bar contains multiple dropdown buttons that activate on hover. One of the buttons within a dropdown needs another dropdown to appear when hov ...

htmlcss

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

Starting fresh, so I might sound like a beginner with this question. How can I make use of the update button to update specific rows instead of just the top row? Every time I try to update, it only works for the top row. Here's the code snippet from ...

javascriptphphtmlajaxmysqli

What is the best way to emphasize a table row during a search rather than just the text?

I am currently using a jQuery script that searches for a specific string in a simple text input field and highlights only the string itself if it is found. However, my data is organized within a table and I am interested in knowing if it is possible to hig ...

javascriptjqueryhtml

issue with visibility of Angular Component

After following a straightforward YouTube tutorial for beginners on Angular, I encountered an issue. The tutorial covers how to use components, and even though I understand the concept well, the component simply does not appear no matter what I try. Here i ...

htmlangulartypescriptweb

A specific div remains in place as the user scrolls

Imagine a div that is positioned 60px from the top of the screen. What if, as you scroll down, it stops when it reaches 10px from the top and remains there for the rest of your scrolling session? And then, when you scroll back up, it goes back to its ori ...

javascripthtmlcss

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

Why is it that the LESS compiler fails to recognize classes that are created by a zero iterator

When working with my CSS sheet, I found that I needed to reset some Bootstrap 3 preset values in order to achieve my desired style. To do this, I started using utility classes like .m-b-0 which sets margin-bottom:0px. However, I encountered an issue with ...

csstwitter-bootstrapless

Arrange the selection options by price using jQuery

Sorting options by price is my goal, but despite trying various codes, I have not been successful! This is the original structure: <select id="product-list"> <option>product 1- [2$]</option> <option>product 2- [4$]< ...

htmljqueryjquery-selectbox

Achieving the perfect overlay and centered image effect using CSS

I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly ap ...

htmlcsstwitter-bootstrap-3

Angular template src variable issue with no solution in sight

The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...

javascripthtmlangularjs

"When you hover over an element, extra information will pop up that only pertains to that specific element and will not impact any surrounding

As I dive into the world of HTML and CSS, I've come across a hurdle when it comes to hovering over divs and displaying hidden elements. The goal is for the card to change color on hover (which I've achieved), expand in size, and reveal hidden con ...

htmlcss

Iterate through HTML content and utilize JavaScript along with Regular Expressions to substitute specific strings

In my HTML located in Anki, I have the following structure: <p>[!Quote] Title of callout 1<br>Content of callout 1</p> <p>[!Quote] Title of callout 2<br>Content of callout 2</p> <p>[!Quote] Title of callout 3<br ...

javascripthtmlanki

Discovering visible ID numbers on the screen

My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...

javascriptjqueryhtmlcss