I am creating a site using Bootstrap. I have one header, which includes the sites logo, I then want on the right of the container a search bar, aligned vertically in the header. My second header then has my link navigation stretching across the container.
I am having trouble adding the search bar, I tried to add it into a ul and pull to the right but it just went below my logo and full width.
Here is a bootsnip
http://bootsnipp.com/snippets/d393M
The mark up i am using for my search is
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-info" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
Your link to the Bootsnip is not working so I can't look at it in more depth.
Try wrapping the search inside form tags as follows (this code from getbootstrap.com):
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Try surrounding your form in a form element and adding the .navbar-form class to it.
Related
how to create a navbar same as stack overflow navbar with search form icon.
i use it but cant find a way.
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Search here..">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>```
You use DIV's to contain each group of code and arrange them using CSS. I changed the div class form-group to contain the entire form in one container. And you can use the class topnav to contain the images or text you want next to the search bar. Just a little CSS and your on your way!
<div class="topnav">
<a>Stack Overflow</a>
<div class="form-group">
<form>
<input type="text" name="search" class="form-control" placeholder="Search here..">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
Here is my current UI:
[![enter image description here][1]][1]
I would like to move the red button shown in the picture to the left side of the input. So far I've tried adding a margin-left property but that did not work. Does anyone have a suggestion on how to get the button to move to the left? I'd like to have it aligned with the bottom input field.
Put
style="position:absolute"
to your button, you will be able to move with Left after that.
Bootstrap 3 has a control called a Input Group. You can use it like this:
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<input type="text" class="form-control">
</div>
Note: To move the button to the left or right, simply move the <input> above or below the <div class="input-group-btn">
Try this
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
The solution was easier than I thought, instead of adding margin-left I added margin-right: 20px and it worked.
So I'm building a navbar on a website with a search bar included, along with a grouped button. It works fine on a desktop view, but when I shrink down to mobile view and the site produces the collapsible menu, the search bar stays to the left, but the button floats off to the right. I do not have this issue when I remove the span with the input-group-btn class that surrounds it.
<form class="navbar-form navbar-left form-inline" role="search">
<div class="row">
<div class="input-group">
<input type="text" class="form-control" style="width: 250px;"/>
<span class='input-group-btn'>
<button type="button" class="btn btn-default" aria-label="Search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</form>
Picture included
http://bit.ly/1G706rC
EDIT: I fixed my own issue! I just had to add a pull-left class to the span
The issue might be something to do with the width of the text-input to be fixed in px. Try a relative measure in percentages (%) and it might work since it will resize according to the window size.
I'm trying to implement a search bar on the footer using Bootstrap. The search bar appears to display properly when the window is maximized. However, when I try to resize the window to be smaller, the search form widens and the height of the bottom navbar appears to increase, as shown in the picture below:
What I want is for the navbar height to stay the same. The search bar should also not expand in length. Basically, even with a smaller window, the navbar should appear as follows:
The HTML code that I used to generate the bottom navbar is provided below:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Any help would be greatly appreciated, as I'm fairly new to Bootstrap and web development in general and I've been stuck trying to look for a solution to this problem for several hours without any luck.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form role="form">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9093/
Now you can add styling like padding and margin as you want :)
Try to remove "navbar-form" class from your form and try again.
Instead of this
form class="navbar-form navbar-left"
Try as
form class="navbar-left"
I'm helping with a website and learning all of these skills as I go. I saw similar questions but did not find a helpful resolution.
You can see on the upper right of this screenshot that the search box and button refuse to be on the same line.
http://i.imgur.com/fiurnYs.png
HTML code for the search box looks like this:
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="icon-search"> </i></button>
</div>
</div>
</form>
</div>
CSS code looks like this:
https://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css
You could use the supplied block of code from the docs as a baseline for your code.
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
http://getbootstrap.com/2.3.2/base-css.html#forms
(search for Buttons instead of text)