I am trying to make an app landing Page using bootstrap framework (Bootstrap 4 alpha). While trying to align everything in center I used text-align:center in jumbotron id. Everything except email form aligned.
Is there any way to align email form in center as well also making sure that it remains in center irrespective of web page width.
This is the code in stylesheet.
.jumbotron
{
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
}
This is the main code.
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline" id = "emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
Since your form has display: flex it spans the whole width of its parent.
Also the text-align: center in your jumbotron class won't apply to the forms element as they are flex items.
So change either of these in your form-inline class
change it to display: inline-flex (and the text-align: center will apply)
add justify-content: center; (the Flexbox property to align horizontally in row direction)
To target only the emailbar, do like this
#emailbar {
display: inline-flex;
}
or this
#emailbar {
justify-content: center;
}
Just add css part in jumbotron to get the center.
.jumbotron {
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
display: flex;/*Add this*/
flex-direction: column; /*Add this*/
align-items: center; /*Add this*/
}
Working fiddle
.jumbotron {
display: flex;/*Add this*/
flex-direction: column; /*Add this*/
align-items: center; /*Add this*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline" id="emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
There's no reason for extra CSS. Just use justify-content-center on the form...
https://www.codeply.com/go/7LjBkEtvVV
<form class="form-inline justify-content-center" id = "emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed last year.
I am having trouble vertically centering forms on this web page. I want the forms to appear at the centre of my page, and have managed to centre them horizontally but am somehow failing to centre the forms vertically as well.
.alignment_container {
/* Center child horizontally*/
display: flex;
justify-content: center;
align-items: center;
}
<div class="alignment_container">
<form action="/chat-page" class="custom-centered" method="POST">
<!-- styling the form -->
<div class="d-inline-flex p-2">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">#</span>
<input type="text" class="form-control" placeholder=" Enter a Username" name="user_name" aria-label="Username" aria-describedby="addon-wrapping" required>
</div>
</div>
<!-- end of styling the form -->
<button type="submit" class="btn btn-primary">Login!</button>
</form>
</div>
Where is my mistake?
Just add height:92vh to account for the margin on body or set to 100vh and add body{overflow:hidden;} as illustrated below:
.alignment_container {
/* Center child horizontally*/
display: flex;
justify-content: center;
align-items: center;
height:92vh;
}
<div class="alignment_container">
<form action="/chat-page" class="custom-centered" method="POST">
<!-- styling the form -->
<div class="d-inline-flex p-2">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">#</span>
<input type="text" class="form-control" placeholder=" Enter a Username" name="user_name" aria-label="Username" aria-describedby="addon-wrapping" required>
</div>
</div>
<!-- end of styling the form -->
<button type="submit" class="btn btn-primary">Login!</button>
</form>
</div>
This is reduction of a simple page I am working on. I am trying to align the image, User Name, Password and Sign in button with the E from Enter. No matter what I do they are sticking to the left of the page and not budging. Do I need to tie them to the Enter with a special align?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<img src="" width="200" height="300"/>
<div class="login-header">
<h2 id="title" align="center">
Enter
Test
</h2>
<br>
</div>
<form onsubmit="return false;" method="post">
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
There's a lot I had to change, as your layout is honestly not very well written, it seems like you are learning to write HTML from a very old guide (I'm guessing W3). You shouldn't be using things like <br> or The sooner you can start seeing styling as blocks and not the alignment of text like in a word document, the better.
but what I did here was remove the formatting from your header, left aligned it, then gave both it and your form a fixed width and automatic margin:
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#title{
margin: auto;
width:250px;
}
form{
margin: 0 auto;
width:250px;
}
<img src="" width="200" height="300"/>
<div class="login-header">
<h2 id="title">
Enter
</h2>
<br>
</div>
<form onsubmit="return false;" method="post">
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
However that isn't what I would recommend doing, you should put the header IN the form. Like so, then format the form the same as before.
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form{
margin: 0 auto;
width:250px;
}
<img src="" width="200" height="300"/>
<form onsubmit="return false;" method="post">
<h2 id="title">
Enter
</h2>
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
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>
I am making a form inside of jumbotron and for some reason I get it to look good on desktop view but when viewing it mobile it goes out of the jumbotron. I am using netbeans to do my coding. I even use #media (max-width: 620px). I tried using google but failed :(
#wrapper{
width: 500px;
height: 700px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
form{
color: black;
text-align: center;
}
div{
clear: both;
}
#off{
background-color: rgba(225,0,0,.85);
color: white;
width: 525px;
height: 140px;
font-size: 1rem;
text-align: center;
}
.formHeader{
color: #104c8b;
}
.formFooter{
background-color: rgba(0,0,255,.5);
color: white;
margin: 65px 0 0 0;
}
#media(max-width: 620px) {
#wrapper{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row text-center">
<div id="wrapper"><p>Contact Form</p>
<div class="formHeader">
</div>
<form action="test.html" method="get" name="test" id="myForm">
<label>Name</label><input name="name" type="text" /><br>
<label>Email</label><input name="email" type="text" /><br>
<label>Phone</label><input name="number" type="text" /><br>
<input type="submit" value="Send"/>
</form>
<div class="formFooter">
</div>
</div>
</div>
</div>
</section>
Given that you're using Bootstrap as a framework it seems a shame not to make use of all of well... the framework. With some restructuring of your HTML (to make use of Bootstrap's responsive classes and form controls) you can easily achieve the responsiveness you desire.
Most of it is just adding the necessary .col-*-* for grid layouts, and of course applying Bootstrap classes to your input and label elements, etc. An example Bootply is below though the code is significantly altered to better-reflect Bootstrap's Framework and modern input classifications (like tel or email, etc).
http://www.bootply.com/mPNCZyXbbD
The HTML:
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-wrapper text-center">
<p>Contact Form</p>
<form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input name="number" type="tel" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
And the CSS:
.form-wrapper {
padding: 15px;
background: rgba(255,255,255,0.75);
}
I have a very simple form with Bootstrap 3 which I can easily (automatically) align when I don't use input-group-addons.
After I use them in my form it is impossible to align it (the line with addons is wider because of added addons)
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="product_name" class="col-sm-2 control-label">Product name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="product_name" placeholder="Product name">
</div>
</div>
<div class="form-group">
<label for="product_price" class="col-sm-2 control-label">Price</label>
<div class="col-sm-4 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<label for="product_description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-6">
<textarea class="form-control" id="product_description" placeholder="Description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
JsFiddle: http://jsfiddle.net/Yzxy3/
Bootstrap documentation for input groups says :
Don't mix input-group with other components. (see:http://getbootstrap.com/components/#input-groups)
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element."
So you can't mix "col-sm-4" with "input-group" in the same class. You have to create 2 div class, the first with "col-sm-4" and the other with "input-group"
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
<span class="input-group-addon">.00</span>
</div>
</div>
Updated Fiddle
It's because .input-group has default
padding-right: 0;
padding-left: 0;
so your div will stretch to the full width, where as .col-sm-4 has default styles as:
padding-right: 15px;
padding-left: 15px;
So to make it work as expected, you can add this style:
.input-group[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
Updated Fiddle
I find that I needed to include: float: left as well. So, the css is:
.input-group[class*="col-"] {
float: left;
padding-right: 15px;
padding-left: 15px;
}
If not, my multi-column rows broke when I upgraded from v3.0.2 to v3.0.3.
--cp
.input-group[class*="col-"] is not useful if you use
<fieldset>
Here is solution!
.makeHorizontal{
float:left;
padding-left:20px;
}