I have been trying to make a portfolio website for myself.
But for 'My works' div when I apply the Bootstrap class, I am not getting the result as I am expected to get. The alignment of the div is not in a grid.
Here's how it shows up:
I am not able to fix this problem.
The HTML code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Issue is with columns used for a single row.
Note that, each row can have only 12 columns. But you are using multiple columns in a single row. so it doesn't work like that.
Refer this more details - https://getbootstrap.com/docs/4.0/layout/grid/
You can try enclosing two cards per each row (assuming you wanted to show twoo cards per row). see below code. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Related
I am stuck with a problem, I made a Contact Us page , it is properly working on desktop mode but when am trying to see in mobile view it is not responsive , can anyone help me to fix this error
This is the Contact Us page, I want its working on mobile view properly
Contact.html
<section id="contact">
<div class="row mt-5 mb-5">
<div class="col-6">
<div class="row text-white ">
<div class="col-6 ">
<div class="row ">
<div class="col-3 icon-fot">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Find Us</h3>
<p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-clock"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Working Hour</h3>
<p style="display: inline;">Mon-Fri : 8AM-5PM</p>
<p>Sat-Sun : 8AM-2PM</p>
</div>
</div>
</div>
<div class="col-6 ">
<div class="row">
<div class="col-3 icon-fot">
<i class="fas fa-phone-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Call Us</h3>
<p style="display: inline;">+123 456 7890</p>
<p>+123 456 7890</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-envelope"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Write To Us</h3>
<p style="display: inline;">Office#noise.com</p>
<p>Press#noise.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Name...">
</div>
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Email...">
</div>
</div>
<textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
<button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
</form>
</div>
</div>
</section>
Can you please check the below code? Hope it will work for you.
You need to use col-md-6 class instead of col-6 class in the parent column class like the below code.
<section id="contact">
<div class="row mt-5 mb-5">
<div class="col-md-6">
<div class="row text-white ">
<div class="col-6 ">
<div class="row ">
<div class="col-3 icon-fot">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Find Us</h3>
<p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-clock"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Working Hour</h3>
<p style="display: inline;">Mon-Fri : 8AM-5PM</p>
<p>Sat-Sun : 8AM-2PM</p>
</div>
</div>
</div>
<div class="col-6 ">
<div class="row">
<div class="col-3 icon-fot">
<i class="fas fa-phone-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Call Us</h3>
<p style="display: inline;">+123 456 7890</p>
<p>+123 456 7890</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-envelope"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Write To Us</h3>
<p style="display: inline;">Office#noise.com</p>
<p>Press#noise.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Name...">
</div>
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Email...">
</div>
</div>
<textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
<button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
</form>
</div>
</div>
</section>
I am having trouble showing the main scrollbar of the page on hover.
I was working on my portfolio and I have hidden the page scrollbar. I tried to show the scrollbar while hovering over the main container.
I am attaching my portfolio page link and my code below. Any kind of help will be applicable!
Please note I want it to be in pure CSS, don't want to use JS or jQuery
::-webkit-scrollbar
display: none;
width: 15px
background-color: #fff
::-webkit-scrollbar-thumb
display: none;
.main-div:hover ::-webkit-scrollbar
display: inline;
.main-div:hover ::-webkit-scrollbar-thumb
display: inline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<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">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<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">
</head>
<body>
<!-- Main Section Starts
======================== -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-4 col-sm-12 col-12">
<aside>
<div class="personal-info wow animated fadeInLeft">
<img src="assets/images/pp.jpg" alt="dp">
<p></p>
<div class="info">
<h2>Nazifa Rashid</h2>
<div id="typed-strings">
<h3><strong>Frontend Developer</strong></h3>
</div>
<span class="typed"></span>
</div>
<div class="icons">
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Freelance">Hire Me </a></button>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="bottom" title="Download">Download Resume</button>
</div>
</aside>
</div>
<div class="col-md-12 col-lg-8 col-sm-12 col-12">
<div class="main-div">
<!-- Slider Starts Here
======================= -->
<div class="slideshow-container">
<!-- About Section Starts
========================= -->
<div class="mySlides wow animated fadeInRight" id="about">
<div class="title">
<h3><span>a</span>bout Me</h3>
</div>
<p>
Hi, I am Nazifa Tasfia Rashid. I am a Frontend Developer at SJ Innovation. I have experience on working Wordpress Page Builders, Responsive email templates and Responsive PSD to Html converstion with Cross Browser Compatibility and well maintained coding standards.
</p>
<div class="info">
<div class="row">
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
</div>
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
</div>
</div>
<div class="icons">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="top" title="Download">Download Resume <i class="fas fa-long-arrow-alt-right"></i></button>
</div>
<!-- About Section Ends
======================= -->
<!-- Skills & Education Section Starts
====================================== -->
<div class="mySlides wow animated fadeInRight" id="SE">
<div class="title">
<h3><span>m</span>y skiils & education</h3>
</div>
<div class="row">
<div class="col-12">
<div id="skills">
<div class="row">
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col-6 text_">Html5</div>
<div class="col-6 text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar html progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">CSS3</div>
<div class="col text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar css progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">SASS</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar sass progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">Bootatrap 4</div>
<div class="col text-right ">95%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar bootstrap progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">jQuery</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar jquery progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">JavaScript</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar js progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">PHP</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar php progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">MySQL</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar db progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">C/C++</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar c progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="education">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-user-graduate"></i> University
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2014-2018</span>
<ul class="edu">
<li>
<h4>Leading University</h4>
</li>
<li>
<p>Bachelor Degree | Computer Science & Engineering</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-graduation-cap"></i> College
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2013</span>
<ul>
<li>
<h4>Scholarshome</h4>
</li>
<li>
<p>HSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-university"></i> School
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2011</span>
<ul>
<li>
<h4>Blue Bird School & College</h4>
</li>
<li>
<p>SSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skills & Education Section Ends
==================================== -->
<!-- Service Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="services">
<div class="title">
<h3><span>m</span>y services</h3>
</div>
<div class="services">
<div class="row">
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-html5" style="color: #DE4B25;"></i></div>
<h3>PSD To HTML</h3>
<p>I can convert any PSD to HTML. It will be user friendly and work accross every devices. I can also use any kind of HTML CSS framework with proper support of jQuery and plugins.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-mailchimp" style="color: rgb(80, 80, 80);"></i></div>
<h3>Email Template</h3>
<p>I will provide full responsive email templates that will support not only in browsers but also on gamil and outlook.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-wordpress" style="color: #207297;"></i></div>
<h3>Wordpress</h3>
<p>I can do wordpress customization and able to work with any kind of page builders. Also I'll try to keep it as simple as the admin can easily customize the site whenever needed.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-code" style="color: #816047"></i></div>
<h3>Clean & Optimized Code</h3>
<p>I'll write clean and optimized code and maintain proper coding structure and standard. I'll write proper commenting so that after me anyone can work on the code. It will also be seo friendly</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-firefox" style="color: #F86B0D;"></i></div>
<h3>Cross Browser Compatibility</h3>
<p>I'll write code that will work accross browsers.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-users" style="color: #F36B6D;"></i></div>
<h3>User Friendly</h3>
<p>I can build user friendly websites that will help users to experience the best quality and service of the website.</p>
</div>
</div>
</div>
</div>
<div class="process">
<div class="row">
<div class="col-12">
<h4>My Work Process</h4>
</div>
</div>
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-lightbulb"></i>
<p>idea</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-puzzle-piece"></i>
<p>concept</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-paint-brush"></i>
<p>design</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-cube"></i>
<p>develop</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-bug"></i>
<p>test</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-rocket"></i>
<p>lunch</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service Section Ends
========================= -->
<div class="mySlides wow animated fadeInRight">
</div>
<!-- Contact Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="contact">
<div class="title">
<h3><span>c</span>ontact me</h3>
</div>
<div class="row">
<div class="col-md-8 col-sm-12 col-12 col-lg-8">
<form>
<div class="form-group">
<input type="name" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Leave a Message"></textarea>
</div>
<button type="submit" class="btn btn-outline-success">Send <i class="fas fa-paper-plane"></i> </button>
</form>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-12">
<div class="personal-info">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
<div class="icons icons-contact">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
<!-- Contact Section Ends
========================= -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<br>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<!-- Slider Ends Here
===================== -->
</div>
</div>
</div>
</section>
<!-- Main Section Ends
====================== -->
</body>
</html>
Here is my portfolio link : https://nazifa22.github.io/Portfolio-2/
The answers I got was only for the div or a section, not for the whole page
Make scrollbars only visible when a Div is hovered over?
Add this CSS
.main-div{
overflow:hidden;
max-height:100vh;
}
.main-div:hover{
max-height:auto;
overflow:auto;
}
.main-div{
overflow:hidden;
max-height:100vh;
}
.main-div:hover{
max-height:auto;
overflow:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<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">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<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">
</head>
<body>
<!-- Main Section Starts
======================== -->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-4 col-sm-12 col-12">
<aside>
<div class="personal-info wow animated fadeInLeft">
<img src="assets/images/pp.jpg" alt="dp">
<p></p>
<div class="info">
<h2>Nazifa Rashid</h2>
<div id="typed-strings">
<h3><strong>Frontend Developer</strong></h3>
</div>
<span class="typed"></span>
</div>
<div class="icons">
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Freelance">Hire Me </a></button>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="bottom" title="Download">Download Resume</button>
</div>
</aside>
</div>
<div class="col-md-12 col-lg-8 col-sm-12 col-12">
<div class="main-div">
<!-- Slider Starts Here
======================= -->
<div class="slideshow-container">
<!-- About Section Starts
========================= -->
<div class="mySlides wow animated fadeInRight" id="about">
<div class="title">
<h3><span>a</span>bout Me</h3>
</div>
<p>
Hi, I am Nazifa Tasfia Rashid. I am a Frontend Developer at SJ Innovation. I have experience on working Wordpress Page Builders, Responsive email templates and Responsive PSD to Html converstion with Cross Browser Compatibility and well maintained coding standards.
</p>
<div class="info">
<div class="row">
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
</div>
<div class="col-12 col-md-6 col-sm-12 col-lg-6">
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
</div>
</div>
<div class="icons">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
<button type="button" class="btn btn-outline-success" data-toggle="tooltip" data-placement="top" title="Download">Download Resume <i class="fas fa-long-arrow-alt-right"></i></button>
</div>
<!-- About Section Ends
======================= -->
<!-- Skills & Education Section Starts
====================================== -->
<div class="mySlides wow animated fadeInRight" id="SE">
<div class="title">
<h3><span>m</span>y skiils & education</h3>
</div>
<div class="row">
<div class="col-12">
<div id="skills">
<div class="row">
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col-6 text_">Html5</div>
<div class="col-6 text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar html progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">CSS3</div>
<div class="col text-right">98%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar css progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<div class="row">
<div class="col text_">SASS</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar sass progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">Bootatrap 4</div>
<div class="col text-right ">95%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar bootstrap progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">jQuery</div>
<div class="col text-right">90%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar jquery progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">JavaScript</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar js progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">PHP</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar php progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">MySQL</div>
<div class="col text-right">60%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar db progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row">
<div class="col text_">C/C++</div>
<div class="col text-right">50%</div>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar c progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="education">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-user-graduate"></i> University
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2014-2018</span>
<ul class="edu">
<li>
<h4>Leading University</h4>
</li>
<li>
<p>Bachelor Degree | Computer Science & Engineering</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-graduation-cap"></i> College
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2013</span>
<ul>
<li>
<h4>Scholarshome</h4>
</li>
<li>
<p>HSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-university"></i> School
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>
<span>2011</span>
<ul>
<li>
<h4>Blue Bird School & College</h4>
</li>
<li>
<p>SSC | Science</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skills & Education Section Ends
==================================== -->
<!-- Service Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="services">
<div class="title">
<h3><span>m</span>y services</h3>
</div>
<div class="services">
<div class="row">
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-html5" style="color: #DE4B25;"></i></div>
<h3>PSD To HTML</h3>
<p>I can convert any PSD to HTML. It will be user friendly and work accross every devices. I can also use any kind of HTML CSS framework with proper support of jQuery and plugins.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-mailchimp" style="color: rgb(80, 80, 80);"></i></div>
<h3>Email Template</h3>
<p>I will provide full responsive email templates that will support not only in browsers but also on gamil and outlook.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-wordpress" style="color: #207297;"></i></div>
<h3>Wordpress</h3>
<p>I can do wordpress customization and able to work with any kind of page builders. Also I'll try to keep it as simple as the admin can easily customize the site whenever needed.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-code" style="color: #816047"></i></div>
<h3>Clean & Optimized Code</h3>
<p>I'll write clean and optimized code and maintain proper coding structure and standard. I'll write proper commenting so that after me anyone can work on the code. It will also be seo friendly</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fab fa-firefox" style="color: #F86B0D;"></i></div>
<h3>Cross Browser Compatibility</h3>
<p>I'll write code that will work accross browsers.</p>
</div>
</div>
<div class="col-12 col-md-4 col-sm-6 col-lg-4">
<div class="service-section">
<div><i class="fas fa-users" style="color: #F36B6D;"></i></div>
<h3>User Friendly</h3>
<p>I can build user friendly websites that will help users to experience the best quality and service of the website.</p>
</div>
</div>
</div>
</div>
<div class="process">
<div class="row">
<div class="col-12">
<h4>My Work Process</h4>
</div>
</div>
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-lightbulb"></i>
<p>idea</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-puzzle-piece"></i>
<p>concept</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-paint-brush"></i>
<p>design</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-cube"></i>
<p>develop</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-bug"></i>
<p>test</p>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-4 col-12">
<div class="wrapper">
<div class="icon">
<i class="fas fa-rocket"></i>
<p>lunch</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service Section Ends
========================= -->
<div class="mySlides wow animated fadeInRight">
</div>
<!-- Contact Section Starts
=========================== -->
<div class="mySlides wow animated fadeInRight" id="contact">
<div class="title">
<h3><span>c</span>ontact me</h3>
</div>
<div class="row">
<div class="col-md-8 col-sm-12 col-12 col-lg-8">
<form>
<div class="form-group">
<input type="name" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Leave a Message"></textarea>
</div>
<button type="submit" class="btn btn-outline-success">Send <i class="fas fa-paper-plane"></i> </button>
</form>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-12">
<div class="personal-info">
<h5>Date of birth : <span>22 October</span></h5>
<h5>Email : <span>nazifarashid1822#gmail.com</span></h5>
<h5>Address : <span>House #2, abc street,
Bangladesh</span></h5>
<h5>Phone : <span>+123-4567-89</span></h5>
</div>
<div class="icons icons-contact">
<span>Follow Me <i class="fas fa-angle-double-right"></i> </span>
<a data-toggle="tooltip" data-placement="left" title="Facebook" href="https://www.facebook.com/nnazeefaa" target="_blank" style="color: #395599;"><i class="fab fa-facebook"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/NazifaRashid2" target="_blank" class="color: #00A7E7;"><i class="fab fa-twitter"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/_nazifa_rashid/?hl=en" target="_blank" style="color: #A4358F;"><i class="fab fa-instagram"></i></a>
<a data-toggle="tooltip" data-placement="top" title="Linkedin" href="https://www.linkedin.com/in/nazifa-rashid-681155164/" target="_blank" style="color: #0271AE;"><i class="fab fa-linkedin"></i></a>
<a data-toggle="tooltip" data-placement="right" title="Github" href="https://github.com/nazifa22?tab=repositories" target="_blank" style="color: #222;"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
<!-- Contact Section Ends
========================= -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<br>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<!-- Slider Ends Here
===================== -->
</div>
</div>
</div>
</section>
<!-- Main Section Ends
====================== -->
</body>
</html>
I'm a student. And I have used Bootstrap 3.3.7 and after moved to v4.1. In this version, columns are not floating automatically to right. So I used d-inline-block class. I created 4 blocks with 3 of columns for each. The number of columns in a row is equal to 12. Then the last column jumps to the new line instead of wrap to the previous column. But this code works fine with Bootstrap 3.3.7. Also, I used 2 columns just for one block, and when the number of columns is smaller than 12, there is no problem. I couldn't find any proper solution on google. Please help. Thank you.
Example:
https://jsfiddle.net/EshanRajapakshe/3aeaeohb/
My code is:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="col-lg-12 col-md-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
Wrap your .cols inside a .row like this
<div class="row">
<div class="col-lg-6">6 cols</div>
<div class="col-lg-6">6 cols</div>
</div>
Also remove the d-inline-block class from cols.
In your particular case:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
</div>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Also added the class img-fluid to imgs so it won't be bigger than its container.
Bootstrap-v4 Grid system Docs
Here is the updated fiddle link
I edited ur html, removed un necessary classes.
Also if u want all columns to be of same size on all devices, u only need one col-{number} class
Also there is no col-xs-{class} in bootstrap 4. Instead of that, use col-{number}
<section class="popular-templates-section">
<div class="container-fluid">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row m-0">
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
You are facing issues basically because of the improper semantics of Bootstrap grid used by you. Find below the corrected code, it will help for sure.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="Akash Kumar">
<meta name="url" content="http://akashshivanand.com">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.blue {
padding: 5px;
background: blue;
}
.black {
padding: 5px;
background: black;
}
</style>
<title> by EshanRajapakshe</title>
</head>
<body>
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I'm currently struggling to figure out why the navigation tabs, do not scroll to the specified sections for one page site. Initially I assumed that the issue may have been result of simple syntax error, but from my perspective it seems perfectly fine. Below I have included minimal copy of code from my index.html. I would really appreciate, if some could let me know what the problem & solution could be. Thanks in advance.
<!-- Navigation -->
<header class="header scrolling-header">
<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container clearfix">
<a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-navicon"></i>
</a>
<a class="navbar-brand scroll" href="index.html">
<img class="normal-logo " src="img/logo.png" alt="logo" />
<img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" />
</a>
<div class="right-nav-block pull-right clearfix">
<div class="navbar-collapse collapse floated" id="navbar-collapse">
<ul class="main-menu nav navbar-nav clearfix navbar-with-inside vcenter">
<li class="">Services
</li>
<li class="">Work
</li>
<li class="">About
</li>
<li class="">Quote
</li>
<li class="">
Contact
<div class="wrap-inside-nav">
<div class="inside-col">
<ul class="inside-nav">
<li>Contact 1
</li>
<li>Contact 2
</li>
<li>Contact 3
</li>
</ul>
</div>
</div>
</li>
<li class=""><i class="fa fa-twitter"></i>
</li>
<li class=""><i class="fa fa-facebook"></i>
</li>
</ul>
<ul class="nav navbar-nav hidden-xs clearfix vcenter">
<li>
<a href="#" class="toggle-menu-button">
<div class="toggle-menu-button-icon">
</div>
</a>
</li>
<li class="no-hover">call us 1.800.12345
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="wrap-fixed-menu" id="fixedMenu">
<div class="top-items">
<a href="blog.html" class="top-menu-item menu-item">
<span class="subtitle">All The Latest</span>
<span class="title">Blog</span>
</a>
<a href="portfolio.html" class="top-menu-item menu-item">
<span class="subtitle">Awesome</span>
<span class="title">Portfolio</span>
</a>
</div>
<div class="bottom-items">
<a href="contact.html" class="bottom-menu-item menu-item">
<span class="subtitle">We Are Designers</span>
<span class="title">Contacts</span>
</a>
<div class="bottom-menu-item menu-item contact-info">
<div class="row">
<div class="col-md-12">
<i class="fa fa-home"></i>
<label>ADDRESS</label>
<p class="vcenter">746 Roberts Road Findlay, OH 45840</p>
</div>
<div class="col-md-12">
<i class="fa fa-phone"></i>
<label>PHONE</label>
<p class="vcenter">+201 126 216 88</p>
</div>
<div class="col-md-12">
<i class="fa fa-envelope"></i>
<label>EMAIL</label>
<p class="vcenter">support#CreativeBrick.com</p>
</div>
</div>
</div>
</div>
</div>
</header>
<!--./navigation -->
<!-- Slider header -->
<section class="section-header-slider">
</section>
<!-- Section intro -->
<section class="section-intro blue-dark ">
<div class="container dark-content">
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
</div>
<div class="col-md-3 scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-scale="1.5" data-opacity="0">
<div class="arrow hidden-sm hidden-xs">
<img src="img/arrow.png" alt="" />
</div>
<div class="intro-title">Intro</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="intro-text">
</div>
<div class="under-intro-text">
</div>
</div>
</div>
</div>
</section>
<!-- Section intro 2 -->
<section class="section-intro-2 ">
<div class="container">
<div class="row">
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section Services -->
<!-- ========================== -->
<section class="section-services">
<div class="container">
<div class="section-heading">
<div class="section-subtitle">creating awesomeness</div>
<div class="section-title">services we provide</div>
<div class="sep-element"></div>
</div>
</div>
<div class="wrap-services-tabs">
<div class="wrap-tabs">
</div>
<div class="wrap-tabs-content top-arrow-effect">
<div class="container">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="support">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="responsive">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="-400">
<img src="img/sections/tab-image-1.png" alt="" />
</div>
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="400">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="analytics">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-6">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
<div class="designations clearfix">
<div class="last-year"><span></span>last year</div>
<div class="this-year"><span></span>this year</div>
</div>
</div>
<div class="col-md-6">
<div class="graph-line" id="graph-line3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="customizable">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="multipurpose">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-purchase orange-dark">
<div class="container dark-content">
<div class="row">
<div class="col-md-2 col-sm-3 text-right logo-block">
<img src="img/logo.png" alt="" />
<div>Creative Agency</div>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-6">
<h3 class="bold">Drop us a line if you’d like to work with us</h3>
<p>We’re always looking for new talent so join our team now</p>
</div>
<div class="col-md-2 col-sm-3 text-right">
get in touch
</div>
</div>
</div>
</section>
<section class="section-skills">
<div class="feature-section dark dark-strong">
<div class="container dark-content">
<div class="row">
<div class="col-md-4">
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>01</span>Generate Ideas</h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item feature-divider text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>04</span>Launch & Deliver</h5>
<p>
TEXT HERE
</p>
</div>
</div>
<div class="col-md-4">
<div class="wrap-feature-content">
<img src="img/feature-background.png" alt="" />
<div class="feature-content">
<img src="img/logo-free.png" alt="" />
<div class="feature-text">
THE PROCESS
<span>We Follow</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Preparing Briefs<span>02</span></h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item right-feature-item feature-divider animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Project Development<span>03</span></h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section trust -->
<!-- ========================== -->
<section class="section-trust-us clearfix">
<div class="trus-image">
<img src="img/sections/section-trust-us-image.png" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-6 col-md-6">
<div class="section-heading">
<div class="section-title">why trust us</div>
<div class="section-subtitle">creating awesomeness</div>
</div>
</div>
<div class="col-md-offset-6 col-md-6" data-wow-duration="2s">
<div id="accordion-one" role="tablist" aria-multiselectable="true">
<div class="panel panel-default panel-alt-two">
<div class="panel-heading active" role="tab" id="headingOne">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-one" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-bulb"></i>
</span>
</span>
TEXT HERE
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingTwo">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-rocket"></i>
</span>
</span>
<b>TEXT HERE</b>
</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingThree">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
<b>TEXT HERE</b>
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-badge"></i>
</span>
</span>
</a>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
</div>
<!--panel-->
</div>
<!--accordion-->
</div>
</div>
</div>
</section>
You are missing id="works-section", etc.
The way it works is you have a page anchor like
Some Title
Then later in the markup, where you want to the link to jump to, you place a corresponding ID, like:
<section id="someID">…</section>.
Makes sense?
I'm currently going through my site testing it at present mobile / desktop is fine, the issue I have is with ipad when viewing the search page on an ipad the tiles are squashed up against the left i.e 1 pic per row, ideally I would like to see two if not three in a row but I cannot get it to work as expected, the HTML mark up for the page is as follows:
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-5">
<div class="shop-filters" style="display: block;">
<form action="/search/members" method="post">
<div class="widget">
<h5 class="widget-title font-alt">Filter</h5>
</div>
Filter stuff goes here
</form>
</div>
</div>
#*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*#
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/1/new-to-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/mhcoeigrttdgemwjuig7" alt="Atkinson1988" />
</a>
<div class="footer">
<a href='/member/1/new-to-melbourne'>Atkinson1988</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, St kilda road<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/4/female-2-asian-male-tp'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/t4leodsoxa0h5zaqomt7" alt="Female2" />
</a>
<div class="footer">
<a href='/member/4/female-2-asian-male-tp'>Female2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Docklands<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
<span class="best-seller">Online</span>
</div>
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/j6xnf3lu2gffviv1qkw3" alt="Tester123" />
</a>
<div class="footer">
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>Tester123</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/2/i-am-a-female-from-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/hyssjfqilmyntk9gvi4r" alt="Female1" />
</a>
<div class="footer">
<a href='/member/2/i-am-a-female-from-melbourne'>Female1</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/3/male-2-lookin-for-male-training-partner'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="Male2" />
</a>
<div class="footer">
<a href='/member/3/male-2-lookin-for-male-training-partner'>Male2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Southbank<br /></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row text-center">
<div class="pagination-container"><ul class="pagination"><li class="active"><a>1</a></li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The above is rendered by doing the following withing MVC Razor view:
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-4">
<div class="shop-filters" style="display: block;">
#using (Html.BeginForm("Search", "Members", FormMethod.Post))
{
<div class="widget">
<h5 class="widget-title font-alt">My Filter</h5>
</div>
#Html.AntiForgeryToken()
}
</div>
</div>
#*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*#
<div class="col-lg-9 col-md-9 col-sm-8 ">
<div class="row">
#if (ViewBag.ListOfUsers.Count > 0)
{
foreach (var t in ViewBag.ListOfUsers)
{
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
#if (t.LoggedIn)
{
<span class="best-seller">Online</span>
}
</div>
<a href='#Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>
#if (!string.IsNullOrWhiteSpace(t.PhotoId))
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/#t.PhotoId" alt="#t.Username" />
}
else
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="#t.Username" />
}
</a>
<div class="footer">
<a href='#Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>#t.Username</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> #t.Location<br /></span>
</div>
</div>
</div>
}
<div class="clearfix"></div>
<div class="row text-center">
#Html.PagedListPager((IPagedList)ViewBag.ListOfUsers, page => Url.Action("Search", "Members", new { page }))
</div>
}
else
{
<div class="col-sm-8 col-sm-offset-2 text-center">
<p>
Sorry, we couldn't find anyone within the criteria you provided.
</p>
</div>
}
</div>
</div>
</div>
</div>
</div>
UPDATE
This is what it currently looks like using the above
My initial guess, without seeing a live demo, is that only one is being shown per row because of col-sm-6. As bootstrap has a 12 column layout if there is any padding or margin applied to the objects 6+6+padding is greater than 12 and will push it to the next row. My understanding is that there should be a "div.row" for each new row. Hope that helps.