Jasmine22 Jasmine22 - 2 months ago 6
HTML Question

Header from bootstrap with HTML contents

I'm creating a webpage, I want to be able to do a header for each page
I want it to consist of

(An Image) Home news about us web call email


I have this code so far:

<!DOCTYPE html>
<html>
<body>
<nav class="navbar navbar-light bg-faded">
<img src="jazz.jpg" alt="HTML5 Icon" width="250" height="100">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">news</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">web</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">call</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">email</a>
</li>
</ul>
</nav>
</body>
</html>


However, I just get the image and the rest are under the image, how can I put them all next to each other and make the header background gray? Is there anyway to solve this issue??

Answer
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap Case</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

  <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="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Web</a></li>
        <li><a href="#">Call</a></li>
        <li><a href="#">Email</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">

  </div>

  </body>
  </html>

So this code will give you the header you are looking for. You can add an image in the header if you want still, but you will have to play around with the styling to make it look good. Let me know if you have any questions or need anything clarified. Hope this helps!