Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mona Jalal
Mona Jalal
4,302 Points

Why navbar fails using bootstrap?

I have this code but it is failing and not showing anything ! Can you help me as how to fix it? Thanks!

<div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Mona Jalal</a>
            </div>

            <div class="collapse navbar-collapse" id="nav-main">
                <ul class="nav navbar-nav">
                    <li><a class="nav-item nav-link active page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a></li>
                    <li><a class="nav-item nav-link page-item" href="education.html">Education</a></li>
                    <li><a class="nav-item nav-link page-item" href="coursework.html">Coursework</a></li>
                    <li><a class="nav-item nav-link page-item" href="teaching.html">Teaching</a></li>
                    <li><a class="nav-item nav-link page-item" href="projects.html">Projects</a></li>
                    <li><a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a></li>
                    <li><a class="nav-item nav-link page-item" href="experience.html">Experience</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li><a class="navbar-brand pull-sm-right" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="mailto:jalal@cs.wisc.edu"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a></li>

                </ul>
            </div>
        </div>

Also suggestions on improving this code is appreciated!

Not showing anything except Mona Jalal and a tiny white button!

Simply you forget to add <li> </li> tags for links

<ul> <li><a></a><li> </ul>

5 Answers

Mona Jalal
Mona Jalal
4,302 Points

Haytham Badran can you please format your code using ``` ?

Try this code

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Mona Jalal</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
<li class="active"><a class="nav-item nav-link active page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a></li>
                    <li><a class="nav-item nav-link page-item" href="education.html">Education</a></li>
                    <li><a class="nav-item nav-link page-item" href="coursework.html">Coursework</a></li>
                    <li><a class="nav-item nav-link page-item" href="teaching.html">Teaching</a></li>
                    <li><a class="nav-item nav-link page-item" href="projects.html">Projects</a></li>
                    <li><a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a></li>
                    <li><a class="nav-item nav-link page-item" href="experience.html">Experience</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
                    <li><a class="navbar-brand pull-sm-right" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="mailto:jalal@cs.wisc.edu"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
                    <li><a class="navbar-brand pull-sm-right" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
Mona Jalal
Mona Jalal
4,302 Points

Ran your code in jsdiffle and has error. Please provide me with a working version of the code in jsfiddle https://jsfiddle.net/monajalal/6ndjvwtc/

Sorry for that check this: https://jsfiddle.net/EchoCode/6a5eboaz/1/

Some notes may help you in webdesign:

1- include Bootstrap using CDN version

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

2- Also don't forget include Bootstrap JavaScript file

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

send source code of your localhost index file

Also I recommend use Bootstrap version 3.3.6 you can build your website using this template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Mona Jalal</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 <link rel="stylesheet" href="./assets/css/responsive.css">
    <link rel="stylesheet" href="./assets/css/style.css">
  </head>
  <body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Mona Jalal</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a class="nav-item nav-link active page-item" href="index.html">Mona Jalal <span class="sr-only">(current)</span></a></li>
                <li><a class="nav-item nav-link page-item" href="education.html">Education</a></li>
                <li><a class="nav-item nav-link page-item" href="coursework.html">Coursework</a></li>
                <li><a class="nav-item nav-link page-item" href="teaching.html">Teaching</a></li>
                <li><a class="nav-item nav-link page-item" href="projects.html">Projects</a></li>
                <li><a class="nav-item nav-link page-item" href="honors.html">Honors & Awards</a></li>
                <li><a class="nav-item nav-link page-item" href="experience.html">Experience</a></li>
            </ul>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navbar-brand pull-sm-right" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="mailto:jalal@cs.wisc.edu"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
                <li><a class="navbar-brand pull-sm-right" href="https://www.instagram.com/mona_of_green_gables"><i class="fa fa-instagram fa-lg"></i></a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">




            <div class="container">
                <div class="row">
                    <div class="col-lg-2">
                        <img src="./assets/img/glass.jpg" class="img-responsive " style="width:95%"/>
                        <img src="./assets/img/rift.jpg" class="img-responsive m-y-1" style="width:95%;"/>

                    </div>
                    <div class="col-lg-8">
                        <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; "/>
                    </div>

                    <div class="col-lg-2">
                        <img src="./assets/img/mindwave.png" class="img-responsive" style="width:120%;"/>
                        <img src="./assets/img/VR.png" class="img-responsive m-y-1" style="width:120%;"/>

                    </div>
                </div>
            </div>
        </div>
<div class="container p-t-2 m-b-2">
            <div class = "well well-lg img-rounded" style="background-color: #F2F2F2; text-align: justify;">
                      <span class =" m-y-2 m-l-2 m-r-2" style="padding: 20px 0; display: inline-block;">
                           My name is <strong>Mona Jalal</strong>. I graduated from University of Wisconsin-Madison with double major masters in computer sciences
                and electrical engineering. I have done projects in computer architecture, dependable and fault-tolerant embedded systems,
                database management systems, data analysis, big data systems and frameworks, and Internet of Things. I am currently on the job hunt
                and I look forward to job opportunities. Feel free to contact me via <a href="mailto:jalal@cs.wisc.edu">jalal@cs.wisc.edu</a> if you have an opening in your team that you
                think would be a good fit for me.
                In my free time I like to learn about new technologies and frameworks, swim and dance.
                      </span>

            </div>
        </div>
    </div>
<footer>
    Last updated on June 24th, 2016.
</footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html>
Mona Jalal
Mona Jalal
4,302 Points

turns out the problem is with bootstrap4. Anyway, that we could fix this in bootstrap 4 Guil Hernandez ?