This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
How to vertically align in Bootstrap 4?
(1 answer)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 5 years ago.
I can't align the following content both horizontally and vertically.
Can someone tell me the best approach for this ?
<div class="container">
<div class="row">
<div class="col-md-4">
<img width="300" src="../assets/medlogo.png">
<h1 class="text-center login-title">Acessar o programa</h1>
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
</form>
</div>
</div>
</div>
</div>
Thank you
Bootstrap4 is now using css Flexbox so you can use the same. Flexbox has vertical and horizontal alignment support out of the box.
Basically, a flexbox container can have flex-direction as row (the default value) or column. With the former, property align-items can be used to vertical align its children and justify-content for horizontal alignment. While with the latter, align-items is used for horizontal align and justify-content for vertical alignment.
You can read more about Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try this
<div class=" d-flex justify-content-center align-content-center">
<img width="300" src="../assets/medlogo.png">
<h1 class="text-center login-title">Acessar o programa</h1>
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
</form>
</div>
</div>
I removed the col-md-4 and replaced it with d-flex justify-content-center align-content-center. This is bootstrap 4 beta utilities for flexbox. Though you can also do in-line style
More info
http://getbootstrap.com/docs/4.0/utilities/flex/
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 3 years ago.
In a Bootstrap 4 Horizontal form, how can a div with text be centered vertically?
Here's an example taken from https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form
but instead of a form input have a plain text div, eg "Password goes here" text:
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10 align-middle">
Password goes here
</div>
</div>
</form>
I tried classes align-middle, d-inline-block, but no effect.
use align-self-center to align vertically
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10 align-self-center ">
Password goes here
</div>
</div>
</form>
Ref:https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
Demo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10 align-self-center ">
Password goes here
</div>
</div>
</form>
If you will try to vertically center align text inside a div using the CSS rule vertical-align: middle; you won't succeed. Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px.
.menu{
height: 20px;
line-height: 20px;
}
I have a bootstrap 4 form group with a simple text input. I am using it within a kendo dialog, however the dialog isn't automatically expanding so that the label's text and the input are all on a single line. I have played around with the CSS but can't figure out what is causing the issue. See the below dojo link.
https://dojo.telerik.com/EQuwayex
You can change your "test" div to following. I set a fixed with for the label and then reduced the textbox div to col-md-6.
<div id="test">
<div class="container">
<div class="form-group row">
<label style="width:100px" class="col-form-label">Display Text</label>
<div class="col-md-6">
<input type="text" class="displayText form-control" />
</div>
</div>
</div>
</div>
If you want to control the width of the dialog you can add a width to the Dev element and then change the width of the textbox div element.
<div id="test" style="width:700px">
<div class="container">
<div class="form-group row">
<label style="width:100px" class="col-form-label">Display Text</label>
<div class="col-md-9">
<input type="text" class="displayText form-control" />
</div>
</div>
</div>
</div>
I'm making a very simple form for an Electron app I am making to experiment with the software, however, I am stuck on the most basic of things... the interface design.
I'm using Bootstrap 4 for my interface and am trying to centre the form vertically, however, I am getting mix results using various suggestions made on other's questions on the same topic. They either do not work or squeeze all my content onto a single line and generally mess the current layout up.
Any suggestions on how I can vertically align the items in the container below?
<!-- Search Field -->
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-auto">
<h1 class="text-white">Shorten M' URL!</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
Are you looking for this?:
.vh-100 {
height: 100vh;
}
<div class="container vh-100 bg-dark">
<div class="row vh-100 justify-content-center align-items-center">
<div class="col-6 text-center">
<h1 class="text-white">Shorten M' URL!</h1>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Basically you have to have the container to fit the screen height. Once there, you can align it's items vertically.
This question already has answers here:
Twitter Bootstrap 3, vertically center content [duplicate]
(2 answers)
Closed 5 years ago.
I have a row in Bootstrap. Within this row, I have three columns. The first column has an input field. The second column has some text. The third column has another input field. You can see this layout in this Bootply, which includes this code:
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-5">
<div class="form-group">
<label for="Minimum">Minimum</label>
<div class="input-group">
<input class="form-control" data-val="true" id="Minimum" name="Minimum" type="text" value="0">
</div>
</div>
</div>
<div class="col-xs-2 text-center"><p>Up To</p></div>
<div class="col-xs-5">
<div class="form-group">
<label for="Maximum">Maximum</label>
<div class="input-group">
<input class="form-control" data-val="true" id="Maximum" name="Maximum" type="text" value="100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm am trying to figure out how to vertically align the "Up To" text in the middle column. I want to vertically align the text against the bottom of the row. How can I do that?
The line height for the table rows is 34px, so setting your line height for that element to 68px would vertically align it.
You can add a class on your row and set display: table;
Then you add another class on your 3 divs and set display: table-cell;and float: inherit; and a last class on your element you want to align vertically and set vertical-align: middle;
Updated Bootply
I have two input boxes that I am trying to get side by side on the row but I'd like there still to be a gap between the boxes but flush to the sides of the container.
Is there a way using just Bootstrap to do this? The container is a replication of a mobile device.
<div class="group col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="row">
<input type="text" name="first-name" ng-model="user.firstname" />
</div>
</div>
<div class="col-sm-6">
<div class="row">
<input type="text" name="last-name" ng-model="user.surname" />
</div>
</div>
</div>
</div>
plunkr example
Bootstrap has a few different grid classes. col-<size>-<num> where <size> can be xs, sm, md, or lg, and <num> can be an integer between (and including) 1-12.
For mobile devices, you'll want to use xs. If you don't specify any of the larger sizes, then they'll use the same widths as the smaller one. If you change col-sm-12 to col-xs-12 and col-sm-6 to col-xs-6 I think you'll get the result you're looking for.
It also helps your inputs look more consistent and more easily themed if you give them the form-control class.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="first-name" />
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="last-name" />
</div>
</div>
</div>
</div>
I'm not familiar with Bootstrap, but one way to achieve it would be to add this to your CSS:
.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
display: inline-block;
}
I am not sure if I understand your question correctly. You need a space between the text box side by side right? if so try this code. You could also use col-xs-offset-1 for space between grid. This will allow you to push 1 grid away. example http://www.bootply.com/U6vlrIktq2
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control"><br>
</div>
<!-- for more spacing between boxes-->
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<div class="col-xs-5 col-xs-offset-1">
<input type="text" class="form-control">
</div>