I have designed one form below the image. Now, I want to display full responsive image in a background of the form.
I tried to code but the image is displaying inside the form rather than displaying a form on full width and height image.
Where is my mistake?
HTML
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">To</label>
<input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.formhold {
background: url(images/334.jpg);
background-size: cover;
}
form {
display: block;
margin: 0 auto;
}
You almost have the right idea.
I drew up a really quick code-pen mock up you can take a look at:
http://codepen.io/zsawaf/pen/vKRLAP
In summary your mistake was that you needed another container outside of the bootstrap columns that spans the entire page and holds a background image.
HTML:
<div class="container-fluid cover-img">
<div class="row">
<!-- whatever you want your form container to span -->
<div class="col-xs-offset-3 col-xs-6">
<div class="form-container">
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
</div>
</div>
</div>
</div>
SCSS:
.cover-img {
background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.form-container {
margin-top: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
form {
margin: 20px 0;
input {
margin: 5px 0;
width: 100%;
height: 40px;
}
}
}
Like Sinan said, you need to give the form a width and height to match the image size.
I think you can take Sinan's code and combine it with this to expand the form's width and height to match the image size.
Let's say your image size is 1024x768, then:
form {
display: block;
margin: 0 auto;
width: 1024px;
height:768px;
}
You can do it like:
.formhold {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(images/334.jpg)
background-color: rgba(0, 0, 0, 0);
background-size: inherit;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
}
So i'm not sure if that worked for you but the last example was. Adding a wrapper div around the form with the container-fluid class and applying the background to that:
.wrapper {
background: url(images/334.jpg) no-repeat;
background-position: top center;
background-size: 100% auto;
}
And the HTML:
<div class="wrapper container-fluid">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
</div>
Here is the link to the latest jsFiddle.
Related
how do i make image and image select and delete buttons reponsive
I want to remove the gap after delete button, any suggestion will be appreciated??
<div class="container mt-0">
<div class="row">
<div class="col-sm-12 col-md-3"><!--upload button-->
<span class=""></span>#wordInfo["SelectImage"]
</div>
<div class="col-sm-12 col-md-3 ms-md-5"><!--delete button-->
<button type="submit" class="btn btn-outline-primary float-lg-end mb-2 w-100 " id="#removeImageElementId" style="#(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? "display:none" : "")" onclick="javascript:removeImage('#(noImage)', '#imageElementId', '#hiddenElementId', '#removeImageElementId'); return false;"><span class=""></span>Delete image</button>
</div>
</div>
</div>
<div class="row mb-3 d-flex flex-column"><!---image-->
<div class="col-md-7 mt-3">
<img id="#imageElementId" class="img-fluid" alt="Responsive image" src="#(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? noImage : menuImagePath + Model.MenuForm.IMAGE_NAME)" onload="javascript:disiplayImage('#removeImageElementId', $(this).attr('src'),'#noImage') " />
<input type="hidden" id="#hiddenElementId" name="hdnImageName_1" value="#Model.MenuForm.IMAGE_NAME">
</div>
</div>
</div>
[![below is image][1]][1]
[1]: https://i.stack.imgur.com/uhJhl.png
Change your css as shown :
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
in your case:
#centre{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
replace centre with id of image in your html
The background height is coming right but when we open the console the background shifts upwards leaving white space. I have tried both height: 100% AND height:100vh. Still it's not fixed
enter image description here
.main {
width: 100%;
height: 100vh;
float: left;
background: rgb(63, 63, 63);
background: radial-gradient(circle, rgba(63, 63, 63, 1) 0%, rgba(0, 0, 0, 1) 97%);
padding: 100px 0px 100px 0px;
}
<template>
<section class="main">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img :src="logo" width="100%"><br><br></div>
<div class="col-md-4"></div>
</div>
<div class="disclaimer font-weight-light animated-text">
<vue-typed-js
class="d-block"
:loop="true"
:strings="disclaimer"
>
<span class="typing"></span>
</vue-typed-js>
</div>
<div class="row mt-4 pt-4">
<div class="col-md-4"></div>
<div class="col-md-4">
<form autocomplete="off" #submit.prevent="submitNewsletter">
<input type="email" name="email" id="email" v-model='enteredEmail' ref='enteredEmail' placeholder="Enter Your Email" class="sub-feild">
<center>
<div class="mt-2">
<p class="error-message">{{errorMessage}}</p>
</div>
</center>
<center><button type="submit" class="cross_line">Subscribe</button></center>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
</template>
Apply height 100% on parent of main div like body,html etc.
I am working on a login split screen, and had it perfectly aligned with bootstrap:
It has been requested that the left side image change when the page reloads. I have found a way to do this with JavaScript, and worked it into my code, but it has made the images wonky. There is a space on the left side, an unnecessary scroll bar because the height is off as well, and the image is no longer responsive. Obviously I had to change the code to get the js to run, and the js runs perfectly, but now the layout is screwed up:
The css has stayed the same for both examples, but I feel I should share it anyways:
I have gotten so close, I just can't seem to figure out a way to fix the image. Any help would be greatly appreciated.
Here is the full code:
html:
<div class="container-fluid">
<div class="row no-gutter">
<!-- The image half -->
<div class="col-md-7 d-none d-md-flex bg-image">
<img id="myPicture" class="w-100">
</div>
<!-- The content half -->
<div class="col-md-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-7 mx-auto">
<h3 class="display-4">Student Login</h3>
<form action="index.html">
<div class="form-group mb-4">
<input id="inputStudentID" type="studentID" placeholder="Student ID"
required="required" autofocus=""class="form-control border-3 shadow-sm px-6">
</div>
<div class="form-group mb-4">
<input id="inputPassword" type="password" placeholder="Password"
required="required" class="form-control border-3 shadow-sm px-6">
</div>
<div class="custom-control custom-checkbox mb-4">
<input id="customCheck1" type="checkbox" checked class="custom-control-
input">
<label for="customCheck1" class="custom-control-label">Remember Me</label>
</div>
<button type="submit" style="margin-left: 1px"
class="btn btn-block text-uppercase mb-3 border-3 shadow-sm">Sign In</button>
<div class="text-center d-flex justify-content-between">
<p>Forgot Password?</p>
</div>
<div class="text-center d-flex justify-content-between">
<p>Need to <a href="https://my.ntc.edu/psp/csprod/?cmd=login">
Create Student Account?</a></p></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.login,
.image {
min-height: 100vh;
color: #999999;
font-family: "Roboto", sans-serif;
}
.bg-image {
background-size: cover;
background-position: center center;
}
p {
color: #999999;
}
a {
color: #4285f4;
}
a:hover {
text-decoration: none;
color: #0f459b;
}
.display-4 {
font-size: 40px;
color: #999999;
}
#inputStudentID,
#inputPassword {
padding: 25px 0 25px 12px;
}
.btn {
background-color: #4285f4;
color: white;
}
.btn:hover {
background-color: #0f459b;
color: white;
}
.has-error input[type="text"],
.has-error input[type="email"],
.has-error select {
border: 1px solid #a94442;
}
js:
<script type="text/javascript">
window.onload = choosePic;
var myPix = new Array("images/girls.png", "images/group.png",
"images/studentbw.png", "images/stairs.png",
"images/purple.png", "images/portrait.png");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
}
</script>
Kindly use class="img-responsive" in image tag...
Kindly use class="img-responsive" in image tag...
<img id="myPicture" class="img-responsive" />
This change is enough for your issue....
This change is enough for your issue....
I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
We have a modal window (div) which is separated to two sections with a vertical border - <div class="border"></div> with the following CSS:
.modal-body {
padding: 0px 15px;
}
.modal-body-left,
.modal-body-right {
float: left;
width: 381px;
padding: 0px 0px 15px;
}
.border {
border-left: 3px solid black;
position: absolute;
top: 0px;
bottom: 0px;
width: 0px;
left: 396px;
}
.modal-body-right {
margin-left: 15px;
}
The vertical line fits well into the parent div, but the problem is - if the parent div is very high and there is a vertical scroll bar, the vertical line scrolls with the scroll bar. How do we prevent it from scrolling (or change it's height to the full height of the parent div)? We don't want to put a border to the right or left sections, because they may not be the same height and we want the vertical border to cover the full height of its parent div.
Edit: this is the HTML (The contents are dynamic):
<div class="modal hide fade" id="...">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form method="post" id="...">
<div class="modal-body-left">
<h4>...</h4>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
</div>
<div class="border"></div>
<div class="modal-body-right">
<h4>...</h4>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
<div class="line-div">
<label class="modal-label">...</label>
<div class="modal-div">...</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
...
</div>
</div>
You might be interested in CSS overflow. For example, choosing the value: auto will only show the scrollbar when the content is too large.
Use CSS overflow property
.modal-body{
height:300px;//your prefered value
width:300px;//your prefered value
overflow:auto;
}
DEMO