Tips for aligning Bootstrap HTML elements in a row

I'm having trouble creating a site header similar to the one on stackoverflow using bootstrap. I can't seem to get all the header elements to appear on a single line.

Does anyone have any suggestions on how I can achieve this?

Here is a link to the jsfiddle - https://jsfiddle.net/31wxk9ak/2/. Depending on your screen size, you may need to adjust the page split in order to prevent the browser from stacking the elements.

This is the desired layout

Here is the code:

<html><head></head><body>
<div id="root">
    <div data-reactroot="" class="container fill">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar"><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="/">Home</a></div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a title="About" href="/about">About</a></li>
                        <li><a title="Contact" href="/contact">Contact</a></li>
                        <li>
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="input-group"><input type="text" class="form-control"
                                                                    placeholder="Search..."
                                                                    value=""><span class="input-group-btn"><input
                                            type="button" class="btn btn-default" value="Go!"></span></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
                        <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">

Download Respond.js: https://oss.maxcdn.com/respond/1.4.2/respond.min.js

javascripthtmlcssbootstrap-4

Answer №1

Your navbar implementation needs some adjustments, consider using a form for the search functionality.

            <ul class="nav navbar-nav navbar-right">
              <li>
                <form class="navbar-form navbar-left">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
              </li>
              <li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
              <li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
            </ul>

JSFiddle Demo

Reference:

  1. Bootstrap Navbar

Answer №2

There are several techniques you can use to achieve this effect, but I will demonstrate two simple methods. The first method involves using the float property on all navbar headers.

.navBarHeader {
    float: left;
}

Alternatively, you can also use the inline-block display property.

.navBarHeader {
    display: inline-block;
}

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

Font imported via SCSS mysteriously vanishing

I'm currently working on a website using this amazing template, but I'm struggling to import a Google Font. In my SCSS file (styles.css), I've added the following: @import 'https://fonts.googleapis.com/css2?family=Nunito&display=sw ...

csssasspostcsseleventy

Looking for guidance on restructuring a JSON object?

As I prepare to restructure a vast amount of JSON Object data for an upcoming summer class assignment, I am faced with the challenge of converting it into a more suitable format. Unfortunately, the current state of the data does not align with my requireme ...

javascriptarraysjsonregexreactjs

Unable to display the complete JSON data using ng-repeat in AngularJS

Utilize ng-repeat to display data retrieved from a web service. Below is my controller JS (GetAllCtrl.js): https://i.stack.imgur.com/GAelG.jpg I have received JSON data: https://i.stack.imgur.com/0xkAU.jpg My goal now is to extract only company informati ...

javascripthtmlangularjscontrollerangularjs-ng-repeat

What is the best way to set the text color of cell data in a mat-table to white for the entire row when the row is selected as

Is there a way to change the text color when a row is selected in my application? I have already figured out how to change the background color of the row, but how can I target the text within the cells? I'm considering using a similar approach to th ...

cssangular

The limitations of Typescript types influence the program's behavior

As a newcomer to the Typescript environment, I am currently developing a test application to familiarize myself with it. However, I have encountered an issue regarding type restrictions that seems to be not working as expected. In my class, I have defined ...

javascripttypescript

React is failing to display various class attributes from variables

I've been attempting to customize my React component, but I'm experiencing some strange behavior that I can't quite wrap my head around. <div className={classNames(scss[isOdd ? 'timeline-item-icon-odd' : 'timeline-item-ic ...

cssreactjsvariablesdom

The ng-repeat directive adds an additional line after each iteration of the list item

Whenever the angular directive ng-repeat is utilized with an <li> element, I notice an additional line appearing after each <li>. To demonstrate this issue, see the simple example below along with corresponding images. Here is a basic example ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

Is there a way to make the checkbox and corresponding text display on a single line within my code snippet?

Bootstrap text-truncate is causing the checkbox and text to appear on separate lines in the following example. How can I adjust it to have the text right after the checkbox? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" / ...

javascriptbootstrap-4

Creating an interactive Table of Contents in Sharepoint using only JavaScript

Imagine you have a massive Sharepoint wiki page filled with various heading tags like H1, H2, H3, and H4 - now picture creating a dynamic Table of Contents using these tags. The goal is to categorize these tags by group and utilize the HTML <detail> ...

javascripthtmlfor-loopsharepointtableofcontents

how do I modify my JavaScript code to achieve the desired outcome

How can I program a button to disable after being pressed 10 times in less than a minute, but continue counting if not pressed for 1 minute? function buttonClicked() { if (totalCount + accCounter > 9) { document.getElementById("btn").disabled = ...

javascripthtmljquerycss

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

javascripthtmlangulardatabasechatroom

Ways to resolve the problem of connecting Provider with my store and efficiently transmitting data to components in my Redux-React application

Encountering an error that reads: Uncaught Error: Could not find "store" in either the context or props of "Connect(WebShop)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(WebShop)". Despite havin ...

javascriptreactjsreduxreact-redux

In JavaScript, the function yields a proxy rather than an object

Let's say I have an array: const arr = ['one', 'two', 'three'] Now, imagine I have a function that is designed to take an array of strings and return an array of objects: const func = (arr) => arr.map(item => ({str ...

javascriptreactjsjsonnext.js

Dealing with TypeScript errors TS2082 and TS2087 when trying to assign an Away3D canvas to a variable

As a beginner with TypeScript, I am in the process of creating an Away3D scene where a canvas element is dynamically generated and needs to be appended to a container. Although the code functions correctly, I am encountering the following compilation erro ...

javascriptnode.jstypescriptaway3d

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Although this question may appear similar to others, there is a key distinction that sets it apart. In search of request efficiency rather than space efficiency, lazy loading could be the solution. However, in situations where content needs to be quickly ...

javascripthtml

Attempting to create animation on the horizontal rule element, however, encountering difficulties in making it function properly

Can someone help me figure out why the animation for the hr tag is not working as intended? I'm trying to make it animate from left to right, repeat, and stay centered under the h2 tag. .div-projects { margin-top: 200px; display: flex; justif ...

htmlcss

Duplicate an $sce generated entity and adjust its content

I am facing a situation where I have a variable structured in the following way: tableData1[$scope.tableHeadingsConstant[0]] = $sce.trustAsHtml('<div class="header12" id="runTitle0" style="cursor: pointer;">' + counter ...

javascriptjqueryangularjs

Accessing the JSON file from the Google Maps Places API using either JavaScript or PHP

In the midst of developing an application, I am working on fetching a list of places near a specific latitude and longitude. After obtaining an API key, inputting it into the browser URL successfully retrieves a JSON file containing the desired places dat ...

phpjavascriptjqueryjson

"Using jQuery to initiate a click action on an anchor element with a different

I'm pondering more of a theoretical question here. Does anyone have any insights on whether or how one can activate the click event on an anchor by clicking on another element using jQuery? My initial solution would involve extracting the src conten ...

javascriptjqueryhyperlinktheory

How can I customize the dropdown list arrow to match my own design?

Is there a simple way to substitute the standard arrow in the dropdown menu with a custom arrow image? ...

htmlcssdrop-down-menustyling