Batch File Scripting Batch File Scripting - 4 months ago 20
HTML Question

Bootstrap text input

I'm using Bootstrap to make a navigation bar and when I try to add a search bar it goes below the other elements instead of beside them. I have jQuery and the Bootstrap JavaScript imported after everything, along with the Bootstrap CSS imported in the head tag.

<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"></a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>

<form class="navbar-form">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</ul>
</div>
</div>
</div>

Answer
  1. You can use the Default navbar as a sample.
  2. Place the form outside of the <ul></ul> block.

Please check the result. Is it what you want to achieve?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="logo.png"></a>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </form>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Comments