I'm trying to create a single row with search inputs (a text input and an 'attached' button) at the left, and a button at the right (the bit above the grid):
Here's the code:
<form class="row form-inline">
<div class="form-group col-xs-6">
<div class="input-group">
<input name="search" type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-xs-6">
<a class="btn btn-default btn-sm pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
The problem is that the width of text input is too small at the 'lg' and 'md' browser sizes, and only increases to something that looks OK when the browser is at smaller sizes. What's the best way to increase the width of the search input at larger browser sizes?
Try this as well
<form class="row form-inline">
<div class="form-group col-md-8">
<div class="input-group">
<input name="search" type="text" class="form-control col-md-6">
<span class="input-group-btn col-md-2">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-md-4">
<a class="btn btn-default pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
why dont you set the width on the input using bootstrap classes? e.g.
<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12">
As you can see in Bootstrap DOC form-inline require setting a width for input componentes:
http://getbootstrap.com/css/#forms-inline
To solve that problem I have custom classes for that:
.input-width-X {width: X}
.input-width-Y {width: Y}
...
and use media queries for this classes in order to apply them just when you are not in XS mode, because Bootstrap set 100% width on it.
Sorry about my english :)
Related
I have a project that is based on the Gentellela template from ColorLib. The Search Bar at the top is inline and styled, however is not a form. When I add the code to submit the search to my view, the submit ("Go") button moves to the next line.
What is the best way to accomplish this while keeping the style?
Original Code from Template (sans form tags).
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
My Latest Attempt
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for...">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</form>
</div>
As Always, I appreciate all help, suggestions and comments.
A good practice would be to nest the input field and the button inside form-group with a div that has a input-group class. This is how input groups are made on Bootstrap.
It applies a display:inline-table style to hold the components inline.
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
</div>
</form>
</div>
I'm trying to move the class "top" (my search bar/button) half way down the page but am having no luck using bottom or anything else. Currently it's just stuck at the top. I would also like to make the search box bigger but am not sure how to.
<div class="row top">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a hero">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span> Search
</button>
</span>
</div>
</div>
<div class="col-md-2">
</div>
</div>
Also I'm sure there's a better way to center my search box instead of adding columns either side to appease the grid system but I have no idea, any tips?
Here's what it currently looks like:
Try adding your own class to the div
CSS
.top-buffer { margin-top: 30px;}
HTML
<div class="row top top-buffer">
<div class="col-md-8 col-md-offset-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a hero">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span> Search
</button>
</span>
</div>
</div>
</div>
I have created a Textbox and a submit button with the help of input-group in Bootstrap:
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
I want to add an icon for geolocation in the textbox which is clickable, I tried to do many things like adding another span with input-group-addon but that's creating a button kind of thing. I want the icon to be inside the textbox and make it clickable. Can anybody suggest a way to do it?
Add an anchor set it a class of glyphicon and then make its position:absolute like one below:
DEMO
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
CSS
.glyphicon-map-marker{
position:absolute;
z-index:1000;
top:30%;
left:2%;
}
a.glyphicon-map-marker
{
text-decoration: none !important;
}
Anirudh, Hi there, You could probably try something like this without all the extra css.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<a href="#" onclick="alert('clicked');" ></a>
<div class="input-group-addon glyphicon glyphicon-map-marker btn"></div>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<form ng-submit="search(searchterm)">
<div class="form-group">
<div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
<input type="text" class="form-control" ng-model="searchterm">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
<div class="col-sm-2 col-md-2 col-lg-2"></div>
</div> <!-- end row -->
My client wanted a search box with a clickable search glyphicon on the right, and the search box centered in the window, the search box bigger than normal (input-group-lg), with responsive views. I was a miserable wretch until I saw AngularJR's answer. :-)
.input-group abbr{
font-size: 23px;
position: absolute;
right: 16%;
top: 6px;
z-index: 500;
}
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">enter code here
<abbr><i class="fa fa-map-marker"></i></abbr>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
I have this issue:
The html is as follows:
<div class="row">
<div ng-cloak class="col-md-7 col-sm-6 col-xs-12">
<form class="form">
<input type="text" class="form-control" />
</form>
</div>
<div class="col-md-5 col-sm-6 col-xs-12 no-wrap">
<span class="push-buttons-away-from-search-bar btn-group" role="group">
<a class="btn btn-lg" href="">A link</a>
<a class="btn btn-lg" href="">Another link</a>
</span>
</div>
</div>
Can you think of a responsive (bootstrap) way of making the search bartake up all space it can, and leave space for the 2 buttons on the side.
Notice the spacing between the 2 buttons, the button grouping styling was getting in the way... Perhaps you suggest using button groups?
What you're likely looking for, assuming you're using Bootstrap 3, is Justified Buttons. Red: http://getbootstrap.com/components/#btn-groups-justified
Example:
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Right
</div>
</div>
</div>
JSFiddle: Note that this can be extended to more than one button.
Update
Since you need the input to scale without the buttons scaling, have you tried Segmented Buttons on an Input Group? Ref: http://getbootstrap.com/components/#input-groups-buttons-segmented
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Button One</button>
<button type="button" class="btn btn-default">Button Two</button>
<button type="button" class="btn btn-default">Button Three</button>
</div>
</div>
JSFiddle: Note this won't give you a space between the buttons.
What would be the best way to have a logo and form in the center of the page while being responsive?
Currently, I have something like
<div class="container">
<img src="logo.jpg" class="logo img-responsive center-block">
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
then I edited it slightly in the css;
.form-group { margin-top: 15px; width: 50% }
.logo { width: 300px; }
However, now the logo will not resize like the input box does.
now you'll need to change the col size for each media that you need xs sm md and lg but this would do the trick that you are looking for.
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
i assumed that you need a fluid container, the offset col would take , and for farther reading check this
Demo
A fluid container does the trick, but a fixed container should be able to keep it center without taking all the screen span which is annoying on medium+ resolutions.
Also, media queries should keep .container within a specific width for responsiveness' sake.
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>