white space bottom right in mobile view in chrome - html

How to disable container class just in mobile view ?


It looks like you have some closing tags in your code that weren't really closing anything. Even in JSFiddle those tags were displayed in red.
When I removed them like in here, the white space between the footer and the copyright dissappeared. Not sure if that's what you wanted but it's generally not a good idea to have unnessecary closing tags.
<meta charset="UTF-8">
<title>IDEO</title>
<link href="files/css/style.css" rel="stylesheet" type="text/css">
<link href="files/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="files/img/head.png" rel="shortcut icon">
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="files/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<div id="header-container" class="menu-cursor navbar navbar-default navbar-fixed-top">
<p class="menu-logo">Logo</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
Home
About
Services
Clients
Contact
<ul class="small-menus">
<li>SampleSampleSampleSampleSample</li>
</ul>
</div>
</div>
<div class="container-fluid slider-section">
<div class="slider col-lg-8 col-md-8 col-sm-12">
<h1 class="slider-text-typewriting"> </span> </h1>
<h1 class="slider-text-typewriting"> </span> </h1>
<h1 class="slider-text-typewriting"> </span> </h1>
</div>
<div class="col-lg-3 col-md-3 slider-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p></p>
<p class="HomeHeader-ContactLink">Contact Us</p>
</div>
</div>
<ul class="Bands">
<div class="Band ThreeRichTilesBand WithinRowsOfBands">
<div class="container">
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Name</span></h3>
<h2 class="RichTile-Title"><span>Sample heading text </span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Name</span></h3>
<h2 class="RichTile-Title"><span>Sample heading text </span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Blog Name</span></h3>
<h2 class="RichTile-Title"><span>Sample heading text </span></h2>
</div>
</div>
</div>
<!--</div>
<div class="container">-->
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 102 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Name</span></h3>
<h2 class="RichTile-Title"><span>Sample heading text </span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 114 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Name</span></h3>
<h2 class="RichTile-Title"><span>Sample heading text </span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 127 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Blog Name</span></h3>
<h2 class="RichTile-Title"><span>Sample heading text </span></h2>
</div>
</div>
</div>
</div>
</div>
<div class="Band FeaturedTileBand FeaturedTileBand--left">
<div class="FeaturedTileBand-ImageContainer">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog-main.jpg);"></div>
</div>
<div class="FeaturedTileBand-Content">
<div class="Grid">
<div class="FeaturedTileBand-PlaceholderContainer">
<div class="FeaturedTileBand-Placeholder"></div>
</div>
<div class="FeaturedTileBand-MainContainer">
<div class="FeaturedTileBand-Main">
<div class="FeaturedTileBand-MainContent">
<h3 class="FeaturedTileBand-TypesRow">
<span class="FeaturedTileBand-Type">questions</span><!-- react-text: 146 --><!-- /react-text -->
</h3>
<h2 class="FeaturedTileBand-Title"><span>Lorem Ipsum is simply dummy text of the printing </span></h2>
<div class="FeaturedTileBand-Divider"></div>
<p class="FeaturedTileBand-Dek">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<a class="Button" href="#">See our response</a>
</div>
<!-- react-text: 153 --><!-- /react-text -->
</div>
</div>
</div>
</div>
</div>
<div class="container home-four">
<h2>Sample Heading</h2>
<ul>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
</ul>
</div>
<div class="container home-five">
<div>
<h2>Sample Heading</h2>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Band PairTilesBand lightBlue WithinRowsOfBands">
<div class="Grid">
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-MainContainer">
<!-- react-text: 162 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span>Lorem Ipsum is simply dummy text of the printing</span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--medium RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 175 --><!-- /react-text -->
<h3>Case StudyNames</h3>
<h2 class="RichTile-Title"><span>Lorem Ipsum is simply dummy text</span></h2>
<p class="more-link float-right">More <i class="fa fa-arrow-right"></i></p>
</div>
</div>
</div>
</div>
</div>
<div class="Band ThreeRichTilesBand WithinRowsOfBands">
<div class="Grid">
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 190 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span>Lorem Ipsum is simply dummy </span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 203 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study </span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span>Lorem Ipsum is simply dummy text. </span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 216 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span>Lorem Ipsum is simply dummy text. </span></h2>
</div>
</div>
</div>
</div>
</div>
</ul>
<!--FOOTER-->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-lg-4 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> </p>
<p><i class="fa fa-phone"></i> </p>
<p><i class="fa fa-envelope"></i> E-mail : </p>
</div>
<div class="col-md-2 col-sm-6 col-lg-4 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li> Career</li>
<li> Privacy Policy</li>
<li> Terms & Conditions</li>
<li> Client Gateway</li>
<li> Ranking</li>
<li> Case Studies</li>
<li> Frequently Ask Questions</li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-lg-4 paddingtop-bottom">
<form action="" method="post">
<div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" id="" name="" placeholder="your#email.com" class="form-control" style="width:200px;">
</div>
<br />
<input type="submit" class="btn btn-info" value="Subscribe Now!" />
</form>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
</div>
<!--footer start from here-->
<!--footer start from here-->
<!--Pulling Awesome Font -->
<div class="copyright">
<div class="container" style="text-align: center;">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><i class="fa fa-rss"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
<div class="container" style="text-align: center;">
<div class="col-md-12">
<p>© 2016 -</p>
</div>
</div>
</div>
<script src="files/js/index.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>

Related

how can I align brief text below image?

I am trying to align my demo text below my image. I am currently using bootstrap, but how can I do align this below my image and ::after between divs an icon > layout
<section>
<h2 class="main-title">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Test process</font></font>
</h2>
<div class="container demo">
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
</div>
</section>

Firstly you are using very wrong Bootstrap.
Please research how to use container, row, flex and column on Bootstrap. Check this here. Secondly, always use separate divs in col.
That's my snippet check this and please that you preview full page.
.icon img {
margin-top: 10px;
}
.details h2 {
font-weight: 400;
font-size: 25px;
color:#515f7f;
}
.details p {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<title>arg0-container</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<section class="mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
</div>
</div>
</section>
</body>
</html>

Div's are overlapping each other vertically (Bootstrap)

I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.

I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.

Bootstrap: Container is smaller than its columns, they cause an overflow

I have an attached background image on the container, but it only goes with like half the columns and then the columns overflow and the bg image stops.
i tried min-height
the 2 columns are in a container and the columns contain multiple rows
i don't understand why on earth the container is not growing with the columns
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body>
<div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url("projektberge.png");">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
Button
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-faded text-center">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="attached" style="background-image: url("FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg");">
<div class="h-100">
<div class="container-fluid w-100">
<div class="row h-100">
<div class="col-md-8">
<div class="row" style="height:100%">
<div class="col-md-2 h-100 bg-primary" style="height:100%">
<h1 class="">Summary</h1>
</div>
<div class="col-md-10 h-100">
<div class="row ">
<div class="jumbotron jumbotron-fluid w-100">
<div class="container">
<h1 class="display-3">Jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row bg-primary">
<div class="col-md-6 bg-secondary">
<img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
<div class="col-md-6 py-3">
<h1 class="">Heading</h1>
<p class="">Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary"></div>
</div>
<div class="row">
<div class="col-md-12 bg-primary">
<div class="container">
<header class="page-header">
<h1>Dark Responsive Timeline with Bootstrap</h1>
</header>
<ul class="timeline">
<li>
<div class="tldate">Apr 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Surprising Headline Right Here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
</div>
<div class="tl-body">
<p>Lorem Ipsum and such.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Breaking into Spring!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
</div>
<div class="tl-body">
<p>Hope the weather gets a bit nicer...</p>
<p>Y'know, with more sunlight.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Mar 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>New Apple Device Release Date</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p>
</div>
<div class="tl-body">
<p>In memory of Steve Jobs.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="tl-heading">
<h4>No icon here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p>
</div>
<div class="tl-body">
<p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of
lorempixel.</p>
<p>
<img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"> </p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Some Important Date!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p>
</div>
<div class="tl-body">
<p>Write up a quick summary of the event.</p>
</div>
</div>
</li>
<li>
<div class="timeline-panel noarrow">
<div class="tl-heading">
<h4>Secondary Timeline Box</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p>
</div>
<div class="tl-body">
<p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Feb 2014</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>The Winter Months</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p>
</div>
<div class="tl-body">
<p>Gee time really flies when you're having fun.</p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Yeah we're pretty much done here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p>
</div>
<div class="tl-body">
<p>Wasn't this fun though?</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</div>
</body>
</html>

It's a bug in Boostrap 4 alpha 6.
It's fixed in Boostrap 4 beta 1 that it's under development.
I noticed you are using Pingendo, you can use the Bootstrap 4 beta 1 version changing the import at the end of your sass file in
#import 'bootstrap-4.0.0-alpha.6';

It seems you haven't included bootstrap references inside your head tag
Here are the links - Bootstrap Js Link
Bootstrap CSS Link
Add them like this.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js" integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

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 thumbnails not stacking properly

My thumbnails from bootstrap have different heights to them, and I think that issue might be causing them to not stack properly (see screenshots and fiddle). I think I need to include a min-height for them, but I'm just not able to get it working .. can anyone lend a hand?
Here is the code that I have:
<body>
<div class="container-fluid">
<div class="hidden-phone">
<a href="newBook.php">
<button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button>
</a>
</div>
<div class="row-fluid">
<div class="span12 well">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Fiddle: http://jsfiddle.net/Z3VwZ/
screens:

No, height of divs is not the issue. Issue is that you must put only three divs with .span4 class in one div with .row-fluid class. And if you want more divs with .span4 you must create new div with .row-fluid class and put those new .span4 divs inside. See Twitter bootstrap official documentation.
For example, this is valid Twitter Bootstrap markup
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span12"></div>
</div>
<div class="row-fluid">
<div class="span8"></div>
<div class="span1"></div>
<div class="span3"></div>
</div>
Here is working demo with your code >>> http://jsfiddle.net/Z3VwZ/1/