Twitter Bootstrap Question posted in

Nav-Tabs in Twitter Bootstrap won't render correctly in JS Fiddle

I need my nav-tabs (with drop-down in the place I have it) to render correctly in JS Fiddle (it has to work in JS Fiddle)- I’ve gotten it to work & lay out correctly by composing the components in a text-editor but I need it to work in JS Fiddle and look how it does on the bootstrap site (laying out horizontally across, not vertically stacked on on another as it is now). This is my first time using Bootstrap in JS Fiddle, I’ve never had a problem in plain HTML w/CSS but I need it work in this context. I’m not really sure why it won’t render correctly here (vertically) and as Nav Tabs. Also, for some reason my dropdown menu isn’t working correctly in this Fiddle (though I think it’s exactly the same as in my text-editor where it worked fine but I could have lost something cutting and pasting). Anyhow, I haven’t even started the CSS & I’ve been trying to get this to work for days and it’s just so frustrating- I’m hoping that someone more experienced in Bootstrap can give me a clue as to what I’m doing wrong here- any help or suggestions would be much appreciated.
Here’s a link to it:
https://jsfiddle.net/Tamara6666/4z1nwfbc/
And, here’s my html code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>
<ul id="myTab" class="nav nav-tabs">
  <li><a href="#"><icon class="fa fa-home"></icon></a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
    <ul class="dropdown-menu">
    <li><a href="#">Member Activity</a></li>
    <li><a href="#">Member Forum</a></li>
    <li><a href="#">Member Lists</a></li>
    <li><a href="#">Member Groups</a></li>
    </ul>
  </li>
  <li role="presentation"><a href="#">Pet Help</a></li>
  <li role="presentation"><a href="#">Pets for Sale</a></li>
  <li role="presentation"><a href="#">Pet Services</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>

Any help would be much appreciated. Thank you so much- I feel kind of stupid for not being able to get this to work. Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Correctly answered by @Ahs N :

    https://stackoverflow.com/a/34986434/5666784

    (my links to Bootstrap et al were included in the html & not in the external resources panel of JS Fiddle) link to the fixed fiddle:

    https://jsfiddle.net/Tamara6666/2cup6cno/

    [these were not in the external resources panel & instead in my html causing it to not render correctly in JS Fiddle]: 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    Thanks for your prompt help @Ahs N - I really appreciate it!


  2. 0

    Its because external file links have been added to your html code. The should be in the sidebar external links.

    Here is your updated JSFiddle

    <body>
  <ul id="myTab" class="nav nav-tabs">
    <li>
      <a href="#">
        <icon class="fa fa-home"></icon>
      </a>
    </li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
      <ul class="dropdown-menu">
        <li><a href="#">Member Activity</a></li>
        <li><a href="#">Member Forum</a></li>
        <li><a href="#">Member Lists</a></li>
        <li><a href="#">Member Groups</a></li>
      </ul>
    </li>
    <li role="presentation"><a href="#">Pet Help</a></li>
    <li role="presentation"><a href="#">Pets for Sale</a></li>
    <li role="presentation"><a href="#">Pet Services</a></li>
  </ul>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search