In this example the search input is very long until the end of page. I copied the html code but mine is short for some reason and couldnt really figure out the part that makes it long ? What's the trick ?
Code for my navbar:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("KTEMB Veritabanı", "Index", "Members", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Üyeler", "Index", "Members")</li>
<li>#Html.ActionLink("Kayıtlı Personel", "Index", "Employees")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</div>
The example you cited uses Bootstrap 3.1, using 3.3.x would explain why it doesn't work for you. Some of the other examples you'll come across use older versions of Bootstrap too - so they won't work with newer versions of BS.
This works a little better. Leaving the .form-group class at 100% width (which is default) is one of the things that causes a problem, so changing it to 95% or less works. Also, it appears to fail when using a float class, like .navbar-right, (which is why it was converted to inline) so watch out for those...
<div class="collapse navbar-collapse">
<form class="navbar-form" role="search">
<div class="form-group" style="display:inline; float:right; width:95%;">
<div class="input-group" style="width:100%">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon" style="width:1%"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
You need to use .form-group and .input-group, like:
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
Related
I'm trying to pull on the right in the header a button with a input text field, this is my code:
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix"></div>
</div>
so as you can see, I have on the left the title of the header and on the right i want on the same line the input and one or more buttons, the problem is if I add only button it's work perfectly, all on the same line, if I add a form-group in input go in two line as you can see in the image below.
How can I have all in the same line?
Thanks
Try to make this div
div class="form-group label-floating"
go inline with the button
button id="show-hide-filter-button"
using css "display: inline-block" on the div (by default it goes with "display: block")
Add display:inline to the .form-group, or display:flex to the .pull-right
You can do this with Flexbox just use display: flex on both header and pull-right class.
.page-header, .pull-right {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
</div>
The buttons and the field container should have "display:inline-block;":
<div class="page-header">
<div class="pull-left" style="float:left;">
<h2>Header</h2>
</div>
<div class="pull-right" style="float:right;">
<div class="form-group label-floating" style="display:inline-block;">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button style="display:inline-block;" id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix" style="clear:both;"></div>
</div>
Try this fiddle
<nav class="navbar page-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Header</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="search" class="form-control search">
</div>
<button type="submit" class="btn btn-transparent">Mostra Filtro</button>
</form>
</div>
I created a Fiddle of my Problem (however in Fiddle it is displayed correctly).
https://jsfiddle.net/rjf8tsbk/1/
As you can see, i have a form with 4 inputs. Whenever i execute this on Webstorm, the website is displayed in chrome but ALL inputs have NO margin (no space). I copied my code to jsfiddle and its looks correct. I wonder if i have an error in webstorm or could this be an error within bootstrap?
This is a picture how it looks like normal :
EDIT (HTML CODE)
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LearnYou
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Sign in" class="btn btn-success ">
</div>
<div class="form-group">
<input type="button" value="Sign up" class="btn btn-success ">
</div>
</form>
</div>
</div>
</nav>
</body>
EDIT 2:
Looks like the problem comes from "Jade", whenever i execute simple html5 it is rendered correctly but when i use Jade it is displayed wrong.Any Ideas?This my Jade Code:
nav(class="navbar navbar-inverse")
div(class="container")
div(class="navbar-header")
button(type="button" ,class="navbar-toggle collapsed" ,data-toggle="collapse", data-target="#navbar", aria-expanded="false" ,aria-controls="navbar")
span(class="sr-only") Toggle
span(class="icon-bar")
span(class="icon-bar")
span(class="icon-bar")
a(class="navbar-brand" ,href="#") LearnYou
div(id="navbar",class="navbar-collapse collapse")
form(class="navbar-form navbar-right", role="form")
div(class="form-group")
input(type="text", placeholder="Email", class="form-control")
div(class="form-group")
input(type="password", placeholder="Password", class="form-control")
input(type="submit", class="btn btn-success" ,value="Sign in")
input(type="button", class="btn btn-success", value="Sign up")
.form-group {
margin-left:10px;
}
To apply margin you can use mx class
<div class="form-group mx-2">
<input type="text" placeholder="Email" class="form-control">
</div>
for margin right and left in the same time or you can use mr-2 (margin right) and ml-2 (margin left)
Bootstrap v5 dropped form-specific layout classes in favour of existing grid and utility classes. Using legacy classes with v5 will no longer produce the expected styling from previous versions — such as the form-group margins. See the form section in the Migration To v5 guide for more info.
The v5 form examples now use margin utility classes, which should produce the desired result. These classes should provide an easy solution without the need for custom styling rules.
Example:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
...
</form>
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
I am using bootstraps 3 to create a nav bar and for the life of me I cannot get it to layout the way I would like. I am having a hard time learning all these bootstrap classes. Anyways I would like all 5 of my elements here to be layed out horizontally in a single row but as you will see in the fiddle all 5 components are on a different row. Any suggestions?
Fiddle : http://jsfiddle.net/cdewey/7M7sj/1/
Code:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<form class="form form-horizontal" role="form">
<ul class="nav navbar-nav">
<li>
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker1' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</div>
</li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
pickDate: false
});
$('#datetimepicker3').datetimepicker({
pickDate: false
});
$('#datetimepicker1').datetimepicker({
pickTime: false
});
});
</script>
</nav>
Use this tag to open the menu div:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
Look this really clear example to understand how it works: http://getbootstrap.com/examples/navbar-fixed-top/
JSFiddle Demo
You must remove the <div class="form-group"> after the li and put it just after the ul.
The <div class="form-group"> just creates separate entities for every li. Look at the demo I provided. You will understand.