SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member satish sojitra's Avatar
    Join Date
    Mar 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap navbar no working properly

    Hello everyone.
    Greetings for the day !

    I am newbie to bootstrap css framework.. I followed following tutorial :
    http://www.sitepoint.com/twitter-boo...mplex-designs/


    But in that my navbar is not working properly. It shows like below :
    My First Bootstrap project.png

    It should look like below as per tutorial :
    My First Bootstrap project1.png

    Below is my code :

    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
    Last edited by Paul O'B; Mar 2, 2014 at 07:17. Reason: code tags added

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi there. Welcome to the forums.

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

  3. #3
    SitePoint Member satish sojitra's Avatar
    Join Date
    Mar 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m
    I am using bootstrap stylesheet only which i mentioned in <head></head> tag.

    Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    Code:
    		<h1>
    		<a href="#">Bootstrap Site</a>
    		<h1>
    It should be:

    Code:
    		<h1>
    		<a href="#">Bootstrap Site</a>
    		</h1>
    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. #5
    SitePoint Member satish sojitra's Avatar
    Join Date
    Mar 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B
    Now it's working fine.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •