I'd like a fixed width input-group-prepend that is larger than the content inside it, but I'd like the content to centered horizontally.
I've tried text-center and align-items-center, but it always seems to be left aligned.
How do I get the content to be in the middle of the input-group-text?
.input-group-text {
min-width: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
</div>
</div>
You need justify-content-center (https://getbootstrap.com/docs/4.2/utilities/flex/#justify-content) because the input-group-text is defined as a flexbox container with a row direction
.input-group-text {
min-width: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text justify-content-center">$</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
</div>
</div>
Related
I have a form, in that n number of form fields available. only For 2 inputs, I want to share a common button without affecting remaining layout, but it's not aligned properly as common.
Here is what I tried. First two input fields should have common button
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
I assume that you want to center the button for two input elements. Is that so you can try display:table for the .row this might have fix your issue.
.row {
display: table;
width: 100%;
}
.row .col{
display: table-cell;
}
.col1 {
width: 40%;
}
.col2 {
position: relative;
vertical-align: top;
}
.col2 button {
position: absolute;
top: 30px;
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" >
</head>
<body>
<div class="container">
<div class="row">
<div class="col col1">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col col2">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
</div>
</body>
</html>
However if you want to increase the size for the button you can always add padding or set height for the button.
Codepen link
Pure bootstrap 4 impementation wll be the one below.
You have to group the two inputs into one single .col and the button to an another .col with flex-grow-0 flex-shrink-1 mb-3 d-flex to shrink the container to the minimum of button width and to have sufficient margin at bottom.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
</div>
col-auto in bootrap 4.0.0 does not have padding. And there may be some other bugs too. You should better use the latest version of bootstrap 4. it is version 4.6.0
Use two .row. The first .row for the first two inputs and the button and the second .row for the rest of the inputs.
Use .col-auto and .d-flex for the column that contains the button to make it take as much space at it need and full height
Use .mb-3 for the button since the .form-group has that much margin-bottom.
You may use .btn-outline-secondary instead of .btn-secondary
<div class="col-auto d-flex ">
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col-auto d-flex">
<button type="submit" class="btn btn-outline-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
🎁
Doing so you avoid multiple nesting of .row and .col.
here is another approach, also rethinking the structure with only BS class for the styling
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col ">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<div class="form-group row pl-3">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
I am using bootstrap 4 input-group as shown below. I have changed the border-width to 10px. It seems like the border width in the middle is doubling up:
Is it possible to make the middle border as wide as the side borders?
.input-text {
border-width: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
<div class="row justify-content-center">
<div class="col-lg-9 col-12">
<div class="input-group">
<input type="text" class="form-control input-text">
<input type="text" class="form-control input-text">
<div class="input-group-append">
<button type="submit" class="btn">Go</button>
</div>
</div>
</div>
</div>
</div>
Override the left/right border for the first and second input
.input-text {
border-width: 10px !important;
}
.input-text.first {
border-right-width: 5px !important;
}
.input-text.second {
border-left-width: 5px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
<div class="row justify-content-center">
<div class="col-lg-9 col-12">
<div class="input-group">
<input type="text" class="form-control input-text first">
<input type="text" class="form-control input-text second">
<div class="input-group-append">
<button type="submit" class="btn">Go</button>
</div>
</div>
</div>
</div>
</div>
When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
I have a page where only form exists and I want form to be placed in the center of the screen.
<div class="container">
<div class="row justify-content-center align-items-center">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
The justify-content-center aligns the form horizontally, but I can't figure out how to align it vertically. I have tried to use align-items-center and align-self-center, but it doesn't work.
What am I missing?
DEMO
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex).
Centering examples in Bootstrap 5
Vertical center (don't forget the parent must have a defined height!):
my-auto for centering inside flex (.d-flex) elements
my-auto can be used to center columns (.col-) inside row
align-items-center to center columns (col-*) inside row
Horizontal center:
text-center to center display:inline elements & column content
mx-auto for centering inside flex elements
mx-auto can be used to center columns (.col-) inside row
justify-content-center to center columns (col-*) inside row
Bootstrap 4.3+ (Update 2019)
There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...
Vertical center:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://codeply.com/go/raCutAGHre
the height of the container with the item(s) to center should be 100%
(or whatever the desired height is relative to the centered item)
Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.
Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.
Horizontal center:
text-center to center display:inline elements & column content
mx-auto for centering inside flex elements
offset-* or mx-auto can be used to center columns (.col-)
justify-content-center to center columns (col-*) inside row
Vertical Align Center in Bootstrap
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen
This work for me:
<section class="h-100">
<header class="container h-100">
<div class="d-flex align-items-center justify-content-center h-100">
<div class="d-flex flex-column">
<h1 class="text align-self-center p-2">item 1</h1>
<h4 class="text align-self-center p-2">item 2</h4>
<button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
</div>
</div>
</header>
</section>
flexbox can help you. info here
<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
<div class="p-2">
1
</div>
<div class="p-2">
2
</div>
</div>
Bootstrap has text-center to center a text. For example
<div class="container text-center">
You change the following
<div class="row justify-content-center align-items-center">
to the following
<div class="row text-center">
You need something to center your form into. But because you didn't specify a height for your html and body, it would just wrap content - and not the viewport. In other words, there was no room where to center the item in.
html, body {
height: 100%;
}
.container, .row.justify-content-center.align-items-center {
height: 100%;
min-height: 100%;
}
None has worked for me. But his one did.
Since the Bootstrap 4 .row class is now display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
I learned about it from https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff
This is working in IE 11 with Bootstrap 4.3. While the other answers were not working in IE11 in my case.
<div class="row mx-auto justify-content-center align-items-center flex-column ">
<div class="col-6">Something </div>
</div>
Try the code given below while using v4 or v5.
<div class="d-flex align-items-center justify-content-center" style="height:100vh;">
Vertically and Horizontally Aligned :)
</div>
...OR... You can use these classes if using v5.
<div class="position-absolute top-50 start-50 translate-middle">
Vertically and Horizontally Aligned :)
</div>
Do this, and that's it :)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 border border-info">
<div class="d-flex justify-content-center align-items-center" style="height: 100px">
Transfer
Replenish
Account Details
</div>
</div>
been going thru a lot of posts on getting a form centered in the page and none of them worked. code below is from a react component using bootstrap 4.1. height should be 100vh and not 100%
<div className="container">
<div className="d-flex justify-content-center align-items-center" style={height}>
<form>
<div className="form-group">
<input className="form-control form-control-lg" placeholder="Email" type="email"/>
</div>
<div className="form-group">
<input className="form-control form-control-lg" placeholder="Password" type="password"/>
</div>
<div className="form-group">
<button className="btn btn-info btn-lg btn-block">Sign In</button>
</div>
</form>
</div>
</div>
where height in style is:
const height = {
height: '100vh'
}
From bootstrap v5.0 just:
<div class="position-absolute top-50 start-50 translate-middle">
centred
</div>
Bootstrap way
HTML
<div class="row top-row">
<div class="col center-text">
<H1>Center Text Horizantally and vertically</H1>
</div>
</div>
Custom CSS
.top-row{
height: 300px; //It's important to set height
}
.center-text{
display: flex;
align-items: center;
justify-content: center;
}
I ended up here because I was having an issue with Bootstrap 4 grid system and an Angular *ngFor loop. I fixed it by applying a col justify-content-center class to the div implementing the ngFor:
<div class="row" style="border:1px solid red;">
<div class="col d-flex justify-content-center">
<button mat-raised-button>text</button>
</div>
<div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
<button mat-raised-button>text</button>
</div>
</div>
which gives the result:
I am required to show form vertically center inside container-fluid so I developed my own code for the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
.container-fluid
{
display: table-cell;
height: 100vh;
width: 100vw !important;
vertical-align: middle;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-8 offset-2">
<div class="card shadow">
<div class="card-header bg-danger text-white">
<h2>Login</h2>
</div>
<div class="card-body">
<form action="">
<div class="form-group row">
<label for="txtemail" class="col-form-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="txtemail" id="txtemail" class="form-control" required />
</div>
</div>
<div class="form-group row">
<label for="txtpassword" class="col-form-label col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" name="txtpassword" id="txtpassword" class="form-control"
required />
</div>
</div>
<div class="form-group">
<button class="btn btn-danger btn-block">Login</button>
<button class="btn btn-warning btn-block">clear all</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Use This Code In CSS :
.container {
width: 600px;
height: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
From the doc (bootsrap 4):
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
bootstrap 5
body {
display: flex;
align-items: center;
}
https://getbootstrap.com/docs/5.1/examples/sign-in/
I use form-groups in a well element, but
the bottom visible margin is more than the top, and this is not looking good. I want it to be centrelised vertically.
<div class="well">
<div class="form-horizontal">
<div class="form-group">
....
<div class="form-group">
....
</div>
</div>
Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
The .form-group's last child has a margin-bottom, which can be removed by setting this:
.form-horizontal .form-group:last-child {margin-bottom: 0;}
.form-horizontal .form-group:last-child {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
Preview