Bootstrap navbar no working properly

HTML & CSS
1

Hello everyone.
Greetings for the day !

[B]I am newbie to bootstrap css framework… I followed following tutorial :
http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/[/B]

But in that my navbar is not working properly. It shows like below :

It should look like below as per tutorial :

Below is my code :


<!-- Important : Bootstrap requires a HTML5 doctype -->
<!DOCTYPE html>
<html>
	<head>
		<!--  specify charset is utf-8 to browser parse special character correctly -->
		<meta charset="utf-8">
		<title>My First Bootstrap project</title>
		
		<!-- Configure Bootstrap css files here -->
		<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
		
		
	</head>
<body>

		<!-- container class use to wrap everything and make it center of webpage beautifully ! -->
		<div class="container">
			<h1><a href="#">Bootstrap Site</a><h1>
			
			<!-- Navigation Bar -->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Projects</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">Downloads</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
              <!-- Navigation bar over here -->

                <div class="hero-unit">
                    <h1>Marketing stuff!</h1>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

                    <a href="#" class="btn btn-large btn-success">Get Started</a>
                </div>

                <div class="row">
                    <div class="span4">
                        <ul class="nav nav-list">
                            <li class="nav-header">What we are?</li>
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Our Clients</a></li>
                            <li><a href="#">Our Services</a></li>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Contact us</a></li>
                            <li class="nav-header">Our Friends</li>
                            <li><a href="#">Google</a></li>
                            <li><a href="#">Yahoo!</a></li>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">Bing</a></li>
                        </ul>
                    </div>
                    <div class="span8">
                        <p>content area</p>
                    </div>

                </div>

		</div> <!--  Container div over here -->



		<!-- for faster webpage performance include js files before end tag of body. -->
		<!-- configure Bootstrap Javascript files here -->
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<!-- Configure Jquery support files here -->
		<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
</body>
</html>

help me out to fix this problem. Is there any good tutorial for bootstrap for responsive ? Thanks to all :shifty:

2

Hi there. Welcome to the forums. :slight_smile:

Preferably, post a live link. You haven’t posted your CSS, so we can’t help at the moment.

3

Hi ralph.m
I am using bootstrap stylesheet only which i mentioned in <head></head> tag.

Thanks

4

HI,

You haven’t closed the h1 properly so fix that and try again.


		<h1>
		<a href="#">Bootstrap Site</a>
		<h1>

It should be:


		<h1>
		<a href="#">Bootstrap Site</a>
		[B]</h1>[/B]

Also remove the comments from above the doctype or it will confuse older versions of IE and cause them to render in quirks mode.

5

Thanks Paul O’B
Now it’s working fine. :slight_smile: