Using Bootstrap 3, I am trying to align adjacent input elements with my label which is intended to be grouped with a checkbox. At the moment, the checkbox and label are displayed a few pixels below the search query box and button. The brand name also appears to be a few pixels higher.
On Bootply: http://www.bootply.com/6tJSBqZ2d5
<div class="container row navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<form class="navbar-form navbar-right" id="search-form" method="get" name="search-form">
<div class="input-append">
<input class="form-control" id="query" name="query" placeholder="Search..." value=""> <button class="btn btn-info" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<div class="checkbox">
<h3><span class="label label-default">Refresh
<input type="checkbox"></span></h3>
</div>
</div>
</form>
</div>
What is the proper way to align all elements and have them properly spaced?
The h3 is adding margin-top and margin-bottom, and the checkbox element that you have is 8px shorter than the other elements in the header.
So if you add the h3-align class as shown below to the h3 then it will be aligned:
CSS:
.h3-align {
margin-top: -4px;
margin-bottom: 0px;
}
HTML
<h3 class="h3-align">
<span class="label label-default">Refresh
<input type="checkbox">
</span>
</h3>
Bootply example
Related
I'm trying to pull on the right in the header a button with a input text field, this is my code:
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix"></div>
</div>
so as you can see, I have on the left the title of the header and on the right i want on the same line the input and one or more buttons, the problem is if I add only button it's work perfectly, all on the same line, if I add a form-group in input go in two line as you can see in the image below.
How can I have all in the same line?
Thanks
Try to make this div
div class="form-group label-floating"
go inline with the button
button id="show-hide-filter-button"
using css "display: inline-block" on the div (by default it goes with "display: block")
Add display:inline to the .form-group, or display:flex to the .pull-right
You can do this with Flexbox just use display: flex on both header and pull-right class.
.page-header, .pull-right {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
</div>
The buttons and the field container should have "display:inline-block;":
<div class="page-header">
<div class="pull-left" style="float:left;">
<h2>Header</h2>
</div>
<div class="pull-right" style="float:right;">
<div class="form-group label-floating" style="display:inline-block;">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button style="display:inline-block;" id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix" style="clear:both;"></div>
</div>
Try this fiddle
<nav class="navbar page-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Header</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="search" class="form-control search">
</div>
<button type="submit" class="btn btn-transparent">Mostra Filtro</button>
</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'm trying to implement a search bar on the footer using Bootstrap. The search bar appears to display properly when the window is maximized. However, when I try to resize the window to be smaller, the search form widens and the height of the bottom navbar appears to increase, as shown in the picture below:
What I want is for the navbar height to stay the same. The search bar should also not expand in length. Basically, even with a smaller window, the navbar should appear as follows:
The HTML code that I used to generate the bottom navbar is provided below:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Any help would be greatly appreciated, as I'm fairly new to Bootstrap and web development in general and I've been stuck trying to look for a solution to this problem for several hours without any luck.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<form role="form">
<div class="input-group">
<input type="text" class="form-control" name="gpsForm" placeholder="Latitude, Longitude">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</div>
</div>
</form>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9093/
Now you can add styling like padding and margin as you want :)
Try to remove "navbar-form" class from your form and try again.
Instead of this
form class="navbar-form navbar-left"
Try as
form class="navbar-left"
How to align content in the center?
Currently the Header Text
and
the Login/Password Input fields
are not aligned in the center, and align seperately
Example:
"Header1"
"Header2"
...."login"
...."password"
...."buttons"
Header Fields:
<body>
<div class="headerLogo" align="center">
<img src="images/login.png"><br><br><br>
<h1 class="form-signin-heading">
<b>header1header1</b>
</h1>
<h3 class="form-signin-heading">
headerheader2
</h3>
</div><br><br><br><br><br>
Login Input Fields:
<div class="container">
<form class="form-signin" method="Post">
<input type="text" id="email" class="form-control" placeholder="email">
<input type="password" id="password" class="form-control" placeholder="pwd">
<label class="checkbox">
<input type="checkbox" value="remember-me">
Keep Login
</label>
<button class="btn btn-lg btn-info btn-block" type="submit">
<b>로그인</b>
</button>
<div class="row">
<div class="col-md-6">
<a class="btn btn-lg btn-primary btn-block"><b>Email Join</b></a>
</div>
<div class="col-md-6">
<a class="btn btn-lg btn-primary btn-block"><b>Find Password</b></a>
</div>
</div>
</form>
</div>
</body><!-- /container -->
Centering placeholder text alone isn't browser wide supported. For safari and mozilla (seems to work in chrome) you can use:
::-webkit-input-placeholder {
text-align:center;
}
input:-moz-placeholder {
text-align:center;
}
DEMO
If you are OK with the text that the user inputs be centered as well use:
input {
text-align:center;
}
EDIT: I'm assuming you are using bootstrap.
try <div class="container" style="margin-right:30px"> if that doesn't work putting it onto jsfiddle would be helpful.
if you are using bootstrap and by the looks of you code you are, you can center text by adding the class "text-center".
<p class="text-center">aligned center</p>
And some other useful alignments available in bootstrap :
<p class="text-left">aligned left</p>
<p class="text-right">aligned right</p>
<p class="text-justify">justified</p>
I have a dropdown in bootstrap, but I don't know how to center a form I have within it.
Here is my code;
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Testing, 123</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<div class="dropdown-menu">
<form accept-charset="UTF-8" action="/sessions" method="post">
<fieldset class='textbox login'>
<label id='js-username'>
<span>Username</span>
<input autocomplete="on" id="username" name="username" type="text" size="20px"/>
</label>
<label id='password'>
<span>Password</span>
<input id="userpassword" name="userpassword" type="password" />
</label>
</fieldset>
<fieldset class='subchk'>
<input name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
I have adjusted the width of the dropdown in the css to fit my form, I just can't work out how to center the form within the dropdown.
Without seeing your CSS it's hard to say for sure that this will work, but try this:
.dropdown-menu form {
width: *insert form width here in pixels*;
margin: 0 auto;
}
This answer assumes that the li with the class dropdown is bigger horizontally than your form, and you are trying to center the form within it. To center something horizontally using this method it must have a fixed width, and the width must be smaller than the parent element (in this case the li with the class dropdown).
Edited to add: I didn't realize how old this question was until after I answered it..
Just create a class with some padding and add it to your form tag, like so:
CSS
.wrap {
padding:15px;
}
HTML
<form class="wrap" accept-charset="UTF-8" action="/sessions" method="post">...</form>
Demo: http://jsfiddle.net/a52UY/
use center tag it might be help to you
<center> </center>
<div class="dropdown-menu">
<center>
<form accept-charset="UTF-8" action="/sessions" method="post">
.......
</form>
</center>