Bootstap responsive image on top of another image - html

I'm creating a Santa letter writing website and I'm trying to get a graphic of Santa to look like it is riding on top of the snow. The issue is I cannot seem to get it to work responsively. For reference below is a mockup image of how I would like the Santa graphic placed with everything else I have. How can I make this work?


The container needed bit restructuring to make it work. On the image set following classes img-fluid w-50 h-50 align-self-end
<!DOCTYPE html>
<html lang="en" referrerpolicy="no-referrer">
<head referrerpolicy="no-referrer">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- remove following in production-->
<meta name="referrer" content="no-referrer">
<title>Reindeer Express</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- link rel="stylesheet" href="css/style.css" -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://kit.fontawesome.com/1463370ce3.js" crossorigin="anonymous"></script>
<style>
.bg-img {
background-image: url("https://i.imgur.com/9L54Zdw.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.custom-shape-divider-bottom-1637548946 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1637548946 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 70px;
}
.custom-shape-divider-bottom-1637548946 .shape-fill {
fill: #FFFFFF;
}
#stop-btn {
display: none;
}
#how-to-mail {
display: none;
}
#hidden-template {
display: none;
}
.img-anim {
transform-origin: 25% 75%;
animation: ride 2s ease-in-out 0s infinite alternate;
}
#keyframes ride {
0% {
transform: rotateZ(356deg);
}
100% {
transform: rotateZ(359deg);
}
}
</style>
</head>
<body onload=display_countdown; referrerpolicy="no-referrer">
<div class="bg-img">
<nav class="navbar navbar-dark navbar-expand-sm">
<div class="container-fluid position-relative">
<a class="navbar-brand position-absolute fixed-top" style="left:12px" href="#">
<img src="https://i.imgur.com/vavioW9.png" alt="" width="24" height="29"
class="d-inline-block align-text-top">
Reindeer Express
</a>
<div class="navbar-collapse collapse flex-grow-0 mx-auto">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Home</u></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
<li class="nav-item ">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container col-xxl-8 px-4 py-5">
<div class="d-sm-flex justify-content-between">
<img class="img-fluid w-50 h-50 align-self-end img-anim" src="https://i.imgur.com/4n4uujr.png">
<div class="col flex-lg-row-reverse align-items-center g-5 p-5">
<div class="col-10">
<h1 class="fw-bold lh-1 mb-3 text-white">Reindeer Express</h1>
<p class="lead text-white" id="welcome">Welcome Friends to the Reindeer Express! Have you ever wanted to
write
a letter
to Santa Clause? Well now you can! Fill out the form below to let Santa know what you would like for
Christmas!
But that is not all! You can also download a copy of your letter once you send it! How cool is that?</p>
</div>
<div class="">
<h1 class="text-white" id="countdown_days"></h1>
</div>
</div>
</div>
</div>
<div class="custom-shape-divider-bottom-1637548946">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" class="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" class="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
class="shape-fill"></path>
</svg>
</div>
</div>
<section id="form-area" class="py-3">
<div class="container">
<div class="row py-5">
<div class="col text-center">
<h2>Write a letter to Santa</h2>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12 ">
<img class="img-fluid d-block mx-auto w-75" src="https://i.imgur.com/ZeukS4C.png"
alt="santa standing by a reindeer">
</div>
<div class="col-md-7 col-sm-12">
<form id="form" onsubmit="handleSubmit(event)">
<div class="mb-3 form-floating">
<input type="email" placeholder="ex: parent#mail.com" class="form-control" id="parentEmail"
oninput="handleChange(event)" required>
<label for="parentEmail" class="form-label">Parent's Email Address</label>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3 ">
<input type="text" placeholder="ex: Sally Smith" class="form-control" id="name"
oninput="handleChange(event)" required>
<label for="name" class="form-label">Name</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3 ">
<input type="number" placeholder="3" class="form-control" id="age" oninput="handleChange(event)"
required min="0" max="150">
<label for="age" class="form-label">Age</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="gender" aria-label="select gender" oninput="handleChange(event)"
required>
<option>Pick boy or girl</option>
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
<label for="gender" class="form-label">Gender</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="behavior" aria-label="select naughty or nice"
oninput="handleChange(event)" required>
<option>Select option</option>
<option value="nice">Nice</option>
<option value="naughty">Naughty</option>
<option value="okay">Okay</option>
</select>
<label for="behavior" class="form-label">Behavior</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="wishlistOne" class="form-label">Name three things you would like for Christmas:</label>
<input type="text" placeholder="1." class="form-control" id="wishlistOne" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="2." class="form-control" id="wishlistTwo" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="3." class="form-control" id="wishlistThree" oninput="handleChange(event)"
required>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control textbox" id="message" oninput="handleChange(event)" rows="10"
required></textarea>
<label for="message" class="form-label">Write a message for Santa</label>
<div class="row mt-1">
<div class="col">
<p id="instructions" class="text-muted"></p>
</div>
<div class="col d-flex flex-row-reverse">
<button class="btn btn-outline-primary btn-sm" id="start-btn">
<i class="fas fa-microphone"></i>
Start Voice to Text
</button>
<button class="btn btn-outline-primary btn-sm" id="stop-btn">
<i class="fas fa-microphone-slash"></i>
End Voice to Text
</button>
</div>
</div>
</div>
<div class="col-12">
<button id="send-letter-btn" class="btn btn-danger" type="submit" value="submit">
<i class="fas fa-paper-plane"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section id="how-to-mail" class="py-3">
<div class="container">
<div class="row">
<div class="col text-center">
<h3>How to mail your letter</h3>
<p class="fw-light">Instructions from the USPS</p>
</div>
</div>
<div class="row">
<div class="col mail-instructions">
<p>
<span class="number">1. </span>Print downloaded PDF with your letter
</p>
<p>
<span class="number">2. </span>Place letter in envelope
</p>
<p>
<span class="number">3. </span>Address letter to "Santa Claus, North Pole"
</p>
<p>
<span class="number">4. </span>Place First-Class Mail stamp to envelope
</p>
<p>
<span class="number">5. </span>Have parent mail your letter!
<br>
<small class="fw-light">Additional instructions for parents</small>
</p>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-light">
<p>footer</p>
</footer>
<!-- hidden template goes here -->
<div id="hidden-template">
<div class="container">
<div class="row">
<div class="col">
<p id="letter-name"></p>
<p id="letter-age"></p>
<p id="letter-gender"></p>
<p id="letter-behavior"></p>
<p id="letter-wishlist-one"></p>
<p id="letter-wishlist-two"></p>
<p id="letter-wishlist-three"></p>
<p id="letter-message"></p>
</div>
</div>
</div>
<div id="elementH"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/bootstrap.bundle.js"></script>
<script src="./js/form.js"></script>
<script src="./js/speech.js"></script>
<script>
var display_countdown = setInterval(function () {
countdown();
}, 10)
function countdown() {
var currentDate = new Date();
var christmasDate = new Date("12/25/2021 12:00:00");
var timeLeft = christmasDate.getTime() - currentDate.getTime();
var days_Left = Math.round(timeLeft / (1000 * 60 * 60 * 24));
if (currentDate.getTime() !== christmasDate.getTime()) {
days_Left - 1;
document.getElementById('countdown_days').innerHTML = "Christmas is in " + days_Left + " Days!";
} else {
document.getElementById('countdown_days').innerHTML = "MERRY CHRISTMAS!";
}
display_countdown;
}
</script>
</body>
</html>
Note: In order to make your code work in my environment I had to made some changes. Like putting entire style.css in <style> tag, added meta referer tag, added bootstrap cdn link. Remove the animation if you don't like it.
Compress the background image it's too big 1.77mb. Convert it to jpg, because the png is not transparent.


That should work just great if you add img-fluid to the image Class.
<img src="https://i.imgur.com/4n4uujr.png" class="img-fluid">

Related

Custom FileInput on card - Bootstrap 5

I am trying to add a custom file selection on the card using Bootstrap:
I try this:
<style>
label {
cursor: pointer;
}
.custom-input-image {
opacity: 0;
position: absolute;
z-index: -1;
}
</style>
<div class="row mb-2">
<div class="col-md-4 text-center">
<input type="file" id="id_img_1" name="id_img_1" class="custom-input-image">
<label for="id_img_1" class="hover-shadow-lg hover-translate-y-n3">
<div class="card">
<div class="card-body text-center">
<!-- Image content-->
<div>
<div>
<h4 class="mb-1"><i class="camera-icon"></i></h4>
<small>Select file...</small>
</div>
</div>
</div>
</div>
</label>
</div>
[...more cards..]
</div>
It gets the following effect:
I need this:
Adding a label to a card causes the card to shrink. How to get full length of card with added file selection.

I've used font-awesome icons just as a placeholder icon, but you can try something like this:
label {
cursor: pointer;
display: block;
font-size: 0.875rem;
margin-top: 10px;
}
.custom-input-image {
opacity: 0;
position: absolute;
z-index: -1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="col-md-12 col-sm-12">
<div class="row g-2 mt-3">
<div class="col-md-4 col-sm-4 text-center">
<input type="file" name="" id="" class="custom-input-image">
<div class="card p-4 border border-3">
<i class="fas fa-camera fa-2x"></i>
<label for="">Select file</label>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<input type="file" name="" id="" class="custom-input-image">
<div class="card p-4 border border-3">
<i class="fas fa-camera fa-2x"></i>
<label for="">Select file</label>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<input type="file" name="" id="" class="custom-input-image">
<div class="card p-4 border border-3">
<i class="fas fa-camera fa-2x"></i>
<label for="">Select file</label>
</div>
</div>
</div>
</div>

Containers Not Aligned Bootstrap

I am working on a website that has a left and right container, which you can see if you run the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
.card
{
background-color: #EFF3FC!important;
}
html, body
{
height: 100%;
}
.toggleBlue
{
color: blue;
}
.regular
{
color: gray;
}
#radioDiv
{
text-align: left;
display: inline-block;
margin-left: 25px;
}
.required:before
{
content: "*";
color: red;
}
.btnBlue
{
background: #1467ba;
height: 25px;
width: 70px;
font-size: 14px;
color: white;
margin-right: 30px;
}
.btnSave
{
background: #1467ba;
height: 25px;
width: 70px;
font-size: 14px;
color: white;
margin-right: 10px;
}
</style>
<body>
<div class="container-fluid h-100">
<div class="row no-gutters h-100">
<div class="col-md-2 my-auto p-1">
<div class="card card-block pl-2 ">
<br>
<img class="mx-auto" src="CoreCLM_Logo.JPG" alt="CoreCLM Logo" width="80px" height="50px"> </img>
<hr class="mx-auto" style="height:1px;border:none;color:#333;background-color:#333;width:80%;" />
<p class="toggleBlue"> 1. Procurement Requests & Funding </p>
<p class="regular"> 2. Suppiles or Services </p>
<p class="regular"> 3. Contract Type </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
</div>
<div class="col-md-10 my-auto">
<div class="card card-block">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #E6E6E6;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Edit Profile </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Logout </a>
</li>
</ul>
<form>
<button class="btnSave" type="submit"> SAVE </button>
<button class="btnBlue" type="submit"> CANCEL </button>
</form>
<form class="form-inline my-2 my-lg-0 text-center">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<input type="image" src="searchicon.jpg" width="38px" height="38px"/>
</form>
</div>
</nav>
<div class="p-3">
<form>
<p style="font-size: 18px; text-align: center;"> Ensure the accuracy and completeness of procurement request packages and availability of funds to fulfill the procurement request </p>
<br>
<p style="font-size: 16px; color: gray;"> Have you advised customers on the completeness and accuracy of the procurement request? </p>
<div class="form-group">
<div id="radioDiv">
<input type="radio" id="yes1" name="option">
<label for="yes"> Yes </label>
<br>
<input type="radio" id="no1" name="option">
<label for="no"> No </label>
</div>
<br>
</div>
<p class="required" style="font-size: 16px; color: gray;">Has the funding type been identified? </p>
<div class="form-group">
<div id="radioDiv">
<input type="radio" id="yes2" name="option">
<label for="yes"> Yes </label>
<br>
<input type="radio" id="no2" name="option">
<label for="no"> No </label>
</div>
<br>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label style="color: gray; font-size: 16px;" class="required" for="fundingAmount">If yes, then what is the funding amount? </label>
<input type="number" id="fundingAmount" class="form-control mx-sm-3">
</div>
</form>
<br> <br> <br> <br> <br> <br> <br> <br>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
<div class="col-md-10">
<div style="color: gray; font-size: 14px;" class="required">Required Question </div>
</div>
<div class="col-md-2">
<button class="btnBlue" type="submit"> > </button>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
I am confused why the right and left container are not perfectly the same in terms of their height. I have tried adding br tags to adjust the height, but it always overshoots or undershoots it. How should I fix this?

I see you're using BS 4.3 but upgrade to BS 4.6 and utilize Bootstrap Flex utilities and add the .align-items-stretch class to the parent of your left and right containers. You have to declare that you're using flex with d-flex. Set the cols with .w-25 and .w-75, which sets up your sidebar and main structure...play with the alignment classes, you'll see what's going on. Do not set fixed heights, I'd get rid of your padding and margin classes, all that eats up space and messes with your overall layout and structure. Add padding and margin once your know your house is built right. Get rid of all the break tags too. But this should put you on track to solve your height stretching dilema.
<div class="container-fluid">
<div class="d-flex align-items-stretch">
<div class="w-25 bg-info">
<div class="bg-info">
<img class="mx-auto" src="CoreCLM_Logo.JPG" alt="CoreCLM Logo" height="50px">
<p class="toggleBlue"> 1. Procurement Requests & Funding </p>
<p class="regular"> 2. Suppiles or Services </p>
<p class="regular"> 3. Contract Type </p>
</div>
</div>
<div class="w-75 bg-warning">
Content stretches here...
</div>
</div>
</div>

Footer rising up because of not sufficient content [duplicate]

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath."
And thats exactly whats happening when somebody opens this page on a larger screen. I found solutions online on how to fix this, but I do not know where to apply what.
I tried these and a few more without success. They must be working, I just didn't know how to apply them.
https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
https://matthewjamestaylor.com/bottom-footer
https://codepen.io/cbracco/pen/zekgx
<html lang="en">
<head>
<title>About Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.php" class="font-weight-bold">
<img src="images/logo.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><span class="icon-menu h3 text-white"></span></span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li>Home</li>
<div class="dropdown">
<p id="ddm" class="dropbtn">Types of Violence &dtrif;</p>
<div class="dropdown-content">
<a id="f" href="fizicko.php">Physical </a>
<a id="s" href="seksualno.php">Sexual </a>
<a id="p" href="psiholosko.php">Psychological </a>
<a id="d" href="digitalno.php">Digital </a>
</div>
</div>
<li>Simulation</li>
<li><span style="color:rgba(255, 215, 0,0.9);">About Project</span></li>
<li><?php include_once 'jezici.php'; ?></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="row" style="padding: 50px;">
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">About project</h2>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<p>The project is intended primarily for high school and elementary school students, but it can also be useful for the elderly. It consists of two main parts, informative and interactive.</p>
<p>The informative section aims to present to the site visitors what are the most common forms of violence in schools and how they can be prevented.</p>
<p>The interactive part is based on a simulation of a conversation between a user and another person, with the conversation having a different outcome relative to the answers.</p>
<hr><p>The goal of this project is to raise awareness of the severity of peer violence, how much concequences it can cause if no one responds, and general education about peer violence.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<p class="text-center w-responsive mx-auto mb-5">Have a question? Contact us directly via email, and we will respond as soon as possible.</p>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="kontakt.php" method="POST">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message" >Message</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a style="float: right;" class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
</div>
<div class="status"></div>
</div>
</div>
</div>
</div>
<footer style="width: 100%; text-align: center; background-color: #002366;">
<div style="display: inline-block; margin-left: 5px; margin-right: 15px;">
<b><p class="ftprijavimup" style="color:rgba(255, 215, 0,0.9); margin-top: 5px;">Report<br>violence</p></b>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS violence in schools<br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">0800 200201</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;" >SOS CENTER FOR YOUTH<br>(18-22h) <span style="color:rgba(255, 215, 0,0.9);">3192 782</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS INTERNET VIOLENCE <br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">198 33</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS WOMEN'S CENTER<br>(10-20h) <span style="color:rgba(255, 215, 0,0.9);">2645 328</span></p>
</div>
</footer>
</body>
</html>

Try this.
Looks like your are using bootstrap
https://getbootstrap.com/docs/4.0/examples/sticky-footer/
https://startbootstrap.com/snippets/sticky-footer-flexbox/

First of all, wrap everything in the .site-wrap div as I did below. Add the classes d-flex flex-column to your body element and then add this CSS to that
html,body{
height: 100%
}
.site-wrap{
flex-grow:1;
}
Working Snippet here
html,body{
height: 100%
}
.site-wrap{
flex-grow:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<title>About Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body data-spy="scroll" class="site-mobile-menu d-flex flex-column" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.php" class="font-weight-bold">
<img src="images/logo.png" alt="Image" class="img-fluid">
</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><span class="icon-menu h3 text-white"></span>
</span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li>Home</li>
<div class="dropdown">
<p id="ddm" class="dropbtn">Types of Violence &dtrif;</p>
<div class="dropdown-content">
<a id="f" href="fizicko.php">Physical </a>
<a id="s" href="seksualno.php">Sexual </a>
<a id="p" href="psiholosko.php">Psychological </a>
<a id="d" href="digitalno.php">Digital </a>
</div>
</div>
<li>Simulation</li>
<li><span style="color:rgba(255, 215, 0,0.9);">About Project</span></li>
<li>
<?php include_once 'jezici.php'; ?>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="row" style="padding: 50px;">
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">About project</h2>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<p>The project is intended primarily for high school and elementary school students, but it can also be useful for the elderly. It consists of two main parts, informative and interactive.</p>
<p>The informative section aims to present to the site visitors what are the most common forms of violence in schools and how they can be prevented.</p>
<p>The interactive part is based on a simulation of a conversation between a user and another person, with the conversation having a different outcome relative to the answers.</p>
<hr>
<p>The goal of this project is to raise awareness of the severity of peer violence, how much concequences it can cause if no one responds, and general education about peer violence.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<p class="text-center w-responsive mx-auto mb-5">Have a question? Contact us directly via email, and we will respond as soon as possible.</p>
<div class="row">
<div class="col-md-12 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="kontakt.php" method="POST">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
</form>
<div class="text-center text-md-left">
<a style="float: right;" class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
</div>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<footer style="width: 100%; text-align: center; background-color: #002366;" clas="footer">
<div style="display: inline-block; margin-left: 5px; margin-right: 15px;">
<b><p class="ftprijavimup" style="color:rgba(255, 215, 0,0.9); margin-top: 5px;">Report<br>violence</p></b>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS violence in schools<br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">0800 200201</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" styhttps://stackoverflow.com/questions/60209899/footer-rising-up-because-of-not-sufficient-content#le="margin-top: 5px;">SOS CENTER FOR YOUTH<br>(18-22h) <span style="color:rgba(255, 215, 0,0.9);">3192 782</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS INTERNET VIOLENCE <br>(7.30-15.30h) <span style="color:rgba(255, 215, 0,0.9);">198 33</span></p>
</div>
<div class="col-lg-2.5" style="display: inline-block; margin-left: 5px; margin-right: 5px;">
<p class="ftprijavimup" style="margin-top: 5px;">SOS WOMEN'S CENTER<br>(10-20h) <span style="color:rgba(255, 215, 0,0.9);">2645 328</span></p>
</div>
</footer>
</body>
</html>

Did you tried with this:
footer {
position: absolute;
bottom: 0;
width: 100%;
}

Aligning controls using html / bootstrap

I am trying to align the controls in my angular 8 application. Basically I need to align the Amount column like shown in the screenshot below. Could somebody tell me how to achieve that. Currently using col-sm-5 for Amount column. If I do col-sm-6 it would push the edit button further out which i don't want.I need to get the textbox upto the red line shown in screenshot 1
screenshot 1
Screenshot 2
<form [formGroup]="settlementForm" (ngSubmit)="addAccount()" class="form-horizontal argentex-form" novalidate>
<div class="modal-body">
<div *ngIf="messageViewerModel.messages.length > 0" class="viewer">
<app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>
</div>
<!-- Remaining balanace input -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Remaining Balance</label>
<div class="col-sm-6">
<currency class="form-control" [stringModel]="remainingBalance()" [isDisabled]="true"></currency>
</div>
</div>
<!-- Dropdown Accounts -->
<div class="form-group">
<label class="col-sm-4 control-label">Account</label>
<div class="col-sm-6">
<div class="selectdiv">
<select class="form-control" id="selectedAccount" #selectedAccountID
name="selectedAccountFormControl" formControlName="selectedAccountFormControl">
<option *ngFor="let account of accounts; let ind=index;" value="{{ ind }}"
ngDefaultControl>
{{ account.accountName }}
</option>
</select>
</div>
</div>
</div>
<!-- Amount in the traded currency -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5">
<currency class="form-control" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount"
[required]="true" [readonly]="settlement.isPayTotal"></currency>
</div>
<div class="col-sm-1" style="padding-top: 5px">
<!-- settlement?.isPayTotal -->
<div *ngIf="editMode">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt=""/>
</a>
</div>
<div *ngIf="!editMode">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt=""/>
</a>
</div>
</div>
</div>
<!-- Value Date -->
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Value Date</label>
<div class="col-md-6">
<input type="text"
name="valueDate"
formControlName="valueDate"
class="form-control"
[(ngModel)]="settlement.valueDate"
bootstrapDatepicker />
</div>
</div>
<!-- Reference -->
<div class="form-group">
<label class="col-sm-4 control-label">Reference</label>
<div class="col-sm-6">
<input type="text" formControlName="reference" name="reference" class="form-control"
[(ngModel)]="settlement.reference" />
</div>
</div>
</div>
<div class="modal-footer">
<hr>
<button type="submit" class="btn" [disabled]="settlementForm.disabled || !settlementForm.valid || selectedAccountID.value <= 0 || !settlement.amount" >Save</button>
<button type="button" class="btn btn-close" (click)="closeModal()">Cancel</button>
</div>
</form>
Proposed solution
Its near but not still what I want
screenshot
Used the folowing css
.custom-css-input {
width: 100%;
/* float: left; */
}
.icon-button {
width: 40px;
float: left;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
Following html
<div class="form-group has-feedback">
<label class="col-sm-4 control-label">Amount ({{settlement.tradedCurrency}})</label>
<div class="col-sm-5" >
<currency class="form-control custom-css-input" [(numModel)]="settlement.amount" [(stringModel)]="settlement.amount"
[isDisabled]=!editMode [required]="true" ></currency>
</div>
<div style="padding-top: 5px">
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
</div>
<p class="clear"></p>
</div>

sry for not posting bootstrap solution, but if you are in hurry, simple css can work for you. I have added three custom css classes (custom-css-input,icon-button,clear), .clear is only there if floats disturb the rest of your form, but that's just in case. You can play width calc width and fixed width in order to achive your desired look. (Wrap whole input+button component in one single column and play inside with widths)
.custom-css-input {
width: calc(100% - 50px);
float: left;
}
.icon-button {
width: 40px;
float: right;
}
p.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
}
<div class="col-sm-6">
<currency class="form-control custom-css-input" [isDisabled]=editMode [(numModel)]="settlement.amount" [stringModel]="settlement.amount" [required]="true" [readonly]="settlement.isPayTotal"></currency>
<div *ngIf="editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="editAmount()">
<img src="../../assets/images/icon-sp-edit.png" alt="" />
</a>
</div>
<div *ngIf="!editMode" class="icon-button">
<a href="javascript:;" class="btn-edit" (click)="cancelAmount()">
<img src="../../assets/images/icon-sp-cancel.png" alt="" />
</a>
</div>
<p class="clear" />
</div>

How to I add space between the box of text and the html form I created in boostrap here?

I would like there to be some space between the two.
Here is a picture of the footer in question on imgur.
I tried to add margin right to the detail-box but it just shifts the HTML form below it. Can anyone help? Thanks in advance.
<footer class="page-footer red">
<div class="container">
<div class="row">
<div id="detail-box" class="col-md-6">
<h5 class="font-weight-bold adres"><i class="fas fa-map-marker-alt"></i>Adres</h5>
<p>Kıbrısonline Lefkoşa Merkez Ofisi, Bedreddin Demirel Cad. Arabacıoğlu APT. no:121 Yenişehir - Lefkoşa - P.K. 500 Mersin 10 TURKEY</p>
<h5 class="font-weight-bold merkez"><i class="fas fa-phone-volume"></i>Cagri Merkezi</h5>
<p>+90 (392) 444 0 433</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope-square"></i>Email</h5>
<p>hizmet#kibrisonline.com</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope"></i>Email</h5>
<p>kurumsal#kibrisonline.com</p>
<h5 class="font-weight-bold">Bizi Takip Edin:</h5>
<span><i class="icons icon-social-instagram footer-icon"></i></span>
<span><i class="icons icon-social-facebook footer-icon"></i></span>
<span><i class="icons icon-social-twitter footer-icon"></i></span>
<span><i class="icons icon-social-linkedin footer-icon"></i></span>
</div>
<div class="col-md-6">
<form action="" class="row">
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Ad" placeholder="Adiniz*">
</div>
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Soyad" placeholder="Soyadiniz*">
</div>
<div class="col-md-6 py-1">
<input type="email" class="form-control" name="E-posta" placeholder="E-posta*">
</div>
<div class="col-md-6 py-1">
<input type="tel" class="form-control" name="Telefon" placeholder="Telefon*">
</div>
<div class="col-md-12 py-1">
<textarea class="form-control" name="Mesaj" placeholder="Mesajiniz*"></textarea>
</div>
</form>
<button id="gonder" type="button" class="btn btn-outline-danger"><i class="far fa-paper-plane"></i>Gonder</button>
</div>
</div>
<hr class="border-white" />
<div class="row align-items-center">
<div class="col-4">
<img src="/assets/img/kol-logoldpi2.svg" class="img-fluid" />
</div>
<div class="col">
<div class="copyright">
<p>© 2018 Copyright Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Made with <span style="color: #e25555;">♥</span> by a man from The United Kingdom of Great Britain and Northern Ireland.</p>
</div>
</div>
</div>
</div>

Here's a solution using flexbox:
https://codepen.io/anon/pen/QXgyWQ
<div class="container">
<div class="row">
<div class="col-md-5">
<div style="background: blue;">
left
</div>
</div>
<div class="col-md-6 ml-auto">
<div style="background: red;">
left
</div>
</div>
</div>
</div>

You can wrap that section inside a div and set a max-width.
Something like this:
<div id="detail-box" class="col-md-6">
<div class="detail-box-wrapper" style="max-width: 300px;">
<!-- rest of your codes -->
</div>
</div>
You can set the width to 100% on small screen sizes.

div#detail-box {
max-width: calc(50% - 30px) !important;
margin-right: 30px;
}
You can add this css for make margin right you can increase the value i'e 30px as per your need in both the property
example {max-width: calc(50% - 50px) !Important;}
{margin-right:30px;}