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>
Related
For some reason.. the button in the input-group keeps wrapping to the 2nd line.. the only way I can force it to stay on the 1st line is to use CSS to make the width 80% for example. But then the spacing seems off between the 4 elements..
Is there a cleaner way of doing this? I dont even know why it's wrapping to the 2nd line.. maybe because I'm using this in a Modal?
EDIT: how it looks like http://imgur.com/sfWqATl
<!--3rd row-->
<div class="row form-group">
<div class="col-md-2">
stuff...
</div>
<div class="col-md-4">
<div class="input-group">
<small>Logo 1 ID / File Path</small>
<br />
<div>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-folder-open" type="button"></button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
stuff...
</div>
<div class="col-md-2">
stuff...
</div>
</div>
I think you may have gotten a little mixed up in setting up the classes and elements to chain correctly based on the documentation. I re-wrote some of the code to model it from the bootstrap website, and it appears to work fine:
<div class="col-md-4">
<small>Logo 1 ID / File Path</small>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-folder-open"></i></button>
</span>
</div>
</div>
You can see the example here: http://www.bootply.com/EHvB2rn9YW
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'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 :)
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>
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>