I'm using Bootstrap 3 and I wish the padding input and select fields were left aligned.
In my form I overwritten bootstrap form-group-lg in this way
.form-group-lg .form-control {
letter-spacing: normal;
text-indent: 0.25em;
border-radius: 2px;
color: #555555;
font-size: 14px;
line-height: 1.42857;
min-height: 38px;
height: 58px;
}
.form-group-lg select.form-control {
height: 58px;
line-height: 58px;
padding-left 9px; /* force alignament with firefox, fail in IE e Chrome */
}
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-lg">
<input class="form-control" name="name" placeholder="Name" type="text">
</div>
</div>
<div class="col-md-12">
<div class="form-group form-group-lg">
<select class="form-control" name="City" required="">
<option>City</option>
</select>
</div>
</div>
</div>
Unfortunately I noticed that if I try to force the padding-left in select field to align with that of the input field is displayed differently in each browser.
See the example with different browser
EXAMPLE
Is there any solution to this problem?
use text-indent property instead of padding-left (it will work on all browsers(tested on chrome and firefox)):
see your example:
/* CSS used here will be applied after bootstrap.css */
.container {
width: 300px;
margin-top: 40px;
}
.form-group-lg .form-control {
/*padding: 10px 16px;*/
letter-spacing: normal;
text-indent: 0.25em;
border-radius: 2px;
color: #555555;
font-size: 14px;
line-height: 1.42857;
min-height: 38px;
height: 58px;
}
.form-group-lg select.form-control {
height: 58px;
line-height: 58px;
text-indent: 29px; // use this instead of padding-left
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-lg">
<input class="form-control" name="name" placeholder="Name" type="text">
</div>
</div>
<div class="col-md-12">
<div class="form-group form-group-lg">
<select class="form-control" name="City" required="">
<option>City</option>
</select>
</div>
</div>
</div>
</div>
Related
i have issue with my design in contact form i am trying to represent my contact form like following picture: https://cdn.discordapp.com/attachments/772606698283073557/951615088966631505/unknown.png
But my columns display vertically and i want the textarea (Message) to be inline with input Subject, could you help me please? Thank you!
My HTML:
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-md-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</form>
</div>
</div>
</section>
My css:
/***********************************************
For Contact Section
************************************************/
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
You need to encapsulate the columns inside a row
...
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<div class="col-md-12">
...
</div>
</div>
...
You can check the example below, please note that I have removed the md from the columns classes because the preview is less than the medium screen breakpoint
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="row">
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</div>
</form>
</div>
</div>
</section>
I am trying to float 4 boxes along the full width of my webpage with equal spacing between them.
Currently the output looks as follows:
This was achieved with the following HTML and CSS
.info {
background-color: black;
padding: 20px 20px 40px 20px;
margin-bottom: 10%;
}
.go_button {
width: 175px;
background-color: #01C3A7;
border: none;
cursor: pointer;
border-radius: 0.429rem;
color: #FFFFFF;
font-family: Circular, Helvetica, Arial, sans-serif;
font-size: 1.429rem;
font-weight: bold;
letter-spacing: 0px;
padding: 3px;
}
.box {
float: left;
}
<div class="info">
<div class="box_container">
<div class="box">
<input type="text" placeholder="Departure Station" id="depart">
<input type="hidden" id="departID" name="DeptStationID" style="display: none">
</div>
<div class="box">
<input type="text" placeholder="Arrival Station" id="arrive">
<input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
</div>
<div class="box">
<input type="text" id="datepicker" value="#DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
</div>
<div class="box">
<input type="text" id="timepicker" name="time">
</div>
<div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
</div>
</div>
The output I am trying to require is as follows:
I want this to be able to resize according to the screen display and therefore cannot set a margin using pixels. Currently when i do resize the output, it produces the following:
As you can see, the background color does not fill all four boxes. I have added height:auto and this does not fix the issue.
Please can you let me know how to fix these issues.
I would use flexbox with justify-content:space-between rather than floats
.info {
background-color: black;
padding: 20px 20px 40px 20px;
margin-bottom: 10%;
}
.go_button {
width: 175px;
background-color: #01C3A7;
border: none;
cursor: pointer;
border-radius: 0.429rem;
color: #FFFFFF;
font-family: Circular, Helvetica, Arial, sans-serif;
font-size: 1.429rem;
font-weight: bold;
letter-spacing: 0px;
padding: 3px;
}
.box_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
<div class="info">
<div class="box_container">
<div class="box">
<input type="text" placeholder="Departure Station" id="depart">
<input type="hidden" id="departID" name="DeptStationID" style="display: none">
</div>
<div class="box">
<input type="text" placeholder="Arrival Station" id="arrive">
<input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
</div>
<div class="box">
<input type="text" id="datepicker" value="#DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
</div>
<div class="box">
<input type="text" id="timepicker" name="time">
</div>
<div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
</div>
</div>
You could use flex box.
try something out like the following:
FIDDLE
https://jsfiddle.net/pcehxx7f/16/
HTML
<div class="container">
<div class="box">
<input type="text">
</div>
<div class="box">
<input type="text">
</div>
<div class="box">
<input type="text">
</div>
<div class="box">
<input type="text">
</div>
</div>
CSS
.container {
display: flex;
justify-content: space-between;
}
.box {
padding: 0 10px;
}
.box input {
width: 100%;
}
I would use the next hack...
.box_container:after{
content:'';
display:block;
clear:both;
}
This adds a last element in your container, using the clear property, this is happening because the float element don't take space in its container..
.info {
background-color: black;
padding: 20px 20px 40px 20px;
margin-bottom: 10%;
}
.go_button {
width: 175px;
background-color: #01C3A7;
border: none;
cursor: pointer;
border-radius: 0.429rem;
color: #FFFFFF;
font-family: Circular,Helvetica,Arial,sans-serif;
font-size: 1.429rem;
font-weight: bold;
letter-spacing: 0px;
padding: 3px;
}
.box {
float: left;
}
.box_container:after{
content:'';
display:block;
clear:both;
}
<div class="info">
<div class="box_container">
<div class="box">
<input type="text" placeholder="Departure Station" id="depart">
<input type="hidden" id="departID" name="DeptStationID" style="display: none">
</div>
<div class="box">
<input type="text" placeholder="Arrival Station" id="arrive">
<input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
</div>
<div class="box">
<input type="text" id="datepicker" value="#DateTime.Now.Date.ToString("yyyy/MM/dd")" name="DeptDate">
</div>
<div class="box">
<input type="text" id="timepicker" name="time">
</div>
<div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
</div>
</div>
Use Clearfix to automatically close elemts float.
How it works is well described in this question:
What is a clearfix?
But much better solution is to use flexbox.
Nice flexbox guide can be found on css-tricks.com
I have been coding out a form inside a bootstrap accordion collapse but there is an issue on md and lg screens with columns.
As expected on xs and sm, it looks like so:
Perfectly as expected, however when I go up to md and lg, this happens:
I have tried inspecting the element and so forth but everything is as I would expect and should be working perfect, here you can see the parents width and then the widths of each child:
The parent:
Each child:
As you can see, each child is indeed 50% of the parent, thus, there is no reason for it going onto a new line, nor for offsetting by 50%.
I have look at everything I can think of:
Did I accidentally add an offset class? No.
Is there a hidden col-md-6 that is doing the offsetting? No.
Is the child larger than 50%? No.
So now I am lost and ask for ideas.
Here is a code snippet of the affected form:
.payment-bottom-container {
background: white;
color: #C99C49;
}
.payment-bottom-container .section-intro-title {
color: #C99C49;
text-align: center;
font-size: 36px;
padding-top: 20px;
text-transform: uppercase;
}
.payment-bottom-container .section-intro-title::after {
border-color: #C99C49;
max-width: 40px;
left: 125px;
}
.payment-bottom-container .final-step-text {
color: #C99C49;
text-align: center;
margin: 0 auto;
max-width: 700px;
width: 100%;
font-family: "montserrat-regular";
font-weight: bold;
letter-spacing: 0.2em;
font-size: 16px;
padding: 0 10px 10px 10px;
text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-heading {
background: #f1f1f1;
border-top: 2px solid #ccc;
border-radius: 0;
}
.payment-bottom-container .panel-group .panel .panel-heading h4 a {
color: #190e8c;
font-family: "Museo500";
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input,
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 select {
width: 100%;
margin-bottom: 10px;
outline: 0;
padding: 5px;
font-family: "Raleway";
font-weight: bold;
color: #190e8c;
letter-spacing: 0.1em;
font-size: 12px;
}
.payment-bottom-container .panel-group .panel .panel-body form .container {
max-width: 100%;
}
.payment-bottom-container .panel-group .panel .panel-body form .delivery-title {
color: black;
font-family: 'Raleway';
font-size: 24px;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input.input-50 {
width: 50%;
}
#media (max-width: 991px) {
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input.input-50 {
width: 100%;
}
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input[type="submit"] {
background-color: #C99C49;
color: white;
font-family: 'Raeleway';
text-align: center;
font-size: 16px;
border: 0;
outline: 0;
text-transform: uppercase;
padding: 10px;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 label {
display: block;
color: #063c58;
font-family: 'Raeleway';
text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 label span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="payment-bottom-container">
<h1 class="section-intro-title">The final step</h1>
<p class="final-step-text">Just let us know where you would like us to deliver your case to and it will be on its way!</p>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Enter Delivery Address
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form action="#" method="post">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="delivery-title">Where should we ship?</h1>
</div>
<div class="col-xs-12 col-md-6">
<label>First Name<span>*</span>
</label>
<input type="text" placeholder="First Name" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Last Name<span>*</span>
</label>
<input type="text" placeholder="Last Name" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Address Line 1<span>*</span>
</label>
<input type="text" placeholder="Address Line 1" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Address Line 2</label>
<input type="text" placeholder="Address Line 2">
</div>
<div class="col-xs-12 col-md-6">
<label>Phone Number<span>*</span>
</label>
<input type="tel" placeholder="Phone">
</div>
<div class="col-xs-12 col-md-6">
<label>City/Town<span>*</span>
</label>
<input type="text" placeholder="City" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Region/Council Area<span>*</span>
</label>
<input type="text" placeholder="Region" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Post Code<span>*</span>
</label>
<input type="text" placeholder="Post Code" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Select your country<span>*</span>
</label>
<select required>
<option value="UK">United Kingdom (GB)</option>
</select>
</div>
<div class="col-xs-12">
<h1 class="delivery-title">Confirm Your Login Details</h1>
</div>
<div class="col-xs-12">
<label>Email<span>*</span>
</label>
<input type="email" placeholder="The same as setup above" class="input-50" required>
</div>
<div class="col-xs-12">
<label>Password<span>*</span>
</label>
<input type="password" placeholder="The same as setup above" class="input-50" required>
</div>
<div class="col-xs-12">
<input type="submit" value="Complete order">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope everything is clear enough, if not, comment below and I can provide any other information you may need.
Th answer was found by #andrewbone (https://stackoverflow.com/users/4891666/andrew-bone) in his comment answer.
The issue was that my lack of asterisk above address line 2, it was 1px too short, therefore I set all of them to have a min-height of 72px and that upped the add line 2 from 71px to 72px tall fixing the issue!
Shout out to andrew for finding that was the issue!
I like bootstrap, but when it comes to forms it's really inconvenient. I made myself classes for a comment box that should flowing on the top and (ideally push other elements below on smartphone screens). I couldn't figure out how to have the name and surname on the same line. I've made following demo:
.comment-box-container {
position: absolute;
top: 812px;
right: 40px;
z-index: 1001;
width: 500px;
padding-top: 0px;
margin-top: 0px;
}
.comment-box {
background-color: white;
border: 1px solid #DCE0E0;
padding: 10px;
}
.comment-box-header {
background-color: rgba(38, 173, 228, 0.9);
color: white;
height: 40px;
padding: 5px;
padding-left: 10px;
font-size: 20px;
text-transform: capitalize;
font-weight: normal;
margin-right: 0px;
margin-left: 0px;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="comment-box-container">
<div class="comment-box-header">
Kontakt
</div>
<div class="comment-box">
<form role="form" class="forminline">
<div class="form-group">
<input type="surname" class="form-control" placeholder="Vorname" id="surname">
</div>
<div class="form-group">
<input type="name" class="form-control" placeholder="Name" id="name">
</div>
<div class="form-group">
<input type="telephone" class="form-control" placeholder="Telefon" id="telephone">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" id="email">
</div>
<div class="form-group">
<textarea class="form-control" id="comments" name="comments" placeholder="Nachricht" rows="5"></textarea>
</div>
<div class="form-group">
<button class="btn" type="submit">Interesse bekunden</button>
</div>
</form>
</div>
</div>
I'd like to display surname and name on the same line and the button in the center over the whole width. Possible? (P.S. What kind of buttons is Stack Overflow using below?)
JSfiddle demo
You need to add grid classes to the first two inputs. col-xs-6
will divide the inputs by giving them a width of 50% and align
them in a line. Make sure you have wrapped the two inputs inside a
row so that next inputs are aligned as it is, without disturbing
the flow.
text-center class to the commentbox class will align the button
to center.
To reduce the space between the two input box, you will need to override the padding-left to 0. Note that I am targeting the second input so that only the spacing is effected.
.comment-box .form-group.col-xs-6:nth-child(2) {
padding-left: 0;
}
To give a custom color to the button, you will again need to override the bootstrap classes.
.comment-box .btn {
background-color: lightgray;
}
.comment-box-container {
position: absolute;
top: 10px;
right: 40px;
z-index: 1001;
width: 500px;
padding-top: 0px;
margin-top: 0px;
}
.comment-box {
background-color: white;
border: 1px solid #DCE0E0;
padding: 10px;
}
.comment-box-header {
background-color: rgba(38, 173, 228, 0.9);
color: white;
height: 40px;
padding: 5px;
padding-left: 10px;
font-size: 20px;
text-transform: capitalize;
font-weight: normal;
margin-right: 0px;
margin-left: 0px;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
}
.comment-box .form-group.col-xs-6:nth-child(2) {
padding-left: 0;
}
.comment-box .btn {
background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="comment-box-container">
<div class="comment-box-header">
Kontakt
</div>
<div class="comment-box text-center">
<form role="form" class="forminline">
<div class="row">
<div class="form-group col-xs-6">
<input type="surname" class="form-control" placeholder="Vorname" id="surname">
</div>
<div class="form-group col-xs-6">
<input type="name" class="form-control" placeholder="Name" id="name">
</div>
</div>
<div class="form-group">
<input type="telephone" class="form-control" placeholder="Telefon" id="telephone">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" id="email">
</div>
<div class="form-group">
<textarea class="form-control" id="comments" name="comments" placeholder="Nachricht" rows="5"></textarea>
</div>
<div class="form-group">
<button class="btn" type="submit">Interesse bekunden</button>
</div>
</form>
</div>
</div>
Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot.
Here are my codes:
HTML
<body>
<div class="container" align="center">
<div id="image">
<img src="assets/img/imac.png" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
}
#loginForm{
width: 500px;
height: 400px;
}
Make the #image be position:absolute and fill the .container (which is made position:relative) with it.
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
position:relative;
}
#loginForm {
width: 500px;
height: 400px;
position:relative;
z-index:10;
}
#image{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
<div class="container" align="center">
<div id="image">
<img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
Create a div the size of the image, and make the image the background image for the div.
Then place a div container inside this div for the form itself. You can then use CSS to position the form div using margins.
<div id="image-container">
<div id="form-container">
// your form
</div>
</div>
#image-container {
width: 500px;
height: 500px;
background: url(/* your image */);
}
#form-container {
width:350px;
margin: 30px auto 0 auto;
}
Obviously, you need to replace the sizes with ones of your actual image, and the margin values to make your form content fit within the screen of the computer in your image.
That should work, I'm coding this on my phone so apologies if I miss something trivial!
I used the last example and made it simpler. Just adjust for image size and use padding to position the form.
<div style="width:529px; height:220px; background-image:url('image.jpg')" align="center">
<div style="width:529px; padding: 165 0 0 0" align="center">
...form ...
<div>
<div>
Try this
* {
box-sizing: border-box;
font-family: sans-serif;
}
.form-container {
display: flex;
justify-content: center;
background: url("https://parrot-tutorial.com/images/mask-smog.jpg") no-repeat center;
background-size: cover;
position: relative;
min-height: 400px;
padding: 24px;
}
.my-form {
background-color: #fff;
padding: 16px;
}
.form-header {
text-align: center;
padding: 0;
margin-top: 0;
font-size: 2em;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #f1f1f1;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.form-text {
color: #6c757d;
display: block;
margin-top: .25rem;
font-size: 80%;
font-weight: 400;
}
.btn {
display: block;
width: 100%;
font-weight: 400;
color: #ffffff;
cursor: pointer;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
background-color: #007bff;
}
<div class="form-container">
<form action="/html/form-action.php" class="my-form" method="POST">
<h2 class="form-header">Login</h2>
<div class="form-group">
<label for="exampleEmail">Email address</label>
<input type="email" class="form-control" id="exampleEmail" placeholder="Enter email" name="uemail">
<small class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="examplePassword">Password</label>
<input type="password" class="form-control" id="examplePassword" placeholder="Password" name="pwd">
</div>
<div class="form-group">
<input type="checkbox" id="exampleCheck" name="saveinfo">
<label for="exampleCheck">Remember me</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
Reference:Add a Form on Image