Bootstrap Center Vertical and Horizontal Alignment - css

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/

Related

How to center items inside a card [duplicate]

This question already has answers here:
How can I center elements horizontally or vertically with Twitter Bootstrap?
(12 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas...
var currentAuthor = "";
var currentQuote = "";
function randomQuote() {
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function( response ) {
$("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
$("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
currentAuthor = response.quoteAuthor;
currentQuote = response.quoteText
}
});
}
function openURL(url){
window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function tweetQuote(){
openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}
$(document).ready(function () {
randomQuote();
$("#get-another-quote-button").click(function(){
randomQuote();
});
$('#tweet').on('click', function() {
tweetQuote();
});
});
html, body {
background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
background-color: #17234E;
margin-bottom: 0;
min-height: 30%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.btn-new-quote {
color: #0C0C0D;
background-color: transparent;
border-color: #414147;
}
.btn-new-quote:hover {
color: #0C0C0D;
background-color: #9A989E;
border-color: #0C0C0D;
}
#tweet {
color: RGB(100, 100, 100);
}
#tweet:hover {
color: RGB(50, 50, 50);
}
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
opacity: .85;
border-color: RGB(50, 50, 50);
padding-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center align-self-center">
<div class="col-sm-6">
<div class="jumbotron vertical-center text-center">
<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
<p id="quote-author" class="lead"><em></em></p>
<hr class="my-2">
<div class="row align-items-center justify-content-between">
<div class="col-sm-1-4 text-left">
<a id="tweet" href="#">
<h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
</a>
</div>
<div class="col-sm-1-4 text-right">
<button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button>
</div>
</div>
</div>
</div>
</div>
</div>
Important! Vertical center is relative to the height of the parent
If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering...
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used on the flexbox parent (row or d-flex).
use align-items-center on a flexbox row parent (row or d-flex)
use justify-content-center on a flexbox column parent (d-flex flex-column)
use my-auto on a flexbox parent
Vertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row is now display:flex you can simply use align-self-center 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>
or, use align-items-center on the entire .row to vertically center align all col-* in the row...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
you can vertically align your container by making the parent container flex and adding align-items:center:
body {
display:flex;
align-items:center;
}
Updated Pen
Using bootstrap version 5 or later, use the code below to center the content horizontally and vertically.
<div class="vh-100 d-flex justify-content-center align-items-center">
<h1>Centered horizontally and vertically!</h1>
</div>
Following bootstrap 4 classes helped me solve this
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>
Because none of the above worked for me, I am adding another answer.
Goal: To vertically and horizontally align a div on a page using bootstrap 4 flexbox classes.
Step 1: Set your outermost div to a height of 100vh. This sets the height to 100% of the Veiwport Height. If you don't do this, nothing else will work. Setting it to a height of 100% is only relative to the parent, so if the parent is not the full height of the viewport, nothing will work. In the example below, I set the Body to 100vh.
Step 2: Set the container div to be the flexbox container with the d-flex class.
Step 3: Center div horizontally with the justify-content-center class.
Step 4: Center div vertically with the align-items-center
Step 5: Run page, view your vertically and horizontally centered div.
Note that there is no special class that needs to be set on the centered div itself (the child div)
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>
I did it this way with Bootstrap 4.3.1:
<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
I'm in the middle
</div>
</div>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-md-6">
<img src="/assets/images/ebook2.png" alt="" class="img-fluid">
</div>
<div class="col-md-6 my-auto">
<h3>Heading</h3>
<p>Some text.</p>
</div>
</div>
This line is where the magic happens <div class="col-md-6 my-auto">, the my-auto will center the content of the column. This works great with situations like the code sample above where you might have a variable sized image and need to have the text in the column to the right line up with it.
I've tried all the answers herefrom, but found out here is the difference between h-100 and vh-100
Here is my solution:
<div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Today’s Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>
In Bootstrap 4 (beta), use align-middle. Refer to Bootstrap 4 Documentation on Vertical alignment:
Change the alignment of elements with the vertical-alignment
utilities. Please note that vertical-align only affects inline,
inline-block, inline-table, and table cell elements.
Choose from .align-baseline, .align-top, .align-middle, .align-bottom,
.align-text-bottom, and .align-text-top as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>
Vertical align Using this bootstrap 4 classes:
Method1:
parent: d-table
AND
child: d-table-cell & align-middle & text-center
eg:
<div class="tab-icon-holder d-table bg-light">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
and if you want parent be circle:
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
which two custom css classes are as follow:
.tab-icon-holder {
width: 3.5rem;
height: 3.5rem;
}
.rounded-circle {
border-radius: 50% !important
}
Final usage can be like for example:
<div class="col-md-5 mx-auto text-center">
<div class="d-flex justify-content-around">
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Lg.png" height="30rem">
</div>
</div>
...
</div>
</div>
Method2:
You can use following:
parent: h-100 d-table mx-auto
AND
child: d-table-cell align-middle
Method3:
You can use following:
parent: d-flext align-items-center
also if you want content be center horisontally too:
parent: d-flext align-items-center justify-content-center
bootstrap 5 and blazor web assembly:
<div class="d-flex align-items-center justify-content-center min" style="height: 50vh">
<button class="btn btn-outline-success mx-2">Register</button>
<button class="btn btn-outline-primary mx-2" style="width:123.44px">Login</button></div>
/*You have to add height 100vh */
Center
use .my-auto (bootsrap4) css class on yor div
Place your content within a flexbox container that is 100% high i.e h-100. Then justify the content centrally by using justify-content-center class.
<section class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, Malawi!</h1>
</div>
</section>
in Bootstrap 5 we can do it easily. Below is an example to align card. We just have to set the card width, then the rest setting are using bootstrap 5 class.
<div class="container d-flex vh-100">
<div class="row mx-auto">
<div class="col align-self-center p-4">
<div class="card rounded-3 shadow-sm p-3" style="width:400px">
<div class="card-body">
<h1>I'am centered vertically and horizontally</h1>
</div>
</div>
</div>
</div>
</div>
For all Bootstrap versions 2, 3, 4 and 5 with only two custom classes suitable with any height and width.
.d_tbl{
display:table;
width:100%;
height:200px;
}
.d_tblCel{
vertical-align: middle;
display: table-cell;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="d_tbl" style="background-color:antiquewhite">
<div class="d_tblCel">
<h3>Centered horizontally and vertically</h3>
<p>for all bootstrap versions with only two custom classes</p>
</div>
</div>
</div>
</body>
</html>
In Bootstrap 4.1.3:
This worked for me when I was trying to center a bootstrap badge inside of a container > row > column next to a h1 title.
What did work was some simple css:
.my-valign-center {
vertical-align: 50%;
}
or
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

Align center in Bootstrap 4 input-group-prepend

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>

How do I align Bootstrap inline form labels that don't have an input with those that do?

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>

Bootstrap buttons and columns expanding the entire width of a div tag

I am trying to build a bootstrap calculator using the grind system provided by Bootstrap. I have two rows using the class col-md-4 with each row comprising of 4 buttons. I would expect to see the buttons expand the entire width of the div tag. When I put a background color to the div tag the color fills the entire div tag, as I would except. I created a codepen to illustrate my problem.
<div class="container">
<div class="cal-body">
<div class="header">
</div>
<div class="lcd">
</div>
<div class="row">
<div class="col-md-4">
<button>7</button>
<button>8</button>
<button>9</button>
<button>%</button>
</div>
</div>
<div class="row">
<div class="col-md-4" style="margin-bottom: 20px;">
<button>4</button>
<button>5</button>
<button>6</button>
<button>X</button>
</div>
</div>
</div>
</div>
</div>
In other words, I would like my buttons to take of the full length of the column row. As of now, it only takes 1/4 of the column space. I am trying to replicate the look of a calculator.
My code pen:http://codepen.io/louis345/pen/KNoypX
Any help will be greatly appreciated.
Just change the col-md-4 to col-md-12 if you want to span the whole row.
You can also add class text-center into your columns to make buttons centered position.
Sample:
<div class="col-md-12 text-center">
</div
Check this to see if that's what you are looking for
The idea is to wrap each button on a different column
<div class="col col-sm-3">
<button>7</button>
</div>
#claudios your answer is right [ use class (text-center) ] and I am just implement in this snippet.
.line{
box-shadow:inset 0px 0px 2px #ccc;
padding-top: 10px;
padding-bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<br>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center line">
<button class="btn btn-success">Submit</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</div>
Each row has 12 columns, you're setting a div to use 4 columns and it will make the div to use 1/3 of the size.
Also, col-md must be used to sizes >= 768px. You should use col-xs because you're limiting the size of cal-body.
I made it, based on your codepen: http://codepen.io/anon/pen/BQMeXQ
Take a look here, 2 rows, each one has 4 divs, each using 3 columns.
<style>
.button-group {
width: 100%;
margin-left: 15px;
}
.button-line {
width: 100%;
}
.button-col {
padding-left: 0px;
padding-right: 0px;
}
.button-col button{
width: 100%;
}
</style>
<div class="button-group">
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>7</button>
</div>
<div class="col-xs-3 button-col">
<button>8</button>
</div>
<div class="col-xs-3 button-col">
<button>9</button>
</div>
<div class="col-xs-3 button-col">
<button>%</button>
</div>
</div>
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>4</button>
</div>
<div class="col-xs-3 button-col">
<button>5</button>
</div>
<div class="col-xs-3 button-col">
<button>6</button>
</div>
<div class="col-xs-3 button-col">
<button>x</button>
</div>
</div>
</div>

Centered text and left aligned button in panel heading using Twitter Bootstrap

I am trying to center some text in the heading of a panel, along with a left-aligned button on the same row. The approach I'm currently taking works sort of OK for small widths, but as soon as the window gets to .col-sm territory (>750px) the text is no longer centered and instead seems to align right. Plus I'm not actually sure if this approach of trying to overlap a col-xs-1 and col-md-12 is really centering the text even for small window widths.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="container" style="padding:0;">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-12" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is a JSFiddle.
stdout, Hi there. You can actually have the Heading in the center if you like.
I mean actually centered in the full width. Your example is offset by 1 col.
I do it without that extra col offset and the button still to the left.
Have a look at this example in my Fiddle to see how the Header text is actually centered in the whole div.
It has a lot let cols/row etc.
I left one of the other examples above so you can see the difference.
Here is the CSS used for this example.
<style>
.align-left{
float:left !important;
}
.center-text-vert{
line-height:30px; /*height of the button*/
}
.center {
text-align: center;
margin-right: 55px; /*width from the left to the far right of the button */
}
</style>
<div class="container">
<div class="row ">
<div class="col-sm-8 col-sm-offset-2 ">
<div class="panel panel-primary ">
<div class="panel-heading">
<div class="center-text-vert">
<button type="button" class="btn btn-default btn-sm align-left">Button</button>
<div class="center">
Heading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try removing the container inside you panel and use pull-left class for your button and text-center class for your heading and see if that works for you.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm pull-left">Button</button>
</div>
<div class="col-xs-11 text-center">Heading</div>
</div>
</div>
</div>
What I guess you want is for the title to be full width at xs size and only take up a portion of the screen at sm and higher. To do that, remove the empty column and instead apply an offset. Also, note there are 12 columns so offsetting by 3 (i.e. 3 columns on the left and 3 on the right) means the middle column can only be 6 wide. I've set this one to be offset by 2 as an example. I've also fixed the inner columns to add up to 12 (although you should not nest container classes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-11" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>

Resources