1 Correct answer
...<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7 Starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
.navbar .n
22
Replies
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7 Starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
.navbar .navbar-brand {
margin:0;
padding:0;
height: 53px;
}
</style>
<body>
<!--begin top nav bar-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <img src="https://dummyimage.com/215x53.png" alt="logo" title="XYZ Home"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<!--Site Search -->
<li class="hidden-xs" style="padding-top:10px">
<form action="#" method="get" accept-charset="utf-8">
<div id="custom-search-input">
<div class="input-group">
<input name="query" type="text" class="search-query form-control" placeholder="Site search" required />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"> <span class=" glyphicon glyphicon-search"></span> </button>
</span>
</div>
</div>
</form>
<!--End Search -->
</li>
</ul>
</div>
</div>
<!--end top nav-->
</nav>
<div class="container">
<div class="row">
CONTENT GOES HERE....
</div>
</div>
<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Kathleen,
Reading over some of the comments, I get the impression that some people seem to think that, when using Bootstrap, you should abide by the rules of Bootstrap. Nothing is further from the truth.
As a youngster, I used to love reading Enid Blyton's books named The Famous Five. The good part about the series was that I did not have to read the books in sequence, in fact I did not even have to read all of the books. If there was a book that I did not like, I did not read it.
So too with Bootstrap, instead of a library of books, it is a library of code from which to pick and choose.
Take a look athe the following web page, you would not recognise it as a Bootstrap site. It was developed by adding an extra two score and ten (or thereabout) lines of CSS on top of Bootstrap..
Nancy's example shows another use of Bootstrap where she has chosen to use a variant of the Bootstrap menubar.
What I am trying to say is, that Bootstrap is a tool to get you where you want, not where Bootstrap is leading you. It's not a this or nothing kind of workflow. Of course you must always keep in mind that a working knowledge of HTML, CSS and JS is a primary requirement.
AdChoices