I use twitter bootstrap and its cover example as the base. I added a few input fields there and would like to have second (email) to be located in the middle (i.e. horizontally aligned). I've tried to add .center-block and .text-center to different div elements, but it didn't help. What should be the solution?
Here is the code:
<p class="lead">Some other text to demonstrate something else</p>
<div class="lead">
<div class="form-group">
<div class="text-center center-text">
<div class="input-group input-group-lg">
<input type="email" class="form-control" id="email">
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-secondary" id="analyze" data-loading-text="Wait...">Analyze</button>
</div>
and here is the jsfiddle.
remove class input-group like below:
<div class="input-group-lg">
<input type="email" class="form-control" id="email">
http://jsfiddle.net/fwz0w44n/
Related
I'm new to bootstrap and search a lot on this forum but couldn't find an answer to my question
I have the following code for 2 forms on my page
<div class="row justify-content-md-center">
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Join a group</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</form>
</div>
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Create a new group long text</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupName"
name="groupName"
placeholder="Fill in the groupname"
/>
</div>
<button
type="submit"
id="form-submit-create-family"
name="form-submit-create-family"
class="btn btn-primary"
>
Create
</button>
</form>
</div>
</div>
</div>
This looks like this
2 columns that looks the same
when I make the window smaller so that the long text of the second column becomes 2 lines, the layout is wrong.
wrong layout
I would like it to be the same, so the input box of the first one should be on the same height as the second one
You can use flex for that!
I've added the flex classes to the form and an extra div as wrapper around everything but the headline to let 'justify-content-between' do its magic and push the headline and the div apart.
<form method="POST" class="h-100 d-flex flex-column justify-content-between">
<h3 align="center">Join a group</h3>
<div>
<div class="form-group mt-auto">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</div>
</form>
https://jsfiddle.net/1jzgohs4/
In the code below I have 2 buttons and 3 labeled inputs. I want the buttons aligned with the inputs, but they are aligned with the labels. I tried inline forms, but having the labels on the side won't do.
What's the best option to accomplish this without breaking bootstrap too much?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</script>
<form role="form">
<div class="row">
<div class="form-group col-xs-1">
<button type="button" class="btn btn-success btn-add">+</button>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-2">
<button type="submit" class="btn btn-default">Filter</button>
</div>
</form>
Since you are using bootstrap and you might not want to customize CSS too much unless you really know what you are doing.
Therefore, try to have the same structure then you will get the same result, add <label> </label> to those button as a placeholder, so they will behavior the same as screen changes.
Also add form-control to the submit button and let bootstrap deal with it :D
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
<div class="row">
<div class="form-group col-xs-1">
<label> </label>
<button type="button" class="btn btn-success btn-add">+</button>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-2">
<label> </label>
<button type="button" class="btn btn-default form-control">Filter</button>
</div>
</div>
</form>
Quickest (and not a little dirty) way I can think of doing this to fit with Bootstrap would be to introduce placeholder labels, then hiding them. Note however that this is very fragile as it stands - if the layout is allowed to get too compressed width-wise (or if label text is allowed to wrap), misalignment will still occur:
.invisible-label {
visibility: hidden;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
<div class="row">
<div class="form-group col-xs-1">
<label class="invisible-label"> </label>
<button type="button" class="btn btn-success btn-add">+</button>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-2">
<label class="invisible-label"> </label>
<button type="submit" class="btn btn-default">Filter</button>
</div>
</div>
</form>
Applying display:inline-block to the label and the input should allow them to flow onto the same line, but may simply require display:inline
I am using Bootstrap 3 and I stuck on some form formatting.
E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)
If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).
So is there any way to align this form elements instead of this?
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.
And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.
Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)
.form-group > label {
display: inline-block;
vertical-align: middle;
width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
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 this problem with all the labels/inputs in my code. When my browser is in full screen it works fine, but when I minimize it even a bit, the input field steps over the label.
How do I avoid this?
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
Here's a jsfiddle for an example http://jsfiddle.net/2MdFf/
PS: Same goes for buttons: http://jsfiddle.net/9q949/
<div id="user-edit-buttons" class="form-group">
<div class="col-xs-1">
<button type="button" class="btn btn-danger" onclick="cancelUserEdit()">Avbryt</button>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-success" onclick="saveUser()">Lagre</button>
</div>
</div>
This is precisely why Bootstrap offers col sizing for multiple screens widths. Your column contents are overflowing their containers due to the sizing of those elements.
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-2 col-lg-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
They expect you to use different column sizes to make your elements work well in the different screen sizes.