hover function not able to implement when I click on the image - html

I came across a hover menu and trying to implement but not able to get the desired effect. On Click on the company logo, a dropdown should appear.
my code:
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Can anybody help me in this issue.In my case hover menu is coming but its hiding the logo.I'm did try with z index but still nothing is happening. It's totally hidden. I'm totally out in the dark how to proceed with this one.Thank You


Just remove the position absolute;
.client-container{
position: relative;
display: inline-block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
background-color: #fff;
transition:337ms ease-in-out;
min-height: 80px;
}
.client-content {
display: none;
min-width: 160px;
}
.client-container:hover .client-content {
display: block;
}
.client-container:hover {
position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


Just change top:0 in your code.
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 80px; /* img's height */
left: 0;
width: 100%;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
/* i added border for reference */
.client-container:hover, .client-content{border: 1px solid}.client-container:hover{border-bottom-color:transparent}.client-content{border-top-color:transparent}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


Try This:
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center client-container">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
<div class="client-content p-4">
<img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
<p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Related

fullpage.js is not able to scroll

I want to add fullPage.js to my HTML website. But my page will not be able to scroll it the whole page just stuck at the content in the header tag and is not able to scroll to other sections. I tried to change the class name of each section to "section" but it doesn't work too. Below are my codes
My codes are below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
</head>
<div id="fullPage">
<header>
<div class="iframe-container">
<div id="landingvideo" style="display:flex; align-items:center; justify-content:center;">
<iframe class="landingpage"scrolling="no" style="width:4500px; height:1000px; border:none;" marginheight="100%" marginwidth="100%" src="landingpage.html"></iframe>
</div>
</div>
</header>
<iframe class="minicarousel" src="minicarousel.php" frameborder="0" marginheight="100%" marginwidth="100%" width="100%" height="100%" scrolling="no"allowtransparency="true"></iframe>
</div>
<body>
<section class="section_position" id="section0">
<div class="container mb-5">
<div class="row">
<div class="col-lg-12 mx-auto text-center">
<p id="title">Lorem Ipsum</p>
<p id="des1">Lorem ipsum dolor sit amet</p>
<p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
</div>
</div>
<div class="carousel-wrap container mb-5">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="row">
<div class="col-md-12"> <br/>
<img src="images.png" class="img" style="width: 100%; height: 438px;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12"> <br/>
<img src="images.png" class="img" style="width: 100%; height: 438px;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12"> <br/>
<img src="images.png" class="img" style="width: 100%; height: 438px;">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mx-auto text-center mb-5">
<img src="images.png" >
</div>
</section>
<section class="section_position mb-5" id="section1">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto text-center">
<p id="title">Lorem Ipsum</p>
<p id="des1">Lorem ipsum dolor sit amet</p>
<p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
</div>
<div class="col-lg-4">
<center> <img class="icon1" src="images.png"> </center>
</div>
<div class="col-lg-4">
<center> <img class="icon1" src="images.png"> </center>
</div>
<div class="col-lg-4">
<center> <img class="icon1" src="images.png"> </center>
</div>
</div>
<div class="col-md-12 mx-auto text-center ">
<a href="#contactme" ><img src="images.png" ></a>
</div>
</section>
<section class="section_position mb-5" id="section2">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto text-center">
<p id="title">Lorem Ipsum</p>
<p id="des1">Lorem ipsum dolor sit amet</p>
<p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
</div>
<div class="col-md-12">
<video id="method" poster="imagespng" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" style="width: 100%;height: auto;">
<source src="loop.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</br>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<script>
new fullpage('#fullPage',{
autoScrolling:true
})
</script>
</body>

Your <body> is on the middle of your HTML...
You are writing HTML before the <body> tag (<div id="fullPage">) and so on.
So, short answer:
Check your HTML code. It is just not correct.

How can I align HTML elements printed in a loop?

I'm printing a loop dynamically in a col-3. Each column contains 4 HTML elements.
An Image
A Title
Some text content
A button
Is it possible to make each elements top, line up with each other regardless of how many lines the element on top is?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>

Personally, I would split the content into various rows, and put the columns inside those rows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container pt-5">
<div class="row">
<div class="col-12">
<div class="row" id="titles_row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="row" id="texts_row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
</div>

One option is to separate your <h3> and <p> into separate rows. That allows them to all be aligned horizontally.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>

Bootstrap classes for positioning

What class i need to use to place second button on the same line with first button. I am using bootstrap 4.
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-sm-5 kappa">
<h3>Don't have an account?</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi facere officiis numquam alias, delectus beatae autem facilis aliquid voluptates aspernatur, eaque suscipit possimus eveniet praesentium explicabo itaque nulla distinctio.
</p>
<button type="button">sign up</button>
</div>
<div class="col-sm-5 kappa">
<h3>Have an account?</h3>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit!
</p>
<button type="button" class="">login</button>
</div>
</div>
</div>

Since there is no code provided, assuming you are using Bootstrap 4 and apply flexbox css, in Bootstrap 4 the class is call .d-flex. After you apply .d-flex to parent all the direct descendant can be align easily using margin. In Bootstrap 4 it is call mt-auto and mb-0.
.bigcontainer{
height:300px;
background:grey;
width:40%;
float:left;
margin:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="bigcontainer d-flex flex-column">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
<div class="mt-auto mb-0"><button>button</button></div>
</div>
<div class="bigcontainer d-flex flex-column">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
<div class="mt-auto mb-0"><button>button</button></div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.cs-button {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue.Quisque semper eleifend odio eget feugiat. Curabitur id mi tristique, ultrices lectus quis, gravida tortor..</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0" >
<div class="mt-auto mb-0"><button>button</button></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="height: 200px;">
<div>Title</div>
<div>Sed orci purus, porta ac feugiat ut, tincidunt vel libero. Aenean ultricies porta magna in ultricies. Fusce vitae felis augue. </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cs-button" style="padding:0">
<div class="mt-auto mb-0"><button>button</button></div>
</div>
</div>
</div>
</div>

How to make thumbnail text float right on small viewport on bootstrap

This is how the standard thumbnail looks like
When the sm viewport is reached I need it to look like this:
as you can see on this jsfiddle Bootstrap only shrinks the container by default
http://jsfiddle.net/32o4kses/
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="http://placehold.it/241x200" data-holder-rendered="true">
<div class="caption">
<h3 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="http://placehold.it/241x200" data-holder-rendered="true">
<div class="caption">
<h3 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="http://placehold.it/241x200" data-holder-rendered="true">
<div class="caption">
<h3 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>

You can use the Bootstrap grid inside each thumbnail like this..
<div class="thumbnail row">
<div class="col-md-12 col-sm-6 col-xs-6">
<img data-src="holder.js/100%x200" alt="100%x200" style="height: 200px; width: 100%; display: block;" src="http://placehold.it/241x200" data-holder-rendered="true">
</div>
<div class="caption col-md-12 col-sm-6 col-xs-6">
<h3 id="thumbnail-label">Thumbnail label<a class="anchorjs-link" href="#thumbnail-label"><span class="anchorjs-icon"></span></a></h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Button Button</p>
</div>
</div>
http://codeply.com/go/L1m3V7mvHb

Aligning quotation marks with bottom of row in Bootstrap 3?

I'm trying to create some nice looking blockquotes in Bootstrap by stacking some rows with quotes above and below the quotation, like so just to give you a rough example ( can be seen here (http://www.bootply.com/weEUvuQfw2 ). As seen in the bootply example, the left quotation mark hovers high above the quote, since its character is originally that high when used in a sentence. I imagine it's got to be something simple, but what can I do to get the left quote to hover at the bottom of the top left cell of this grid? setting a negative margin or padding doesn't seem to do it. Any ideas?
<div class="container">
<div class="row right">
<div class=" col-lg-3 ">
<font size="40">“</font>
</div>
<div class="col-lg-6 ">
</div>
<div class="col-lg-3 ">
</div>
</div>
<div class="row center">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl.
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row left">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
<font size="72">”
</font></div><font size="72">
</font></div><font size="72">
</font></div><!-- /.container -->
And CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}

Are you looking for something like so?
HTML:
<div class="container">
<div class="row right">
<div class=" col-lg-3 ">
<font size="40">“</font>
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row center">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl.
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row left">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
<font size="72">”
</font></div><font size="72">
</font></div><font size="72">
</font></div><!-- /.container -->
CSS:
.center {
text-align: center;
}
.right {
text-align: left;
margin-bottom: -20px;
}
.left {
text-align: left;
}
Here is a fiddle: http://jsfiddle.net/4g0gp5pp/

That's a lot of markup to create something really simple.
DEMO: http://jsbin.com/hadapo/1/edit
HTML:
<blockquote class="quotemarks">
<p>Words go here</p>
<footer>Someone</footer>
</blockquote>
CSS
.quotemarks:before,
.quotemarks:after {
text-align: center;
font-size: 60px;
line-height: 1;
}
.quotemarks:before {
content: "\201C";
position: relative;
bottom: -20px;
}
.quotemarks:after {
content: "\201D"
}
.quotemarks {
border: 0;
padding: 0;
text-align: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.quotemarks footer {
text-indent: -10px
}