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>
Related
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">
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 ▾</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 ▾</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%;
}
Hi I am trying to align the label tag, text and submit input types to the left and align the 17 total orders to the right side of the page aligned vertically with the Date label and horizontally right aligned with the end of the paragraph tag "Shipping List is Finalized Everyday at 5pm EST".
So far I have gotten the label tag and two input tags aligned where I would like them, but the span tag is not aligning completely to the right side. I am using bootstrap 4.1.1.
Here is my code:
.main {
margin: 15px 0;
}
.btn-appear {
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus {
box-shadow: 0 0 0 .1em rgba(186, 208, 226, .5);
}
.btn-appear:active {
color: #ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row main" style="background-color: #ffffff">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<div class="">
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
<!-- Form code begins -->
<div class="row container justify-content-between">
<div class="col-4 row" style="background-color: antiquewhite">
<form method="post">
<div class="form-group">
<!-- Date input -->
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input class="form-control" id="date" name="date" size="10" placeholder="MM/DD/YYYY" type="text" />
<input class="btn btn-appear" name="submit" type="submit" value="Search">
</div>
</div>
</form>
</div>
<span class="col-4 text-right" style="background-color: aliceblue">
17 Total Orders for <span id="demo"></span>
</span>
</div>
</div>
</div>
.main{
margin-top: 15px;
}
.btn-appear{
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus{
box-shadow:0 0 0 .1em rgba(186,208,226,.5);
}
.btn-appear:active{
color:#ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row main" style="background-color: #ffffff">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
</div>
<div class="row justify-content-between">
<div class="col-4" style="background-color: antiquewhite">
<form method="post">
<div class="form-group">
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input class="form-control" id="date" name="date" size="12" placeholder="MM/DD/YYYY" type="text"/>
<input class="btn btn-appear" name="submit" type="submit" value="Search">
</div>
</div>
</form>
</div>
<span class="col-4 text-right" style="background-color: aliceblue">
17 Total Orders for <span id="demo"></span>
</span>
</div>
</div>
Sorry it took me so long to respond with my solution. I actually changed a lot of it. Here is my solution:
.main{
margin: 15px 0;
}
.btn-appear{
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus{
box-shadow:0 0 0 .1em rgba(186,208,226,.5);
}
.btn-appear:active{
color:#ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row main">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
</div>
<!-- Form code begins -->
<div class="row main justify-content-between">
<div class="col-4">
<form method="post">
<div class="form-group">
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input name="date" class="form-control" id="date" type="text" size="12" placeholder="MM/DD/YYYY">
<input name="submit" class="btn btn-appear" type="submit" value="Search">
</div>
</div>
</form>
</div>
<div class="col-4 text-right">
17 Total Orders for <span id="demo">Wed Aug 29 2018</span>
</div>
</div>
</div>
My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?
Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.
Here's the live code: Codepen - Bootstrap rows overlapping
Here's my current HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" />
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
Any guidence would be helpful!
Change height from vh to %
.v-align{
height:30%;
}
#import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
background-color: ;
padding-top: 70px;
}
#full-h {
height: 100%;
width: 100%;
}
.txt-wrap {
word-wrap: break-word;
}
.v-align {
height: 30%;
}
.v-align2 {
height: 40%;
}
.fl-row {
background-color: #314d74;
}
.f-row {
margin-top: 6vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.s-row {
background-color: #b3bdc7;
}
.s-row-box {
padding: 5vh;
text-align: center;
}
.t-row {
background-color: #697fa4;
}
h1 {
color: #FFE082;
text-align: center;
margin-top: 2vh;
}
h2 {
border-left: 4px solid #FFB300;
}
.sol-icons {
font-size: 72px;
}
.sol-icons-cap {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.form-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact.s-row-box {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 576px) {
/* ... */
}
#media (min-width: 768px) {
/* ... */
}
/****** Canvas Animation ******/
/***** Animation CSS Code *****/
.project-title--container,
.project-link--container {
width: 100%;
text-align: center;
}
.project-title,
.project-link {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.project-title {
font-size: 18px;
margin-top: 10px;
}
.project-link,
.project-link a {
color: #fff;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.fa {
font-size: 22px !important;
padding: 0 5px;
color: #fff;
}
.container-animation--flexbox {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.animationItem {
position: absolute;
margin-right: 35px;
}
#animationItem-image--bigCloud {
animation: bobble 2s infinite;
margin-top: 3vh;
margin-left: 12vh;
font-size: 170px;
color: #7ec0ee;
}
#animationItem-image--smallCloud {
animation: bobble 4s infinite;
margin-top: 12vh;
margin-left: 20vh;
font-size: 145px;
color: #e9e9e9;
}
.smallCloud-two {
margin-bottom: 5px;
margin-right: 320px;
font-size: 145px;
z-index: -1;
color: #d9d9d9 !important;
animation: bobble 2.5s infinite !important;
}
#keyframes bobble {
0% {
transform: translate3d(0px, -25px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, -35px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, -25px, 0px);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Network Technology</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
</html>
I am creating a landing page. I am adding a dropdown when user click on button on top bar (on mobile view). but I want the dropdown to be relative to other divs when active (toggled on). when the user clicks on button, the dropdown should be visible as a div and all divs on bottom should go downward according to the dropdown height.
Here is the code I am working on:
.top_menu {
height: 70px;
height: 70px;
font-weight: 600;
font-size: 20px;
padding: 10px 0;
}
.top-nav-form {
width: 100%;
height: auto;
background: #ffffff;
position: absolute;
top: 0px;
left: 0px;
padding: 10px 0;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row top_menu">
<div class="col-md-2 col-sm-2 top-menu-title">
the page title
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-form">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- this is the div of which i am talking about -->
<div id="top-bar" class="col-md-10 col-sm-10">
<div id="top-form" class="collapse navbar-collapse top-nav-form">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-form"><label class="toggle" for="nav-toggle"></label></button>
<form class="page-form">
<div class="row">
<div class="col-md-1 col-sm-1">
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
</div>
<div class="col-md-1 col-sm-1">
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" placeholder="Enter in a keyword or phrase">
</div>
<div class="col-md-2 col-sm-2">
<div id="dropdown-outer-div" class="" data-toggle="collapse" data-target="#list-item">
<span>Collapsible</span>
<div id="list-item" class="collapse dropdown-list collapse">
<ul>
<li>Web</li>
<li>Image</li>
<li>Shopping</li>
<li>Youtube</li>
<li>News</li>
</ul>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2">
<div id="language-dropdown-outer-div" class="" data-toggle="collapse" data-target="#list-item-language">
<span>Collapsible</span>
<div id="list-item-language" class="collapse language-dropdown-list collapse">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2">
<input type="submit" value="Look up">
</div>
</div>
</form>
</div>
</div>
</div>