Why the code from W3Schools.com doesn't work properly in codepen.io

1

I’m trying to create a navigation bar for my second project “Build a Personal Portfolio Webpage” and I found some code on from w3schools that can help me to create a good-looking navigation bar. But the problem come when I applied the code to my code, it didn’t work as I expected :sweat:. So I created a new pen and copied all the code from w3schools to that pen then run the code but it still not work :confused: Anyone can give me the reason why?? :no_mouth:

image.png931×663 54.5 KB

Here’s the code:
w3schools: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h
codepen: http://codepen.io/minhmoc710/pen/pPwmZv
P/s: sorry for my bad english!

2

In HTML remove stuff outside from the body tags (including body) so it looks something like this:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

Then in settings make sure you link bootstrap (CSS) to the following version https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Currently you are using the latest (beta) version of bootstrap that uses different class names to make a navigation.

1 Like
3

Hi. minhmoc710
Your problem may be that you have your bootstrap links in the head of your html.
When using codepen you should select your bootstrap using the settings in the CSS window. Then select your JS settings in the Java Script window.
Also be sure that when you do set bootstrap in the CSS settings that you select the same version that your code is written for.

Check ouy this YouTube video. https://www.youtube.com/watch?v=hiCK6-8XfiA

Good luck and happy coding:

1 Like
4

I had the same issue :frowning:

5

Thanks for your advice. My code runs properly now! :slight_smile: