What could be the reason behind Bootstrap not functioning properly?

I'm having trouble with the navigation display in bootstrap, as I am new to it.

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <link  href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./bower_components/jquery/dist/jquery.min.js"></script>
    <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav mr-auto mt-2 mt-md-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
    <button class="btn btn-success">Green Button</button>
</body>
</html>

After installing jquery and bootstrap using bower, the display looked like this: https://ibb.co/bXhUdv

Answer №1

UPDATE based on feedback:

For those seeking to install bootstrap 4 alpha 6 using bower, follow these steps:

bower install bootstrap#v4.0.0-alpha.6

Initial response:

Possibly an issue with bower. Are you sure you have correctly loaded bootstrap 4 alpha 6 and not bootstrap 3? The code looks fine on Fiddle, as shown below:

  • Try manually loading it from a CDN to pinpoint if the problem lies with bower

  • Also ensure that all JS files are loaded in the correct order just before the closing </body> tag.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<button class="btn btn-success">Green Button</button>

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 editable content div from expanding horizontally

I have a contenteditable div element with the class ".textarea_mask." <div class=".textarea_mask" contenteditable ></div> My goal is to make this div act like a text area. It functions correctly in modern browsers, but I am having issues with ...

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

AJAX function failing to trigger for the second time

I'm currently facing an issue with my JQuery AJAX function. It's supposed to populate a dropdown in a partial view based on the user's selection from another dropdown menu. The first part of the function is working as expected but the secon ...

conceal the act of pushing

After adding a property in a push function to toggle between hiding the label and showing the input, there is a need to reverse this action when the user clicks on Save changes. This can be achieved by using the ng-hide directive. <tr ng-repeat="pe ...

Issue with customizing the appearance of the selected option in a dropdown menu

Is there a way to change the background color of each option in a select box when it is selected? Currently, when an option is clicked, it appears blue along with the selected text color. I have tried various selectors like :active, :focus, ::selection, [s ...

Bringing SASS Bootstrap into a React project

After following the instructions in the Bootstrap documentation here to install Bootstrap via Webpack, I attempted to import the CSS styles as outlined here. However, I encountered a problem when trying to add the import (@import "node_modules/bootstrap/sc ...

Struggling with getting a dropdown to switch the currently displayed image

I am working on a project that involves displaying a series of 4 images which can be clicked on to reveal a drop-down menu. The selection made in the drop-down menu should change the image to correspond with the choice. Here is the current code I have impl ...

How to Prevent Scrolling When Modal is in Use on Full Page JS

I am trying to achieve the functionality where when the modal is open, I want to prevent full-page scrolling in JavaScript. The issue arises when I open the modal and try to scroll, it ends up moving the content that's behind the modal, which is actua ...

Insert a Facebook like button

I am trying to dynamically append a Facebook like button to a specific div using dynamic URLs. For an example of how this can be done, please refer to this simple demonstration: JsFiddle After attempting to insert the code within an ajax call, I encounter ...

Miscalculation occurred when attempting to add or subtract values from various inputs

My goal is to calculate the sum and rest of two different values after adding or subtracting. For instance, I have a Total variable = 500, along with two input fields - one for MXN and the other for USD. Additionally, there is a USD variable set at 17.5. T ...

How can I create off-center underlined text?

I am looking to create a unique text effect where the underline is off-centered and overlaps the text. However, I am unsure of how to achieve this. Can someone guide me on the best way to replicate the following effect? https://i.sstatic.net/MEyRk.png Cu ...

Why is my form automatically submitting instead of triggering an AJAX call using jQuery?

When I click submit on my form, I expect an ajax call to show in the console and the page URL to stay the same. However, the form action is triggered and the HTTP call changes the URL. <head> <script src="lib/jquery-1.6.4.min.js" type="text ...

Potential Security Vulnerability in DNN 8.0.3.5 due to Outdated jQuery 1.9.1

Our security audit is currently failing due to a specific issue related to jQuery. You can find more information about this at this link. Upon inspecting the folder structure of our installation, it appears that jQuery version 1.9.1 is pre-installed in th ...

What is the process for incorporating a submenu?

html <nav class="main_nav justify-self-end"> <ul class="nav_items"> <li class="active"><a href="index"><span>asd</span></a></li> <li><a href="uslugi"><span>a ...

Is there a way to always keep an element positioned directly above a fluid image that is perfectly centered?

My current project involves creating an overlay to display a fluid image of any size. The challenge I'm facing is how to consistently position the close button 30px above the image and flush with its right edge. The catch is that the container doesn&a ...

The div smoothly descended from the top of the page to the center under the control of jQuery

I am trying to implement a feature where a div slides down from the top of the page to the center when a button is clicked. However, my current code seems to be causing the div to slide from the bottom instead of the top. Ideally, I want the div to slide ...

What happens when you add localhost# to the address bar using <a href="#"?

Playing around with jQuery to toggle visibility of divs on my local server. It works well on a test page, but when integrated into my PHP and HTML app, every time I use <a href="#" as a hook, it actually links to localhost/testsite/localhost# What c ...

Error message in IE8: Property or method not supported by object

I have come across a JS script online that I am using to create a responsive navigation. The source does not mention any errors in IE8, but when testing it on BrowserStack (Win7+IE8), I am encountering an error saying "Object doesn't support this prop ...

Setting the background color of a table header to 70% width within a table is achievable

I'm looking to style the th attribute with a bgcolor, but only at a width of 70%. The header reads "Mega Event Offer" and I want to give it a background color as well. However, since its width is large, it's overlapping onto the heading. Is there ...

Using JQUERY to toggle classes conditionally

$('.showall').css("cursor","pointer").click(function() { $('.value-container').toggle(); $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : & ...