I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:
<nav class="navbar navbar-default ">
<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>
<div class="navbar-collapse collapse" style="height: 0px;">
<div class="row show-grid">
<div class=" col-xs-8 col-md-6 col-md-offset-2" >
<ul class="nav navbar-nav" id="altre">
<li>Shop
</li>
<li>Style Guide
</li>
<li>Be a man
</li>
</ul>
</div>
<div class=" col-xs-4 col-md-4">
<ul class="nav navbar-nav hidden-xs" id="login">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div class="dropdown-menu">
<form class="navbar-form" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</li>
</ul>
<form class="navbar-form text-center visible-xs" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</div>
</div>
</nav>
At first sight it seems to be working right but when you resize you see the difference between the right and left margin.
I'm very lost at this point, anyone knows a clean way to have a good result?
here the files if you don't want to download one by one:
https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing
thanks
You need to use .container class in divs before rows, the problem that you have seems to be using percentages in margin-left.
<div class="container"><!-- container -->
<div class="row">
<ul>...
</div>
</div>
See: http://jsfiddle.net/uFwnU/
Related
How to make 100% width of the search input in navbar?
The field is limited in width:
<nav class="navbar navbar-light navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<form class="form-inline ">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Name</a>
</li>
</ul>
</nav>
Here is the fiddle:
https://jsfiddle.net/Dieselnick/tdoz2o4d/
Updated 2019
As of Bootstrap 4 the Navbar is flexbox so creating a full-width search input is easier. You can simply use w-100 and d-inline utility classes:
<form class="mx-2 my-auto d-inline w-100">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
http://www.codeply.com/go/sbfCXYgqoO
Here's another example with the search input outside of the collapsing navbar:
<!-- search input not in navbar collapse -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
Codeply
<form class="mr-2 my-auto w-100 d-inline-block order-1">
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
<button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
<ul class="navbar-nav">
..
</ul>
</div>
</nav>
http://www.codeply.com/go/sbfCXYgqoO
And, finally another example that varies the width of the search on desktop/mobile (only full width on mobile) from my answer here
Bootstrap 3 (original answer)
You can use the text-truncate hack on the last navbar li like this..
<li class="text-truncate">
<form class="input-group">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<div class="input-group-btn">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
In Bootstrap 4, text-truncate will set:
overflow: hidden;
white-space: nowrap;
This enables the search form to fill the remaining width and not wrap.
Demo http://www.codeply.com/go/22naSu3c0E
Another option is to use table-cell:
<form>
<div class="table-cell"> </div>
<div class="table-cell fill-width">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
<div class="table-cell">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
http://www.codeply.com/go/JdbPvotSXg
I'm looking for the right way of displaying buttons around an input field in one row, and avoid (if possible) the use the "width" attribute. I want the buttons and field to line up in a fixed width and position even as the value (that the user chooses from the drop down) change
<div class="row" style="margin-top: 30px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group" style="padding-left: 40px;">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-map-marker" style="color:blue"></i> United States <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>United States</strong></li>
<li>France</li>
<li>United Kingdom</li>
</ul>
</div>
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>USD</strong></li>
<li>EUR</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="amountnum"> </label>
<input style="font-weight: bold;text-align: center" type="text" class="form-control input-lg" id="amountnum" placeholder="number" value="10">
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1 month <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li>1 Weeks</li>
<li>2 Weeks</li>
<li><strong>1 month</strong></li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
jsfiddle: https://jsfiddle.net/drorm/k43kyfpw/
when the screen opens, make the left pane narrower to see the buttons line up (instead of falling dropping to separate rows)
Suggestions are appreciated
Add the following CSS style
.navbar-form,.form-inline {
display: flex;
}
The use of flex (or inline-flex) is quite powerful. Combine with the css flex property on items to control the growth and shrinking of controls.
Google "CSS flex" for more.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have the following single line containing an search input bar and 2 buttons. How do I style this to make the search input box smaller according to the buttons next to it? I would like to add 2 more input fields to the right of the search box and to the left of the buttons shown in the image. Is there a way to do this without using "col-md-x"?
http://i.imgur.com/r4kqYm0.png
This is what I have so far but I feel like it is very hacky.
<div class="col-md-10 search-left">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" dropdown>
<button type="button" class="btn btn-default dropdown-toggle first-dropdown" dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
</div>
<div class="input-group-btn" dropdown>
<button type="button" class="btn btn-default dropdown-toggle second-dropdown"
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Search term" ng-model="search.value">
</div>
</div>
</form>
</div>
<div class="col-md-2 search-right">
<div class="pull-right" popover="Please select rows to export" popover-trigger="mouseenter">
<button class='btn btn-default'><span class="glyphicon glyphicon-download-alt"></span></button>
</div>
<div class="pull-right">
<button class='btn btn-default add-item' ng-click="addItem()">Add Staff</button>
</div>
</div>
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls.
In my bootstrap-based ASP.NET application, I need to show navigational links (Home, About, etc.) on the right of the navbar. I also need to have a search button below the nav links. The button must be right-aligned with the right-most nav link. Here is the code that I tried:
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<div class="col-sm-3 col-md-3 navbar-right">
<form class="navbar-form" role="search" method="get" action="~/Home/Search">
<div class="input-group ">
<input type="text" class="form-control" placeholder="Search" id="term" name="term" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
However, the search button is still shown on the same row as the nav links.
How do I get items to vertically right-align in the navbar? Regards.
Just wrap the form in a new container, see this demo (also, I made edits to the structure to correct it):
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="search" method="get" action="~/Home/Search">
<div class="input-group ">
<input type="text" class="form-control" placeholder="Search" id="term" name="term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</nav>
I want to have my search bar visible when the navbar collapses.
My code: http://jsfiddle.net/edalzell/a3yng825/1/ works when collapsed but shows two search bars when expanded.
HTML:
<header class= "blog-masthead">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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>
<form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Blog</li>
<li>About</li>
</ul>
<form class="navbar-form navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-collapse -->
</div>
</nav>
</header>
That is because you have two search bars declared,you have a couple of options to get the desired result
Remove the extra searchbar that you have declared in the collapse
section
Hide/show specific items on your desired resolution ,you can check
this SO thread
I have used the first way ,you can find the jsfiddle here
Complete code:
<header class= "blog-masthead">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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>
<form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Blog</li>
<li>About</li>
</ul>
</div> <!-- navbar-collapse -->
</div>
</nav>
</header>