Having trouble making Bootstrap 3 navbar links align correctly in a horizontal layout?

Why aren't my links aligning horizontally when using Bootstrap 3? I've checked the Bootstrap website and my code matches their examples. I haven't added any custom CSS beyond the Bootstrap library, so I'm not sure how to fix it. Any help would be greatly appreciated!


  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Test</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnav" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>
         </div>

         <!-- the nav links, forms, and other content for toggling -->
         <div class="navbar-collapse collapse" id="mainnav">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</li>
              <li><a href="#">About</li>
              <li><a href="#">Contact</li>
            </ul>
          </div>
       </div>
     </nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
  </body>
</html>

Answer №1

It appears that you have forgotten to close some anchor tags within your list items.

<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

Main Navigation:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <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>
         </div>

         <!-- Include nav links, forms, and other content for toggling -->
         <div class="navbar-collapse collapse" id="mainnav">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
       </div>
     </nav>

Check out the JSFiddle here!

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

Setting the height of a div inside another div to 100% while also utilizing margins

I am facing an issue with a nested div structure in my HTML/CSS code. The inner div is getting cropped due to the overflow hidden property of the outer div, and I need to find a solution to set the inner div's height to 100% without any overflow. Unf ...

django was unable to interpret the remainder: 'css/materialize.min.css' from 'css/materialize.min.css'

In following a tutorial, I am adding a chat bot UI that is embedded in Django. The file structure looks like this: . ├── db.sqlite3 ├── installDjango.sh ├── manage.py ├── rasadjango │ ├── asgi.py │ ├── __init__.p ...

Looking for a uncomplicated yet robust JavaScript text editor that generates uniform tags?

I am currently working on a web application that enables users to create and store a personalized "about me" section. To simplify the process, I am looking for a JavaScript-based editor that includes standard formatting options like bold, italic, underline ...

Include a class in your PHP code

After a user uploads a sound, it is displayed in a database table as a link. The link needs to contain the class "sm2_button". Unfortunately, when trying to implement this within a PHP file, a syntax error occurs. echo "<td><a href='http://w ...

What is the best way to apply CSS to a specific row in AngularJS?

I am currently developing a to-do list using AngularJS. It's almost completed but I have a question regarding highlighting the entire row when in editing mode by adding a CSS class "yellow". Unfortunately, I'm unsure how to achieve this. Additio ...

jQuery form validation function needs a NULL attribute

After successfully fixing one problem and making adjustments, I encountered a new issue with my form where the total sum wouldn't calculate unless all fields were filled out. Sometimes, I only have 2-4 entries that need to be factored into the quote. ...

What's the best way to showcase customized text formats within select option tags?

I need to have the following text displayed inside a dropdown menu: 1 day - until Friday 18th Dec 1 10.50 2 days - until Saturday 19th Dec 2 20.50 continue .... However, it seems like there is an issue as the spaces are being removed an ...

Can HtmlCleaner be safely used with multiple threads?

I've been searching for information on their website but can't seem to find an answer. Can you confirm if HtmlCleaner is thread safe? I have multiple threads that will be using it and I'm unsure whether reusing an instance of the HtmlCleane ...

Tips for positioning a dropdown submenu

Check out this JSFiddle demo I created for a small dropdown menu¹. The one thing I'm struggling with is aligning the dropdown sub menu box properly. <ul id="nav"> <li> <a href="#" class="main-menu">vcds ...

Checkbox flashes intermittently using livewire technology

I was searching for a method to toggle columns in a table using livewire, so I decided to create a variable to store the "true" or "false" value. Below is the code snippet from my blade file: <input value="showRate" type="checkbox" ...

Tips for resizing images within a sprite

I currently have a sprite containing images that are all sized 32 x 32, which I am utilizing in my project. However, there are certain instances where I would like to adjust the image size to 64 x 50 instead. Is there a CSS technique that would allow me to ...

What could be causing my JavaScript script to only work on the initial HTML element?

I found this JavaScript script online and added it to my HTML. $(function() { var rangePercent = $('[type="range"]').val(); $('[type="range"]').on('change input', function() { rangePercent = $('[type="ran ...

What steps can be taken to resolve the issue of "Uncaught TypeError: undefined is not a function"?

Check out the JSfiddle link for reference: http://jsfiddle.net/mostthingsweb/cRayJ/1/ Including my code below along with an explanation of what's going wrong: This is a snippet from the HTML header, showing all the necessary links: <head> ...

Issue with syntax when transferring an HTML element from the #div to the body

Attempting to duplicate an element and remove the original because of a z-index issue in IE. Planning to use conditional comments: <!--[if lte IE 7]> <script type="text/javascript"> $(document).ready(function() { var callCenter ...

Guide to capturing and playing audio on iOS6 with HTML5

Our team is currently working on a web application using HTML5 and Javascript. We are facing a challenge with implementing voice recording functionality, as the Wami Api we tried is not compatible with iPad due to its use of flash for recording. Could yo ...

Style the Google reCAPTCHA element with CSS

I have integrated Google reCAPTCHA into my forms along with some validation workaround that prevents form submission if the reCAPTCHA is not checked. However, I am facing an issue where I want to add CSS rules (such as border-color) to the captcha element ...

How can you detect a click event on a hidden DIV without capturing clicks on any elements within the DIV, especially when the DIV is not present in the Document Object Model (DOM)

Currently, I am facing an issue with my vanilla JavaScript event listener. It seems to be passing data correctly, except when I click on text that is formatted as bold or italicized. Below is the JavaScript code that I am testing: window.onclick = functio ...

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

Creating independent compositions using Html5 Canvas and fabric.js

I am looking to replicate the design shown in the image using canvas. Users will be able to drag and drop images onto the yellow bordered squares and then adjust the size and position of the images. The images will be clipped inside the yellow borders. I ...

Is it possible to incorporate a Node.js library into an HTML document?

I am working on an HTML file where I want to incorporate the nodemailer library to handle email sending. Although in nodejs, I can easily include var nodemailer = require('nodemailer') at the beginning of the script section of my HTML file, it ap ...