i'm having troubles centering a card (or container). I'm able to center it horizontally but not vertically. I alredy tested some code found on stack and other webpages but it does not seems to work.
My current code is:
<div class="container col-md-3 py-5">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Login</h3>
</div>
<div class="card-body">
<form class="form">
<div class="form-group">
<label for="username">Username:</label> <input class="form-control" type="text" name="username" id="username" autofocus required >
</div>
<div class="form-group">
<label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required>
</div>
</form>
</div>
</div>
</div>
[TESTED - working] Use flexbox.
https://www.bootply.com/AaDqw82aFL#
Wrap your code with additional div with class containing following two style rules.
display: flex;
align-items: center;
justify-content: center;
align-conten:center;
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
It should work fine.
Full code with inline style (I recommend you to use class instead of style attribute):
<div style=" display: flex; align-items: center; justify-content: center; align-conten:center; min-height: 100%; /* Fallback for browsers do NOT support vh unit */min-height: 100vh;">
<div class="container col-md-3 py-5" style="height: 200px; width:200px">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Login</h3>
</div>
<div class="card-body">
<form class="form">
<div class="form-group">
<label for="username">Username:</label> <input class="form-control" type="text" name="username" id="username" autofocus="" required="">
</div>
<div class="form-group">
<label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required="">
</div>
</form>
</div>
</div>
</div>
</div>
I believe below code should work for you, just try and check
.container.py-5{
position: absolute; //or relative
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Add d-flex align-items-center bootstrap4 classes on your body and put its height on 100vh;
body{
height:100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body class="d-flex align-items-center">
<div class="container col-md-3 py-5">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Login</h3>
</div>
<div class="card-body">
<form class="form">
<div class="form-group">
<label for="username">Username:</label> <input class="form-control" type="text" name="username" id="username" autofocus required >
</div>
<div class="form-group">
<label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required>
</div>
</form>
</div>
</div>
</div>
</body>
Related
Trying to override the default width of a datetime-local input element but CSS changes are not getting applied to the element.
The datetime-local element displays over the sibling element that sits to its right side.
How do you style datetime-local elements?
HTML:
<div class="row">
<div class="form-group col-4">
<label>System User Account </label>
<div>
<input
type="text"
class="form-control input-lg"
name="sysuseracct"
id="sysuseracct"
placeholder="Account with issue or request"
>
</div>
</div>
<div class="form-group col-4">
<label>Date Issue Began</label>
<div>
<input
type="datetime-local"
id="dateissuebegan"
name="dateissuebegan"
style="height: 2.3rem; font-size: 1em;"
>
</div>
</div>
<div class="form-group col-4">
<label>External Trouble Ticket</label>
<div>
<input
type="text"
class="form-control input-lg"
name="externaltt"
id="externaltt"
style="padding: 1em;"
placeholder="If Applicable"
>
</div>
</div>
</div>
CSS:
input { display: inline-block;}
#dateissuebegan {
box-sizing: border-box;
width: 50px;
}
Check this code snippet out.
You can adjust the width to your taste.
input { display: inline-block;}
input[type="datetime-local"] {
width: 160px;
/* More styles here */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="form-group col-4">
<label>System User Account </label>
<div>
<input type="text" class="form-control input-lg" name="sysuseracct" id="sysuseracct" placeholder="Account with issue or request">
</div>
</div>
<div class="form-group col-4">
<label>Date Issue Began</label>
<div>
<!-- <input type="datetime-local" id="dateissuebegan" name="dateissuebegan" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00"> -->
<input type="datetime-local" id="dateissuebegan" name="dateissuebegan" style="height: 2.3rem; font-size: 1em;">
</div>
</div>
<div class="form-group col-4">
<label>External Trouble Ticket</label>
<div>
<input type="text" class="form-control input-lg" name="externaltt" id="externaltt" style="padding: 1em;" placeholder="If Applicable">
</div>
</div>
</div>
I have a bootstraap form where two field I have added the class .d-inline-block so that it comes next to each other and I have another field where I have not added the class so that It comes below of the two field.
I want this to be in the center of the div which I am not able to do it. Only the first two fields are coming to center but not the last div.
Can someone point out the mistake?
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/97avbgsq/
Add a class to the third DIV and give that display: inline-block;:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.x {
display: inline-block;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message x">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/tyuxpzk9/1/
While you're free to create your own custom CSS classes to control form field sizes and position, I would like to suggest using the built in grid system column classes to control the size and position of the input fields.
Bootstrap 4 Grid System
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<form>
<div class="row">
<div class="form-group col-sm-4 offset-sm-2">
<input type="text" class="form-control" id="nameInput">
<label class="d-block text-center" for="nameInput">Name</label>
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
<div class="row">
<div class="form-group col-sm-8 offset-sm-2">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
</form>
Using bootstrap 4, you can use the helper classes .d-flex .flex-wrap .justify-content-center on the parent.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass d-flex flex-wrap justify-content-center">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
But if you want to use your original code, to horizontally center a block element with a width, use margin-left: auto; margin-right: auto or margin: auto for short if that works for you. You can also do that using the .mx-auto bootstrap helper class.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message mx-auto">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps.
HTML:
<section id="cover">
<div id="cover-caption">
<div id="container">
<div class="col-sm-10 col-sm offset-1">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
↓
</div>
</div>
</div>
</section>
CSS:
html,
body{
height: 100%;
}
#cover {
background: #222 url('../img/stars.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
You need to use the various Bootstrap 4 centering methods...
Use text-center for inline elements.
Use justify-content-center for flexbox elements (ie; form-inline)
https://codeply.com/go/Am5LvvjTxC
Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container...
<section id="cover">
<div id="cover-caption">
<div id="container" class="container">
<div class="row">
<div class="col-sm-10 offset-sm-1 text-center">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
↓
</div>
</div>
</div>
</div>
</section>
<div class="d-flex justify-content-center align-items-center container ">
<div class="row ">
<form action="">
<div class="form-group">
<label for="inputUserName" class="control-label">Enter UserName</label>
<input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
<small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Enter Password</label>
<input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
</div>
</form>
</div>
</div>
All above answers perfectly gives the solution to center the form using Bootstrap 4. However, if someone wants to use out of the box Bootstrap 4 css classes without help of any additional styles and also not wanting to use flex, we can do like this.
A sample form
HTML
<div class="container-fluid h-100 bg-light text-dark">
<div class="row justify-content-center align-items-center">
<h1>Form</h1>
</div>
<hr/>
<div class="row justify-content-center align-items-center h-100">
<div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
<form action="">
<div class="form-group">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" />
</div>
<div class="form-group text-center">
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
</div>
<div class="form-group">
<div class="container">
<div class="row">
<div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div>
<div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Link to CodePen
https://codepen.io/anjanasilva/pen/WgLaGZ
I hope this helps someone. Thank you.
I am aware this is very basic but I have been trying so many ways of removing the white space on the right side of my page yet still it's been a little problem for me as a learner. The sign_in and paratext are inline as shown but when I used set the margins and paddings to 0 to remove the white space from the right side of my page, the sign in (which is the login form) moves below the paratext instead of staying inline.
Here you go. Hope this helps you.
body {
margin: 0;
padding: 0;
}
.sign_in {
display: inline-block;
width: 55%;
font-size: 3vw;
margin-left: 30px;
}
.paratext {
display: inline-block;
font-size: 3vw;
width: 35%;
color: #008B8B;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure. </p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1 style="color:#008B8B; font-weight: 900; font-size: 40px;" > <b>Sign In </b></h1><br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me" >
<label >Remember Me </label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<p class="text-right"><span class="forgot-password"><a style=" color:#008B8B;" href="#">Forgot password?</a></span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<button class="button" type="submit" style="font-weight: 900; background-color:#008B8B;" ><span>Login </span></button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<p class="text-right">
<span><a style="color:#008B8B;" href="#">Already a member?</a></span></p>
</div>
</div>
</div>
</form>
</div>
</body>
<html>
I have refactored your code by removing irrelevant row classes and inline styles. You also specified sign_in{width:70%}, but haven't specified what is 100%, so I added body{width:100%}. In addition to that, I commented out certain paddings and margins you can see that in the example below.
body{width: 100%;}
.paratext, h1, a{color:#008B8B;}
h1{
font-weight: 900;
font-size: 40px;
}
.form-group button{
font-weight: 900;
background-color:#008B8B;
}
.sign_in {
width: 70%;
/*margin-right: -30%;*/
}
.paratext {
display: inline-block;
/*padding-top: 250px;*/
font-size: 16px;
word-wrap: break-word;
/*width: 600px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure.</p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1>Sign In</h1>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me">
<label>Remember Me</label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right forgot-password">Forgot password?</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="button" type="submit">Login</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right">Already a member?</p>
</div>
</div>
</div>
</form>
</div>
</body>
Try this code example in your project and see if the problem remains. If you still have a problem then you need to update you question with the rest of the codebase you have.
With the below code, the summary and it's text box are aligned inline.But the text box for description is appearing below the label 'description'. How can I make it align inline? Please help me in resolving this.
.left {
width: 30%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float: left;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
Try like this: Demo
If you need multi line text box, use textarea instead of input type text
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
<div class="col-md-6 col-sm-12">
<input type="text" class="form-control" name="Summary" size="50">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
<div class="col-md-6 col-sm-12">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
Edit:
As you mentioned, its not form-control class, its form-control-label.. You can get more info here
Updated Demo: To change the height, try chnaging the value of rows="8" for <textarea>
If you're using Bootstrap (as the classes on your code suggest). I would recommend using their form layout options. Sounds like you want a Horizontal Form:
Docs
For Example:
<form class="form-horizontal">
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">Summary</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="summary" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" style="height:100px;width:400px" />
</div>
</div>
</form>
<input class="right" type="text" name="Description" style="height:100px;width:400px;">
Remove width from input of description, also please change to textarea, instead of input.
You have already used bootstrap framework.so that there is no need to write extra css for inline forms. follow the following code
<div class="form-group">
<label class="col-lg-3 control-label ">City</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
</div>
</div>
</div>
</div>
</div>
Like this?
https://jsfiddle.net/d6tscd18/
.left {
width: 30%;
display: inline-block;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
display: inline-block;
}
try this:
<html>
<head>
<title>sample</title>
<style type="text/css">
.left {
width: 30%;
display: inline-block;
text-align: right
}
.right {
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font- size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
If you have trouble getting it in place you can also force a table layout without using tables:
.login-form {
display: table;
}
.login-form>div {
display: table-row;
}
.cell {
display:table-cell;
vertical-align: top;
}
...
Adding a div around the inputs and a "cell" class (and shouldn't it be a textarea?):
...
<form action="post" class="login-form">
<div>
<label class="left cell">Summary:</label>
<div class="cell">
<input class="right" type="text" name="Summary" size="50">
</div>
</div>
<div>
<label class="left cell">Description:</label>
<div class="cell">
<textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
</div>
</div>
</form>
...
Check it here
Remove the style attribute from the description input type, it will then appear as the summary input box.
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description">