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>
Related
CODE: (with bootstrap3 and jQuery)
<body>
<div class="navbar navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px;">
<li><i class="glyphicon glyphicon-menu-down icon_navbar_color"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="collapse navbar-collapse1" style="">
<form class="navbar-form">
<div class="input-group input-group-sm" style="max-width: 100%;">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
jsfiddle: https://jsfiddle.net/o2daoew5/
This code performs opening collapsed div under the navbar.
When Browser's width is shorter than 768px, It's input bar wide enough.
But Browser's width is more than or equal 768px, It's input bar becomes shorter.
Question:
I want to make this input bar's width fully responsive to browser's width. Not becoming shorter. How can I fix it?
Use class form not navbar-form
<div class="collapse navbar-collapse1" style="">
<form class="form">
<div class="input-group input-group-sm" style="max-width: 100%;">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
</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'm using Bootstrap 3.2.0 and I have the following code:
<form name="singUpForm" id="singUpForm">
<div class="top-margin">
<div class="input-append">
<label>Contact<span class="text-danger"></span></label>
<input type="url" class="span2" ng-model="Person.url" required="required">
<button class="btn" type="button">
Test
</button>
<button class="btn" type="button">
Ayuda
</button>
</div>
<div class="alert alert-warning" ng-hide='singUpForm.email.$valid' >
Ingrese una url válida.
</div>
</div>
<div class="row">
<div class="col-lg-4 text-right">
<button ng-disabled='singUpForm.$invalid' type="submit" class="btn btn-action" ng-click="signUp()">
Guardar datos
</button>
</div>
</div>
</form>
I want to make the input type="url" wider traying to force it to get the 100% of the space inside the form with the two buttons on the right on the same line.
I need something like that:
Use 'form-control' , 'row' and 'col'
In 'xs' screen you can change the class as 'col-xs-6' in both columns
UPDATED DEMO
<div class="input-append">
<label>Contact<span class="text-danger"></span></label>
<div class="row">
<div class="col-md-10 col-sm-9 col-xs-12 col-lg-10">
<input type="url" class="form-control" ng-model="Person.url" required="required" />
</div>
<div class="col-md-2 col-sm-3 col-xs-12 col-lg-2">
<button class="btn" type="button">
Test
</button>
<button class="btn" type="button">
Ayuda
</button>
</div>
</div>
</div>
You can set the input attribute to a specific size <input size="100">.
You can apply:
style="width:100%"
in the <input> field, so it's like:
<input type="url" class="span2" ng-model="Person.url" required="required" style="width:100%">
Or you can add it in the CSS:
.span2{
width: 100%
}
http://jsfiddle.net/sc212f7s/
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 :)