I want to center the .input-group inside a <div>. When I use the class center-block, the <span> takes the full width and pushes down the input field below it. I want to center them together.
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<div class="input-group input-group-lg inv-amount-block">
<span class="input-group-addon" id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div>
I want to center them together like how they are by default.
Here is the fiddle
Just change the display property in the CSS for the .center-block
Edited: Difference between display: block and display: table is that - . display: block - will extend to 100% of the available space, while display: table - will only be as wide as its contents.
So in the latter case your span and input field would only be as wide as its content and won't take up the entire 40% width that is specified.
.center-block {
display: table; /* Instead of display:block */
margin-left: auto;
margin-right: auto;
}
<div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="input-group input-group-lg inv-amount-block center-block ">
<span class="input-group-addon " id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div><br>
<div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="input-group input-group-lg inv-amount-block ">
<span class="input-group-addon " id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div>
In Bootstrap 4, center-block has been replaced by mx-auto, and input-group has changed to display:flex. Here's how to center in Bootstrap 4...
<div class="col-12">
<div class="input-group input-group-lg w-25 mx-auto">
<div class="input-group-prepend">
<span class="input-group-text">Rs</span>
</div>
<input type="text" class="form-control" placeholder="Your Amount">
</div>
</div>
Remember that input-group will fill the width of the parent, so in this case I added w-25 (width:25%) to demonstrate the centering.
Demo on Codeply
Copy below code and paste in your file and run check this input box is align center and responsive also.
This example is based in bootstrap v3.4
<!DOCTYPE html>
<html>
<head>
<title>Center Input box demo</title>
<link href="https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form class="row" action="" method="post" id="search_project_form">
<div class="col-md-4 col-sm-2 col-sm-offset-4 col-xs-offset-2">
<input type="text" name="search_group" id="search_group" class="form-control" placeholder="Group Number" required>
</div>
<button type="submit" class="btn btn-primary">Download Data</button>
</form>
</div>
</body>
</html>
Use display: grid for input-group-text element.
<div class="input-group">
<div class="form-floating" style="width: 85%;">
<input type="text" class="form-control" id="abc" placeholder="Description">
<label for="abc">Description</label>
</div>
<div class="input-group-text" style="display: grid; width: 15%;">Hello</div>
</div>
Related
I need small white space between two text boxes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-lg-12 col-sm-12">
<div class="input-group col-md-8">
<span class="control-label">Product Name*</span>
<input type="text" class="form-control" placeholder="Product Name" id="productname" required>
</div>
<div class="input-group col-md-4" style=>
<span class="control-label">Short Name*</span>
<input type="text" class="form-control" placeholder="ShortName" id="shortname" required>
</div>
</div>
Are you want space between the textbox? i mean in small device it having in two row .so there is add mt-3(margin-top) for below margin to each input-group
Is this issue?
Add mt-3(margin-top) to each input-group and also add a width to span for correct alignment like this span{width:130px;}
span{
width:130px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="input-group col-12 mt-3">
<span class="control-label d-flex h-100 align-items-center">Product Name* </span>
<input type="text" class="form-control" placeholder="Product Name" id="productname" required>
</div>
<div class="input-group col-12 mt-3" style=>
<span class="control-label d-flex h-100 align-items-center">Short Name* </span>
<input type="text" class="form-control"placeholder="ShortName" id="shortname" required>
</div>
</div>
</div>
You may use margin or padding class on your span element :
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-lg-12 col-sm-12">
<div class="input-group col-md-8">
<span class="control-label px-1">Product Name*</span>
<input type="text" class="form-control" placeholder="Product Name" id="productname" required>
</div>
<div class="input-group col-md-4" style=>
<span class="control-label px-1">Short Name*</span>
<input type="text" class="form-control" placeholder="ShortName" id="shortname" required>
</div>
</div>
https://getbootstrap.com/docs/4.5/utilities/spacing/
Spacing
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
How it works
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.
Using Bootstrap 3 forms. In a normal Bootstrap form with field labels on top on input fields (no form-inline, no form-horizontal) I want to be able to display a flexible number of controls in the same row. For example:
4 controls on a full width screen
2 controls on a medium size screen
1 control on small screens
To get this we can use a Bootstrap row to group all four controls and appropiate col-xx-x classes for each control. See code below.
The problem with this layout is that when the controls are displayed stacked (more than one row) and the help-block used to display errors in controls is displayed the layout of the control just below the help text is pushed one position to the right. The reason for this is that those controls share the same row and the extra height added by the help message fills one space in the lower row. See the example provided.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-block" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>
I have experimented with form-inline forms, but then the help text is displayed on the right side of the control instead of below.
I hope this is what you are looking for...
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.no-right-margin {
margin-right: 0 !important;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-text" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-3 no-padding">
<div class="row no-right-margin">
<div class="form-group col-xs-12 col-md-12 col-lg-12">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>
I ran into this same issue and went with the absolute positioning you hinted at. Here is my bootstrap override
.form-group {
position: relative;
.help-block { position: absolute; right: 2rem; bottom: -3rem }
}
I put it the right so when the field are stacked it doesn't clutter with the label.
I haven't determined the full consequences of this in all contexts but for the issue at hand it seems to work well. Future pages may make me tweak the values for one reason or another.
Hi I have a few input fields, they have a left and right side where the left is just a label and the right is the data.
However the left sides of the fields are all different sizes depending on the text in it. I want to have the width the same for all and the text aligned to the left.
Here is what I have:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">hdsfkjdhf</span>
</div>
<input type="text" class="form-control" placeholder="Loading" value="{{person?.name}}" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">sdf</span>
</div>
<input type="text" class="form-control" placeholder="Loading" value="{{person?.age}}" aria-label="Age" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Other Stuff</span>
</div>
<input type="text" class="form-control" placeholder="Loading" value="{{person?.otherStuff}}" aria-label="Stuff" aria-describedby="basic-addon1">
</div>
Also I am using bootstrap 4
If you really want to use input-groups, you can add a little CSS to control the width of each .input-group-prepend...
https://codeply.com/go/wv5NMmTgwq
.input-group>.input-group-prepend {
flex: 0 0 20%;
}
.input-group .input-group-text {
width: 100%;
}
An alternate option is to use custom borders with form grid layout like this...
<div class="form-group row border rounded">
<label class="col-sm-2 col-form-label bg-light border-right border-bottom">Labelhere</label>
<div class="col-sm-10 border-bottom">
<input type="text" class="form-control border-0" id="input">
</div>
</div>
Demo of both options
A bit of a beginner's question, I am trying to make my form to look like the following image where the text on the left are vertically aligned and the input field has the same widths.
twitter form
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="d-inline">Full Name: </label>
<input type="text" placeholder="First Name" formControlName="firstName">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label class="d-inline">Email: </label>
<input type="email" placeholder="Email" formControlName="email">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
Which gives me the following result. I also want the input to stretch to the remaining parent container so that it stops before the "some text".
my attempt
I have tried to set the width css property of the input field to 100% hoping that it will do it. However, that just stretch it all the way which forces it to go to the next line.
I am using bootstrap 4 with Angular2.
Just give your p tag a min-width. I gave the input a max-width so it's better when your screen size is smaller. Hope this answers your question
p.d-inline {
min-width: 75px;
display: inline-block;
text-align: right;
margin-left: 30px;
}
h6 {
margin-left: 30px;
}
input {
max-width: 100px;
}
You said you are using Bootstrap.
Why not Use Bootstrap Form then?
You can find how-to HERE
Open the following snippet in Full Page to see how it works
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-lg-1 control-label">Email</label>
<div class="col-lg-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-lg-1 control-label">Password</label>
<div class="col-lg-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-2">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-3">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
As form-horizontal is not working as expected in bootstrap 4 so, you can try like this.
<div class="container">
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Full Name: </label>
<div class="col-md-9">
<input class="form-control" type="text" placeholder="First Name" formControlName="firstName">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Email: </label>
<div class="col-md-9">
<input class="form-control" type="email" placeholder="Email" formControlName="email">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)
When the user has a wide screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
When the user has a smaller screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>
The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.
Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.
And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.
Option #1 : fixed columns
You can use a structure mixing col-xs-12, col-sm-6 and col-lg-3 to get 1, 2 or 4 columns. Inside your form-group, remember to fix label/input sizes with col-xs-4 and col-xs-8 :
<div class="container">
<form class="form form-inline" role="form">
<legend>Form legend</legend>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="col-xs-4">Field A</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="col-xs-4">Field B</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="col-xs-4">Field C</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</form>
</div>
You still need a few CSS :
// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}
// vertical align label
.form-inline label {
line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
width: 100%;
}
// Reset margin-bottom for our multiline form
#media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
}
You can add as many inputs as you want.
Bootply
Option #2 : fluid columns
To be able to not care of the number of fields per row, you can use this structure :
<div class="container">
<form class="form form-inline form-multiline" role="form">
<legend>Form legend</legend>
<div class="form-group">
<label for="InputFieldA">Field A</label>
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
<div class="form-group">
<label for="InputFieldB">Very Long Label For Field B</label>
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
<div class="form-group">
<label for="InputFieldC">F. C</label>
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
<div class="form-group">
<label for="InputFieldD">Very Long Label For Field D</label>
<input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
</div>
<div class="form-group">
<label for="InputFieldE">Very Long Label For Field E</label>
<input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
</div>
<div class="form-group">
<label for="InputFieldF">Field F</label>
<input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Button</button>
</div>
</form>
</div>
And a few CSS lines to fix margins :
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
Bootply
The same as option #1 from #zessx, but without overriding CSS. This one also aligns labels to the right to increase space between label-control pairs. Class "media" is there to add top margin without creating a custom class, but in general case it is better to have a custom one.
<div class="form-horizontal">
<legend>Form legend</legend>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</div>
Bootply
I would propose something completely different, wrap the labels and fields inside inline divs:
<div style="display:inline-block">
Label:input
</div>
This way, when they are about to break, they break in pairs, labels+inputs.
Alright I played with the grid system and this is as close as I could get to your setup.
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
This has two fields only. You might want to change the col classes to fit your layout.
jsFiddle
You can try below
Working here- http://www.bootply.com/117807
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
</div>
</div>
The simplest way is to put both label and text input in cols div. Hope this will save time for all others :)
<div class="col-md-3 text-right">
<label>City</label>
</div>
<div class="col-md-3 text-right">
<asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>