Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on the right?

    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid col-sm-12 col-lg-offset-2 col-lg-8">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse"
                  data-target="#navbar_collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/" style="white-space:nowrap">Site</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar_collapse">
          <div class="navbar-right">
            <form class="navbar-form" role="search" ng-submit="collectionSearch()">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Collection ID"
                       ng-model="cSearch" size=10 required>
              </div>
            </form>
            <ul class="nav navbar-nav">
              <li id="create_tab"><a href="/">Create</a></li>
              <li id="tests_tab"><a href="#/tests">Tests</a></li>
              <li id="collections_tab"><a href="#/collections">Collections</a></li>
              <li id="account_tab"><a href="#/account">Account</a></li>
              <li id="logout_tab" ><a href="#">Logout</a></li>
            </ul>
          </div>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

If you have any tips or suggestions, please let me know. Thank you!

htmlcsstwitter-bootstrap

Answer №1

If you want to shift the search icon to the left side, make sure to apply the bootstrap classes navbar-form and navbar-left. You can see a demonstration here.

<form class="navbar-form navbar-left" role="search" ng-submit="collectionSearch()">
</form>

Answer №2

Allow me to clarify, I believe this will address your inquiry:

http://jsfiddle.net/zu5uoopc/

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>

    <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div><!-- /.navbar-collapse -->

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

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Is it possible to declare a value in variable A and then access that value as an id in variable B using the method getElementById()? var A = 10; var B = document.getElementById(A); console.log(B); ...

javascripthtmlgetelementbyid

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

Selenium Timeout Error: Locator Not Found

Once again, I am struggling with the locator and trying to figure out the correct syntax and code. Here is the code I was attempting to execute: wait.until(EC.presence_of_element_located((By.XPATH, "//div[@class='col-xs-6']//input[@class=&a ...

pythonhtmlseleniumselenium-webdriverinput

Regular expression patterns for authenticating and verifying passwords

Currently, I am working on a JavaScript program to validate passwords using regex. Here are the requirements: The password must consist of at least seven characters. It should include at least one of the following: an uppercase letter (A-Z) a lowercas ...

javascriptphphtmlcssregex

The popover seems to be failing to appear

I am struggling to get a popover to appear when clicking on an appended href element dynamically. Here are the code snippets I have tried: <div id="myPopoverContent"> ...stuff... </div> <div id="div3" style= "width:200px;height:200px;" ...

jqueryhtmltwitter-bootstrap-3popover

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: Currently, I have the following (focusing only on the left element for now): I am struggling to make the left arrow transparent and I can't seem to figure out how. This is the CSS Code I have so far: .ma ...

htmlcss

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

cssreactjsflexboxrowmultiple-columns

Choose a particular element within an element class using a variable as the selector in jQuery

Is there a way to dynamically add a class to a specific element in an array based on a variable in a for loop, rather than random selection? I need to target elements with the variable provided and possibly apply the class to more than one element if neces ...

javascriptjquerynode.jshtmlfor-loop

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

I am diving into the world of AngularJS and Angular Material with my web application. As a beginner in AngularJS and Angular Material, I need some help. My current task is to display a green checkmark next to an input field only when valid data is entere ...

javascriptcssangularjsvalidationpasswords

Switching the placement of my menu bar to the other side of my logo

Can anyone help me figure out how to move my menu bar to the opposite side of my logo? I attempted using the position relative in CSS but it didn't reposition correctly. I've included the position:relative in the CSS code of my HTML index file, ...

htmlcss

Creating a tool to display mouse coordinates as a pointer on an HTML5 canvas

I'm struggling with mouse coordinates while working on canvas in HTML5. My approach involves using JavaScript for drawing on the canvas. Below is my current code to track the mouse pointer within the canvas: $('#canvasID').mousedown(functi ...

javascripthtmlcanvasdrawing

I could really use some assistance with this project for my friend

Whenever I click on the image, it only displays two out of the three possible alerts. How can I make it show all three? Here's my code: <!DOCTYPE html> <html> <head> </head> <body> <img src="http://www.build ...

javascripthtml

The paths of youngsters and the application of conditional styling

Here is the scenario I am dealing with: <div class="parent"> <div class"routeA"> <div class="header"> <li></li> <li class="p-highlight"></li& ...

csssass

How do I incorporate scrolling into Material-UI Tabs?

I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens. For more information on the componen ...

javascriptcssreactjsmaterial-uitabs

Combination of AngularJS and jQuery

I have a page in which additional input fields are dynamically added based on the selection made in a drop-down menu. This page is powered by angularjs, but I had to use jQuery specifically for adding these extra input fields. Here is the HTML code snippe ...

javascriptjqueryhtmlangularjs

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

javascripthtmlvue.js

The scrollHeight property for a textarea element that is set as

Currently, I am working on enhancing a form results page by implementing a readonly textarea to showcase the submitted email address. My main goal is to allow the textarea to dynamically adjust its height in order to display the full email instead of trunc ...

jqueryhtml

Problem with animated scrolling in Jquery

Currently, I am working on a function that aims to smoothly scroll the web to a specific div each time a user scrolls "into" a container div. You can get a better idea of what I mean by looking at my JSFiddle. Everything works perfectly when the user scro ...

javascriptjqueryhtmlcss

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

htmlcss