The Bootstrap input form isn't centring even though I have it setup to be.
Here's what it looks like:
Form Not Centering:
Proper Form
The red is the problem and the green is what I want. Here is the code.
CSS:
.form-control {
height: 50px;
width: 330px;
padding-left: 5px;
font-size: 20px;
font-family: 'Lato', sans-serif;
}
HTML:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
</div>
<div class="form-group">
<button type="submit" class="btn">Early Access</button>
</div>
</form>
All help would be amazing, thank you.
Does this fix your problem?
Just added a wrapper around it:
#wrapper {
text-align:center;
}
.form-control {
margin: 0 auto;
}
How about something along those lines:
Wrap your stuff with a <div class="container">, centering everything.
Add an id to that same div and set the width to whatever you want.
Set the width of your button to 100%.
html:
<div class="container" id="myContainer">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
</div>
<br>
<div class="form-group">
<button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
</div>
</form>
</div>
css:
#myContainer {
width: 350px;
}
#earlyAccessBtn {
width: 100%;
}
DEMO
Related
I am trying to get a blur behind my register form (class "login-form") described in the image below. However the animated background (javascript file) only blurs when i use the css attribute filter: blur(5px); in my body tag. But obviously everything including the register form is blured then.
My php file uses bootstrap as well.
My CSS:
<style>
body {
margin: 0;
overflow: hidden;
background: #191919;
}
.centertry {
position: absolute;
width: 500px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<!-- BACKGROUND ANIMATION -->
<script id="wave" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
<script src="js/wave.js"></script>
<!-- BACKGROUND ANIMATION -->
<div class="centertry">
<div class="form-input-content">
<div class="card login-form mb-0">
<div class="card-body pt-5">
<a class="text-center" href="index.html"> <h4>Aterion</h4></a>
<form method="post" class="mt-5 mb-5 login-input">
<div class="form-group">
<input id="username" name="username" type="text" class="form-control" placeholder="Username" required>
</div>
<div class="form-group">
<input id="email" name="email" type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input id="password" name="password" type="password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group">
<input id="confirmpassword" name="confirmpassword" type="password" class="form-control" placeholder="Confirm Password" required>
</div>
<button name="signup" class="btn login-form__btn submit w-100">Sign up</button>
</form>
<p class="mt-5 login-form__footer">Already have an account? Login here</p>
</p>
</div>
</div>
</div>
</div>
</body>
register form image
I found the correct answer:
Use backdrop-filter: blur(10px); instead of filter: blur(10px);
Testing the third iteration of my professional website
I've created a bootstrap modal over a parallax feature that won't allow me to open the contact form in the modal without resorting to a transparent background. Any help fixing this is greatly appreciated! Visit my website and see for yourself, this is a tough one to figure out! PS: You're looking for the Book Now! buttons.
HTML code: <div class="bgimg-2 img-responsive">
<div class="container">
<span class="border btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Book Now!</span>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Form</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p class="lead">Hourly Consulting Rate: $40 - $120/h</p>
<form id="contact-form" method="post" action="contact.php" role="form"
data-toggle="validator">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Your firstname! *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Your lastname! *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Your email! *" required="required" data-error="Valid email is required."
pattern="[a-z0-9!#$%&'*+/=?^_`{|}~.-]+#[a-z0-9-]+(\.[a-z0-9-]+)*">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Your phone number!">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
img.headshot {
margin-right: auto;
margin-left: auto;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("images/building1.gif");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/cityscape1.gif");
min-height: 400px;
}
.bgimg-3 {
background-image: url("images/TheBay.gif");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
div.bgimg-2-still {
background-image: url("images/building1.jpg");
width: 100%;
height: auto
}
$(window).load($('#myModal').appendTo('body'))
will take your modal from where you placed it and append it to <body>, where it should have been placed in the first place.
As a side note, you have several JavaScript errors on your website due to improper loading of scripts. You should have a professional look at your "professional website".
I'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance
As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I have a forgot password link. On clicking the link i want to display a div. Here is my demo code. There is something which i am missing.
JSP Code:
<form action="login" method="post">
<label>Username :</label>
<input type="text" value="" name="email">
<label>Password :</label>
<input type="password" value="" name="password">
<input class="submit" type="submit" value="Login" name="Login">
<div id="link" class= "link">Forgot Password?</div>
</form>
<div id="forget-details" class = "forget-details">
<h1>Forgot Your Password</h1>
<p>Enter your registered email address and we will send you a link to reset your password.</p>
<input type="text" value="" name="email" placeholder = "Enter your registered email"/>
CSS:
form div.link{
color: #44869b;
cursor: pointer;
font-family: DIN,Helvetica,Arial,sans-serif;
font-size: 12px;
margin-top: 105px;
text-transform: inherit;
}
.forget-details {
background-color: #333;
float: right;
margin: 7px 0;
padding: 11px;
width: 97%;
display:none;
}
Jquery:
$(document).ready(function(){
$(".link").click(function(){
$(".forget_details").show();
});
});
You have class="forget-details" (hypen) but then select $(".forget_details") (underscore)
Either Change your class name to forget_details or make this change
$(".forget-details").show();
How do you move the move the button to the bottom of the page? I tried and its not working. I have tried margin-bottom: 0px; but the button still not move the bottom
<form tag="Create Logon">
<div id="layer">
</div>
<div class="left">
Fistname *:
</div>
<div class="right">
<input type="firstname" name="firstname" style="width: 300px; font-size: 14pt; margin-left: 40px;" />
</div>
<div class="right">
<input type="Username" name="username" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<div class="left">
Password *:
</div>
<div class="right">
<input type="password" name="password" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!</p>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
alert("Thank you for registering with GreenB!");
}
</script>
</div>
Use absolute positioning:
button {
position:absolute;
bottom:0;
}
jsFiddle example
button {position: absolute; bottom: 0}