I am using bootstreap 3. My code is below div .navbar is showing properly on top.
But problem is with .container it is not showing below the .navbar
What change should I make to work it properly
<body>
<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="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="#">My Office</a>
</div>
<div class="navbar-collapse collapse pull-right top-margin">
<form class="form-inline" method="post" action="login">
<div class="form-group">
<input type="text" placeholder="Username" name="userName" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs10">Join us</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-default">Sign Up</button>
</div>
</div>
</div>
</body>
You need to add padding to the top of the body for fixed navbars:
body { padding-top: 70px; }
From the docs:
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
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>
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>
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 have this markup for twitter bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Modus - Clientportal</title>
<link rel="stylesheet" href="/packages/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/main.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Modus - Clientportal</a>
<p class="navbar-text">You are logged in as Sebastian</p>
</div>
<div class="navbar-collapse collapse">d
<div class="navbar-right">
<ul class="nav navbar-nav ">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<a class="btn btn-default navbar-btn" href="/logout">Logout</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">profile.title</h3>
</div>
<div class="panel-body">
<form method="POST" action="/profile" accept-charset="UTF-8">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPasswordConfirmation1">Password Confirmation</label>
<input type="password" class="form-control" id="exampleInputPasswordConfirmation1" placeholder="Password">
</div>
<input class="btn btn-primary" type="submit" value="profile.btn.save">
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/packages/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
if i load this up the fixed-navbar breaks and lose its height.
The only solution i found yet was to change the type of the Password fields to anything else, but that cant be the solution since i need a password field there.
any suggestions?