Code is messing up second row using col in bootstrap - html

Will someone please tell me what I am doing wrong in this code? I have a contacts page that uses the same code and just loops with a query. But for some reason the second row has a huge gap as if theres something blocking it.
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<!-- Insert Loop Here --><cfoutput query="grab_contacts">
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=#grab_contacts.employee_number#">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
<cfif len(grab_contacts.phone_extension)>
<div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
</cfif>
</div>
</div>
<div class="col-sm-8">
<h4><strong>#grab_contacts.firstname# #grab_contacts.lastname#</strong></h4>
<h5>
<strong>#grab_contacts.position#</strong><br><br>
<i class="fa fa-map-marker"></i> #grab_contacts.department# Department<br>
MCTC #grab_contacts.branch# Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here --></cfoutput>
</div>
</div>
Rendered HTML
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<!-- Insert Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4854</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4814</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4856</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>David Brierton</strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>Associate III</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>Associate I</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4886</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Operations Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/jpg">
<div class="m-t-xs font-bold">Extension 4866</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>QA Support Analyst</strong><br><br>
<i class="fa fa-map-marker"></i> QA Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-lg-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong></strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Desoto Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
</div>
</div>


The problem is with this section:
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/#grab_contacts.picture#">
<cfif len(grab_contacts.phone_extension)>
<div class="m-t-xs font-bold">Extension #grab_contacts.phone_extension#</div>
</cfif>
</div>
</div>
You need to wrap new column sets in rows. You have your boxes in a row wrapper, but the content of the boxes is missing the row wrapper for your columns, so as you loop, Bootstrap is not going to apply the correct layout/positioning styles to the columns inside the boxes. Basically, just wrap your nested columns for the box content in a row class.


You should really only have 3 'col-lg-4' inside the .row div which adds up to 12. Include the <div class="row"></div> in your loop. See snippet added (changed the col-lg-4 to col-xs-4 for effect)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<!-- Insert Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=266">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/amraoui_al.jpg">
<div class="m-t-xs font-bold">Extension 4854</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Ali Amraoui</strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=305">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/adams_br.jpg">
<div class="m-t-xs font-bold">Extension 4814</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Brianna Adams</strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=192">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/brierton_da.jpg">
<div class="m-t-xs font-bold">Extension 4856</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>David Brierton</strong></h4>
<h5>
<strong>IT Support Technician</strong><br><br>
<i class="fa fa-map-marker"></i> IT Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
<div class="row">
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=166">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/alicky_he.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Heather Alicky</strong></h4>
<h5>
<strong>Associate III</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=286">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/ackles_je.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Jennifer Ackles</strong></h4>
<h5>
<strong>Associate I</strong><br><br>
<i class="fa fa-map-marker"></i> CSAD Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=110">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/alfonso_ki.jpg">
<div class="m-t-xs font-bold">Extension 4886</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Kim Alfonso</strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Operations Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
<div class="row">
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=61">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/brammer_sa.jpg">
<div class="m-t-xs font-bold">Extension 4866</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Sara Brammer</strong></h4>
<h5>
<strong>QA Support Analyst</strong><br><br>
<i class="fa fa-map-marker"></i> QA Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
<div class="col-xs-4">
<div class="contact-box">
<a href="../profiles/profile.cfm?employee_number=223">
<div class="col-sm-4">
<div class="text-center">
<img alt="image" class="img-circle m-t-xs img-responsive" src="../images/albritton_sh.jpg">
<div class="m-t-xs font-bold">Extension 4881</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>Shannon Albritton</strong></h4>
<h5>
<strong>OPS</strong><br><br>
<i class="fa fa-map-marker"></i> Desoto Department<br>
MCTC Desoto Branch<br>
</h5>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
<!-- End Loop Here -->
</div>
</div>
You should review the bootstrap css page to ensure you have the right html structure when building your grids.

Related

Why is my Bootstrap div Alignment not working?

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>

Bootstrap 3: How to precisely center text under a circular image?

I'm using bootstrap 3, the text is not perfectly aligned under a circular image, this is more obvious on different screens and in bootstrap modals and in different languages, I don't want to start adding margin-left because if I do that, I'll be faulty on some screen. Is there a better way?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>

The easy fix to your code is just to add text-center class to all col-xs-* classes. That will center inner images and text inside the col-xs-* wrappers. Note I have added some background color to help visualize the effect.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>

You can add a custom class .center to your outermost .container div. This will align the image and text to center using text-align: center;.
.center {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container center">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>

You could use only one row and then center the image and the text.
<div class="col-xs-3">
<div class="row text-center">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
<br>
<span class="country text-center"> Arabic </span>
</div>
</div>
Update: you can still use the columns... I've added them to the short version of your example

Flexbox
CSS
display : flex;
justify-content : center;
align-items : center

Bootstrap responsive div with order

i have 3 div. In PC, i want to show it same the picture. But when responsive, i want to show with order 1 -> 2 -> 3. How can i do it, please me
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>1
</div>
</div>
<div class="portlet-body">
</div>
</div>
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>3
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet blue-hoki box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>2</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
</div>

Use bootstrap classes properly.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>1
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet blue-hoki box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>2</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="portlet yellow-crusta box">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>3
</div>
</div>
<div class="portlet-body">
</div>
</div>
</div>
</div>

How do I make the navigation "scrollTo" to sections?

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?

bootstrap 3 ipad issue

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.