I am using bootstrap theme and trying to build a header first. In the header how can i make text field to consume the unused space and width to 100% using bootstrap.?
Code Sample
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Smart App</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Post</li>
<li class="dropdown">
Ali Adnan <b class="caret"></b>
<ul class="dropdown-menu"><li>Manage Apps</li></ul>
</li>
</ul>
<form class="navbar-form navbar-left form-inline" style="width:60%" role="search">
<div class="form-group">
<label class="sr-only">Search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
Remove the 'form-group' and try something like this...
.navbar-form {width:62%;white-space:nowrap;}
It won't completely fill the right space (due to the floating right nav), but it will take up most of the navbar.
Demo: http://bootply.com/91377#
Try it:
<input type="text" class="form-control" placeholder="Search" style="width:100% !important;">
to force your css to use 100% of the space.
Related
I've got a brand image and a list including 2 glyph-icons & and search form within a navbar header but the search form button won't stay within the the nav bar and drops to the line below.
Does anyone know the CSS trick to get it onto the same line next to the rest of the li links?
All the CSS is bootstraps native commands.
To fully understand, a current photo:
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</li>
</ul>
</div>
</div>
</nav>
Its simple you have to add the css rule display: inline-block; to your form-group and thats it. You could even remove the surrounding li
Check Fiddle
Add class .form-inline to the .form-control div. Also, insert the button to that div.
See the result:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group form-inline">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
http://jsbin.com/gogeyiy/edit?html,output
Instead of form group you can try input group like this: Demo
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Submit</button>
</span>
</div>
I've created a nav using bootstrap but it's not responding the way i'd like it to. I want it to align with the first image in the photo menu (opens when you click the camera icon), I want it to align with it at all screen sizes. I've tried playing around with margins but i'm not sure if this is the best way, it didn't scale down very nicely.
website: http://explorecanterbury.co.uk/#
Thanks
You have a .container wrapping your .container-fluid. That defeats the purpose of the fluid container. Remove the innermost fluid container and replace the outermost container with a fluid container. You can see the difference in the two snippets below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- ↓ this should be container-fluid ↓ -->
<div class="container">
<nav class="navbar navbar-default" style="z-index:2;">
<!-- ↓ this shouldn't be here at all ↓ -->
<div class="container-fluid" style="padding-left: 5px;">
<!-- 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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li>
<ul class="dropdown-menu">
<li><input type="checkbox"> Museums and Galleries</li>
<li><input type="checkbox"> Landmarks</li>
<li><input type="checkbox"> Shopping</li>
<li><input type="checkbox"> Churches</li>
<li><input type="checkbox"> Tours and Guides</li>
</ul>
<li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
<li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
<li><span class="searchIcon hidden-xs"></span></li>
</ul>
<form class="navbar-form hidden-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<nav class="navbar navbar-default" style="z-index:2;">
<!-- 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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li>
<ul class="dropdown-menu">
<li><input type="checkbox"> Museums and Galleries</li>
<li><input type="checkbox"> Landmarks</li>
<li><input type="checkbox"> Shopping</li>
<li><input type="checkbox"> Churches</li>
<li><input type="checkbox"> Tours and Guides</li>
</ul>
<li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
<li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
<li><span class="searchIcon hidden-xs"></span></li>
</ul>
<form class="navbar-form hidden-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
The key to having a responsive elements is not have a specific width or least set the specific width to a certain break points.
Both .photo-menu and .nav-bar has a fixed width.
You can set .photo-menu to have width: auto and play with position : relative.
And .nav-bar max-width : 415px.
It's also helpful if you utilize the column classes that bootstrap has. (col-lg-x, col-md-x, col-sm-x, col-xs-x). Learn morea about it here : http://getbootstrap.com/css/#grid
Hope that helps!
When I resize the browser the navbar links that say "FIX" drop down into one column. Does anyone know how I can prevent that and keep the links on the same line?
Here is the codepen: http://codepen.io/anon/pen/VvJXNw
<!-- navbar -->
<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" aria-expanded="false">
<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="#">
<div class="logo"><img style="width: 21px" src="logo" /></div>
</a>
</div> <!-- end of navbar header -->
<!-- these links dont stay on the same line -->
<ul class="nav navbar-nav pull-left">
<li><a id="<%= #users ? 'active-page' : ''%>" href="/">FIX</a></li>
<li><a id="<%= #users ? 'active-page' : ''%>" href="/">FIX</a></li>
<li><a id="<%= #about ? 'active-page' : ''%>" href="/">FIX</a></li>
</ul>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Sign up</li>
<li>Sign in</li>
</ul>
<form class="navbar-form navbar-right hidden-xs hidden-sm" role="search">
<div class="form-group">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You need to place these links inside the navbar-header, then you can use a helper such as navbar-btn to position. Also don't use pull-*, use navbar-left or navbar-right. See Docs.
See working example Snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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="#">
<img alt="" src="/" />
</a>
<div class="nav navbar-left"> Some Link
Some Link
Some Link
</div>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Sign up
</li>
<li>Sign in
</li>
</ul>
<form class="navbar-form navbar-right hidden-sm hidden-xs" role="search">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
</form>
</div>
</div>
</nav>
Don't use in navbar pull-left.
In custom bootstrap navbar default style is on left.
If you want use two side just add navbar-right to right side of nav.
Bootstrap navbar with form
Demo here:
I am using bootstrap to style my site and I want to use it to style my search field. When I do the button looks like a large square instead of the rounded button that's supposed to go with the search field. heres the code
{{-- Navigation --}}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
{{-- Brand and toggle get grouped for better mobile display --}}
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#navbar-main">
<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="/">{{ config('blog.name') }}</a>
</div>
{{-- Collect the nav links, forms, and other content for toggling --}}
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
Home
</li>
</ul>
<ul class="nav navbar-nav">
<li>
Contact
</li>
</ul>
<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>
</div>
</div>
The css is the standard css with nothing altered. Tried to paste it but it slowed my computer down. Can anyone suggest what I could do to rectify this?
Fiddle
I'm trying to get the search box to be in the center of my Bootstrap navbar. Removing navbar-left seems to destroy the alignment on the navbar. Im going for something like the linkedin.com page. Whats the easiest way to do this?
Heres a link to a JSFiddle of my navbar https://jsfiddle.net/b6pmy9w4/. Thanks in advance for any help.
Html Code:
<nav class="navbar navbar-default" style="border-radius: 0;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed burger-button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 jura-font" href="/#!/">COLIGN</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" 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>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-comment"></span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>Manage Account</li>
<li>Invite a friend</li>
<li role="separator" class="divider"></li>
<li>Log out</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Don't know if it's the best way to do it but
Remove the navbar-left
Move it after the ul
Set text-align:center
Updated fiddle
I know this post is old now, but on Bootstrap4 I just added the ml-auto class to the form tag and it worked perfectly:
<form class="form-inline my-2 my-lg-0 ml-auto">
You can also add the col classes to change the size of the form input and the button.