fullpage.js is not able to scroll - html

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.

Related

Can't seem to get my bootstrap grid/flex-boxes right

I'm using Bootstrap 4 and I'm trying to build a website for a client but I can't seem to get the grid to behave/expand as I want it to.
Here's a rough sketch of what I'm trying to achieve.
Desktop Layout Sketch:
Mobile Layout Sketch:
Here's a code snippet that I currently have that works on Desktop sizes but completly breaks down when the size goes mobile.
<div class="container">
<div class="row">
<div class="col-sm">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="d-flex main-desc flex-grow-0">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus in nisl
tempor, porttitor quam eu, lacinia nibh. Etiam
interdum est magna, vel ullamcorper arcu
dignissim sit amet. Nullam commodo elementum
felis, id congue dui facilisis sit amet. </div>
</div>
<div class="col-sm hidden-xs">
<img src="assets/vectors/graphic.svg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 style="padding-left: 30px;">
<button type="button" class="learn-more btn btn-outline-primary btn-block btn-lg">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
</div>
<div class="row">
<div class="socials col-xs-6"></div>
<div class="email-form col-xs-6"></div>
</div>
Any help is appreciated.
Thanks.

Your code had tags and double quotes missing... to get the effect you want, you'd have to insert (either "the image" or "the description & buttons") twice and toggle it at the appropriate breakpoint...
code snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="col-12 col-md-6 d-block d-sm-block d-md-none" style='border:1px solid pink'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
<div class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisl tempor, porttitor quam eu, lacinia nibh. Etiam interdum est magna, vel ullamcorper arcu dignissim sit amet. Nullam commodo elementum felis, id congue dui facilisis sit amet.
</div>
<button type="button" class="learn-more btn btn-primary ">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
<div class="col-12 col-md-6 d-none d-sm-none d-md-block" style='border:1px solid red'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>

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

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>

How to remove whitespace on css

How to remove this whitespace ->
I want to make that two image in the bottom to move up like the one on the right.
I think I shouldn't use col-md-* but still dont get the idea.
.portfolio {
}
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="portfolio col-md-10-col-md-offset-1">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>Wongilang.xyz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>Wongilang.xyz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p>
</div>
</div>
</div>
</div>
</div>

It seems like your images have different height so you can see the white space below the first image and second image aren't the same and the last 2 images appear right after the 4th image (intanrahmadhani.web.id).
You can either resize/crop these images to make sure the height is consistent or apply a fixed height to the image container.
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.portfolio-item > a:link,
.portfolio-item > a:visited {
display: block;
height: 300px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="portfolio">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x650" alt="">
<h3>Wongilang.xyz</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x450" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x250" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x550" alt="">
<h3>Intanrahmadhani.web.id</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x350" alt="">
<h3>E-Monev SD/SMP/SMA Muhammadiyah DIY</h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="http://placehold.it/450x750" alt="">
<h3>Wongilang.xyz</h3>
<p>...</p>
</div>
</div>
</div>

Bootstrap columns re-sizing to single row when it shouldn't

I am teaching myself how to use Bootstrap columns, ran into a small problem.
When I resize my browser to the smallest size possible (or even halfway through, really) to make the css kick in the columns, instead of resizing to fit in 4 images for row it just becomes a single string of images like so:
Here is my html, I am using bootstrap 3. Any help would be appreciated.
<section class="container" style="padding-bottom: 60px;">
<div class="row">
<div class="col-md-6">
<h2>Passion, precision and simplicity</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor
convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa,
sodales tempor convallis et, iaculis ac massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
<strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque.
Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis
et, iaculis ac massa.
</p>
<!-- divider -->
<div class="divider styleColor">
<i class="fa fa-leaf"></i>
</div>
<!-- brands -->
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
</div>
</div>
</div>
</section>

Use the smaller breakpoints like col-sm-* to make the vertical stacking happen at a narrower width. Or, you can use col-xs-* to make the columns never stack.
http://bootply.com/4JKga3vGjl
Note: Contrary to popular opinion, there's no problem having columns that total more than 12 units in a single row. It simply causes the row to wrap. From the docs (http://getbootstrap.com/css/#grid)..
"If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line"

I suggest you to take a look at the doc.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
And in a row, you should have only, on total, the number 12.
Like 4 times col-md-3, or 2x4+2x2, etc
In your case, that could be something like this.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<section class="container" style="padding-bottom: 60px;">
<div class="row">
<div class="col-md-6">
<h2>Passion, precision and simplicity</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor
convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa,
sodales tempor convallis et, iaculis ac massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
<strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque.
Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis
et, iaculis ac massa.
</p>
<!-- divider -->
<div class="divider styleColor">
<i class="fa fa-leaf"></i>
</div>
<!-- brands -->
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
</div>
</div>
</div>
</section>

It seems that you need to add col-sm-3 and col-xs-3 in addition to col-md-3, to handle your columns in lower sizes.
Check this bootply.

you are using the classes "col-md-..." this targets medium devices.
To set up your layout for smaller devices use "col-xs"
Note, that you can use both "col-xs-12 col-md-6" will display the element in 100% width on small devices and 50% width on medium devices and up.
In the bootstrap grid system, there are only 12 colums per row.
you are trying to use only 12 per row.
check out http://getbootstrap.com/css/#grid-example-basic

Bootstrap 3 div display block

Wanted to build something like this: http://s29.postimg.org/n2me4y65z/img.png
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
</div>
<div class="col-md-6">
...
</div>
<img src="test.png" class="img-responsive"/>
</div>
</div>
issue 1
Cause the div2 stay below the div 1. (display: block does not work)
issue 2
Make the image always stay on the right side. (then disappearing "hidden-xs")
If someone is able to help ;/

You don't need the outer div with the full width, Bootstrap automatically assumes a 12-column layout. Just make sure you're enclosing everything within a div with a class of "container". You can set the positioning using floats.
<div class="container">
<div class="row">
<div id="div1" class="col-md-8" style="{float:left;}">
Div 1 Text
</div>
<div id="div2" class="col-md-4" style="{float:right;}">
<img src="test.png" class="img-responsive"/>
</div>
<div id="div3" class="col-md-8" style="{float:left;}">
Div 2 Text
</div>
</div>
</div>

<div class="row">
<div class="col-md-8">
<div>Div 1 text</div>
<div>Div 2 text</div>
</div>
<div class="col-md-4">
<img src="test.png" class="img-responsive"/>
</div>
</div>
Add the bootstrap's affix or responsive-helpers to your image if you need to pin it on scroll on hide on small -resolution devices.

How about using Media object or Media list if it fits your case?
<div class="media">
<a class="pull-right" href="#">
<img class="media-object hidden-xs" src="//placehold.it/200x150" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
Bootstrap3 - Media object
You can play around with this sample here: http://bootply.com/101967