I am trying to make a search-bar that looks like :
But the following HTML snippet gives a search-bar that looks something like :
<nav class="navbar navbar-default navbar-inverse">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</nav>
How could I make the size of search-bar same as that of the button?
<nav class="navbar navbar-default navbar-inverse">
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</form>
</nav>
You need to use Bootstrap's input group class and put your button appropriately inside it.
HTML CODE:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
Any problem See this tutorial http://bootsnipp.com/snippets/featured/search-panel-with-filters
Related
I'm trying to make a modal window open up when I press a link in my Navbar. I've tried to copy and paste some example code and adjust it a bit but nothing happens when I press the link. What am I missing? I'm still learning Bootstrap so bear with me :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cool Website</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/enabletooltips.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index-styling.css">
</head>
<body>
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<span>Login</span>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Upload, Comment and Rate!">Not Registered? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="header-container">
<div class="container" style="padding-top: 25px">
<div class="jumbotron jumbotronic">
<h1 class="h1">Cool Website</h1>
<p>Catchphrase!</p>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Search Here</div>
<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"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn">Button 1</button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn">Button 2</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn">Button 3</button>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="text-align: center">
<span>This website was made using the following tools</span>
<br>
<span>
Bootstrap | glyphicons
</span>
</div>
</div>
</div>
</body>
</html>
EDIT: Full Code Put up
Working good, You have to include bootstraps.min.js
like this :
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/enabletooltips.js"></script>
More it's better to put script a the end of the page.
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->
I have a navigation bar set up on my website, I have set up a search bar towards the right of the navigation bar, see code below
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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 text-danger" href="index.php">Network TV</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Top rated</li>
<li>Most Popular by Genre</li>
<li>Music</li>
<li>Suggestions</li>
<li id="adminpanel">Admin control panel</li>
<li> </li>
<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="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</ul>
</div>
</div>
</div>
</nav>
I am wondering how do I make it so when the user types information into the search bar the results will be displayed in a bootstrap modal. for example they type 'Movies' a movies modal will pop up with name of movies in it. Here is a close up look of the search bar
<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="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
This depends on how you are planning to grab the data. If I have it right, you're looking to just make a POST/GET request to some database for Movies. Looks like php, maybe Wordpress/Drupal, so guessing it'd be a MySQL request.
Here's a (free) tutorial from PHP Academy, Alex is a good tutor.
PHPAcademy Video:
https://www.youtube.com/watch?v=Yb3c-HljFro
Cheers.
<div class="container h-100">
<form method="POST" action="jq.php">
<div class="d-flex justify-content-center h-100">
<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<i class="fas fa-search"></i>
</div>
</div>
</form>
</div>
Im pretty new to bootstrap, how can i allign my search button with the text box in my navbar? I've tried a couple of hours now without luck. This is how it looks like:
http://bildr.no/image/TDhPNWZZ.jpeg
And this is my code:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-sm-6 col-md-6">
<form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
<div class="input-group">
#using (Html.BeginForm("Search", "Product", FormMethod.Get)) {
<div class="input-group">
#Html.TextBox("searchString", null, new { id = "txtSearch", #class = "form-control", placeholder = "Søk etter vare..." })
</div>
}
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
EDIT: Rendered code:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="/">Alkohol Mekka</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-sm-6 col-md-6">
<form class="navbar-form">
<div class="input-group">
<form action="/Product/Search" method="get">
<input class="form-control" id="txtSearch" name="searchString" placeholder="Søk etter vare..." type="text" value="" />
</form>
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Registrer
</li>
<li>Logg Inn
</li>
</ul>
</div>
</div>
</div>
</div>
You have an incorrect build of nested input-group class. So you have this:
<form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
<div class="input-group">!-- it starts here -->
#using (Html.BeginForm("Search", "Product", FormMethod.Get)) {
<div class="input-group">
#Html.TextBox("searchString", null, new { id = "txtSearch", #class = "form-control", placeholder = "Søk etter vare..." })
</div>
}
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div><!-- and ends here -->
</form>
when you should have something like this:
<form class="navbar-form" role="search" method="get" id="search-form" name="search-form">
<div class="input-group">
#using (Html.BeginForm("Search", "Product", FormMethod.Get)) {
#Html.TextBox("searchString", null, new { id = "txtSearch", #class = "form-control", placeholder = "Søk etter vare..." })
}
<div class="input-group-btn">
<button class="btn btn-success pull-left" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
Basically, you need to remove one .input-group class, and have the whole form (included button) inside the outer input-group
EDIT: Since there's a chance your unrendered code has issues ( I really don't know) here's a Bootply to show you how it works with just default html markup
In twitter bootstrap 3 i would like to add a buttongroup in the navbar, but it seems to break the navbar since it creates linebreaks:
<li>
<form class="navbar-form form-inline" >
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
</li>
how can i avoid the linebreak in the navbar?
Maybe you don't need the to put the form inside a list item:
<!-- Start Of Example -->
<form class="navbar-form form-inline">
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
<!-- End Of Example -->
JS Fiddle Example
Update: another method (you could also use navbar-right to align the ul block to the right)
<!-- Start Of Example -->
<ul class="nav navbar-nav">
<li>
<div class="navbar-form form-inline" role="form">
<div class="form-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
</div>
<div class="form-group">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</div>
</div>
</li>
<li>
<li>Action</li>
</li>
</ul>
<!-- End Of Example -->
Example 2