Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mona Jalal
4,302 PointsWhy 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!
5 Answers
Mona Jalal
4,302 PointsHaytham Badran can you please format your code using ``` ?
Haytham Badran
216 PointsTry 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
4,302 PointsRan your code in jsdiffle and has error. Please provide me with a working version of the code in jsfiddle https://jsfiddle.net/monajalal/6ndjvwtc/
Haytham Badran
216 PointsSorry 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>
Mona Jalal
4,302 PointsThis is what I see when I ran your code! http://imgur.com/nicyoqc https://jsfiddle.net/monajalal/atjoqL00/
Haytham Badran
216 Pointssend source code of your localhost index file
Haytham Badran
216 PointsAlso 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
4,302 Pointsturns out the problem is with bootstrap4. Anyway, that we could fix this in bootstrap 4 Guil Hernandez ?
Haytham Badran
216 PointsHaytham Badran
216 PointsSimply you forget to add <li> </li> tags for links
<ul> <li><a></a><li> </ul>