I have a carousel in container-fluid. I am trying to decrease the height of the carousel but I am not able to do so. I tried style it dont work as well. Currently, the carousel takes up the width and height of the whole web page.
How can I go about doing it?
Below is my code:
CSS
header {
background: #f16251;
color:#000000;
}
header h1,header h2,header h3 a,header a,header a:hover {
color:#101010;
font-weight:800;
text-decoration:none;
}
header h3 {
font-family: 'Kreon', serif;
background: #ffcc33;
padding:10px;
border-radius:3px;
font-size:34px;
padding:12px 10px 6px 10px;
}
header .dropdown-menu {
top:74px;
background: #ffcc33;
border-width:0;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<header class="masterhead">
<!-- <div class="container">-->
<div class="container-fluid">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- item 1 -->
<div class="item active">
<img src="img/Nielsen.png" alt="">
<div class="carousel-caption">
<h4>Testing </h4>
<p>Testing Testing</p>
</br>
</div>
</div>
<!-- item 2 -->
<div class="item">
<img src="img/UIParade.png" alt="">
<div class="carousel-caption">
<h4>Testing Image 2</h4>
<p>Testing Testing</p>
</br>
<a class="btn btn-primary" target="_blank" href="http://www.uiparade.com/">Learn
more</a>
</div>
</div>
</div>
</div>
</div>
<!--<div class="col-sm-6">
<h1>Evon Chong
<p class="lead">{A Bootstrap Template}</p></h1>
</div>-->
<!--<div class="col-sm-6">
<div class="pull-right hidden-xs">
<h3><i class="glyphicon glyphicon-cog"></i></h3>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-chevron-right"></i> Link
</li>
<li><i class="glyphicon glyphicon-user"></i> Link
</li>
<li><i class="glyphicon glyphicon-lock"></i> Link
</li>
<li><i class="glyphicon glyphicon-cog"></i> Link
</li>
</ul>
</div>
</div>-->
</div>
</div>
<!--</header>-->
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li>Home
</li>
<li>About
</li>
<li>My Skills
</li>
<li class="active"><strong>Education</strong>
</li>
<li>Portfolio
</li>
<li>Contact
</li>
<!--<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<!-- Begin page content -->
<div class="divider" id="section1"></div>
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="page-header text-center">
<h1>Sticky Footer with Fly-in Navbar</h1>
</div>
<p class="lead text-center">
Twitter Bootstrap is a front-end toolkit to rapidly build web applications.
</p>
<p class="text-center">
Bootstrap is a framework that uses some of the latest browser techniques to provide you with stylish typography, navigation, buttons, tables, etc. One of the primary changes in Bootstrap 3 is an emphasis on Mobile-First responsive design. The goal is to elevate the mobile experience to a first-class citizen of the design process, because several billion mobile users is quite a large market to tap into. So, sites built with the current Bootstrap version target mobile devices and scale for larger screens depending on screen size.
</p>
</div>
</div>
<div class="divider" id="section2"></div>
<section class="bg-1">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Try and Tweak Different Layouts</h2>
</div>
</section>
<div class="divider"></div>
<div class="container" id="section3">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>Mobile-first + Responsive</h1>
<p>
Instead of creating a unique version of the webpage for each desktop, mobile & tablet, you can now create one design that works on all devices, browsers & resolutions. Your designs will be future ready when a new table or phone size comes in the market, your designs will adapt itself and fit to the new screen size.
</p>
<hr>
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
<hr>
</div>
<!--/col-->
</div>
<!--/container-->
<div class="divider"></div>
<section class="bg-3" id="section4">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Leverage Snippets & Examples</h2>
</div>
</section>
<div class="continer bg-4">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div>
<img src="//placehold.it/450X250/565656/eee" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Hacker News</p>
<p>120k Followers, 900 Posts</p>
<p>
<img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="//placehold.it/450X250/ffcc33/444" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Bootstrap Templates</p>
<p>902 Followers, 88 Posts</p>
<p>
<img src="https://lh5.googleusercontent.com/-AQznZjgfM3E/AAAAAAAAAAI/AAAAAAAAABA/WEPOnkQS_20/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="//placehold.it/450X250/f16251/444" class="img-responsive">
</div>
<div class="panel-body">
<p class="lead">Social Media</p>
<p>19k Followers, 789 Posts</p>
<p>
<img src="https://lh4.googleusercontent.com/-eSs1F2O7N1A/AAAAAAAAAAI/AAAAAAAAAAA/caHwQFv2RqI/s28-c-k-no/photo.jpg" width="28px" height="28px">
<img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
</p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
<div class="divider" id="section5"></div>
<div class="row">
<h1 class="text-center">Where In The World?</h1>
<div id="map-canvas"></div>
<hr>
<div class="col-sm-8">
<div class="row form-group">
<div class="col-xs-3">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-xs-5">
<input type="email" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<input type="homepage" class="form-control" placeholder="Website URL" required="">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<button class="btn btn-default pull-right">Contact Us</button>
</div>
</div>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>Iatek, LLC.</strong><br>
795 Folsom Ave, Suite 600<br>
Newport, RI 94107<br>
P: (123) 456-7890
</address>
<address>
<strong>Email Us</strong><br>
first.last#example.com
</address>
</div>
</div>
<!--/row-->
<div class="container">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h2>Beautiful Bootstrap Templates</h2>
<hr>
<h4>
We love templates. We love Bootstrap.
</h4>
<p>Get more free templates like this at the Bootstrap Playground, Bootply.</p>
<hr>
<ul class="list-inline center-block">
<li>
<a href="http://facebook.com/bootply">
<img src="/assets/example/soc_fb.png">
</a>
</li>
<li>
<a href="http://twitter.com/bootply">
<img src="/assets/example/soc_tw.png">
</a>
</li>
<li>
<a href="http://google.com/+bootply">
<img src="/assets/example/soc_gplus.png">
</a>
</li>
<li>
<a href="http://pinterest.com/in1">
<img src="/assets/example/soc_pin.png">
</a>
</li>
</ul>
</div>
<!--/col-->
</div>
<!--/container-->
</div>
<!--/wrap-->
<div id="footer">
<div class="container">
<p class="text-muted">This Bootstrap Example courtesy Bootply.com
</p>
</div>
</div>
<ul class="nav pull-right scroll-top">
<li><i class="glyphicon glyphicon-chevron-up"></i>
</li>
</ul>
<!-- JavaScript placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Try this:
style="height:500px" in the carousel tag
HTML:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:500px">
Related
I have a dashboard with a side-menu that I want to be fixed to the left. I tried doing a fixed position in css, but then all the divs get distorted and moved out of place. I then tried using bootstrap sticky-left, and it simply didn't work. I want for the left menu to stay fixed while the charts being scrollable.
CODE:
<div class="row head">
<div class="col-sm-2 sticky-left" id="side-bar">
<div id="side-nav">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-10 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart" >
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are looking for sticky-top sidebar.
.chart_container {
height: 500vh
}
ul {
list-style: none;
padding: 0
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row head">
<div class="col-sm-3 " id="side-bar">
<div id="side-nav" class="sticky-top text-center">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-9 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart">
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to create HTML/CSS with the image below [![enter image description here][1]][1]
I am having trouble creating the silver "Add corkscrew" box with a white box below it and then finally another silver box within it. Any ideas how I can do that?
This is my code below but it looks nothing like the above image:
{% extends 'bootstrap/base.html' %}
{% block content %}
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row">
<h2><font color="black">CorkBoard</font></h2>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
</body>
</html>
This may help get you going.
Highly suggest moving the inline styles to their own classes regardless of sample.
Thought not my preferred way, this is the bootstrap mostly way.
I did change container to container-fluid on all of them, seems to also fix another issue I noticed with responsive
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:silver">
<div>
<h6>Add CorkBoard</h6>
</div>
<div class="container-fluid" style="background-color:white">
<div class="row row-content">
<div class="col-xs-12">
<br />
<div class="container-fluid" style="background-color:silver">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2>
<font color="black">CorkBoard</font>
</h2>
</div>
</div>
</div>
<div class="row row-content" style="padding:15px">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-content">
<p></p>
</div>
</div>
<div class="row row-content">
<p></p>
</div>
</div>
</body>
</html>
However with a little bit of custom CSS you can achieve something slightly nicer, and improve on it and/or change it per your liking much easier.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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.7/js/bootstrap.min.js"></script>
<style type="text/css" media="all">
.box {
background-color: silver;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.boxinabox {
background-color: white;
width: 100%;
padding: 2.5%;
}
</style>
</head>
<body>
<div class="container-fluid box">
<h6>Add CorkBoard</h6>
<div class="boxinabox">
<div class="container-fluid" style="background-color:silver">
<div class="row row-content">
<div class="col-xs-12 col-sm-6 text-right">
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2>
<font color="black">CorkBoard</font>
</h2>
</div>
</div>
</div>
<div class="row row-content" style="padding:15px">
<div class="col-xs-12 col-sm-6">
<form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
<!-- Email -->
<div class="form-group">
<label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home & Garden</li>
<li>Education</li>
<li>People</li>
<li>Separated link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm unsure if this is what you were asking about, sorry if I've gone off-topic. Please let me know if I did.
Rows can only contain columns, but you have the following:
<div class="row">
<h2><font color="black">CorkBoard</font></h2>
</div>
You need to add a column in the row, something what like you did below that:
<div class="row row-content">
<div class="col-xs-12 col-sm-6">
<h2><font color="black">CorkBoard</font></h2>
</div>
</div>
You also need to wrap your dropdown class in rows and cols too.
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>
I'm creating a website and I'm having some issues. I'm using my boss' 4k monitor to test if the my sticky footer is all the way at the bottom. And it's not. The weird thing is that the footer never changes how far down it is even if I change min-height: 100vh; to something higher.
Here's my HTML:
<body>
<div class="page">
<div class="contactandsocial">
<p class="phonenumbers">
Brockville - (613) 865-7733    
Cornwall - (343) 885-7733    
Kingston - (613) 817-7733    
Ottawa - (613) 454-7733
</p>
<form action="http://www.truespeed.ca/contact">
<input type="submit" value="Contact" class="contact" />
</form>
<form action="#">
<input type="submit" value="My Account" class="myaccount" />
</form>
<form action="http://webmail.truespeed.ca/">
<input type="submit" value="Webmail" class="webmail" />
</form>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
<img alt="Brand" class="hidden-xs pull-left" style="margin-left: -6px; margin-top: -1px;" src="Images/TrueInternet.png" height="89px" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">Internet<span class="caret"></span>
<ul class="dropdown-menu">
<li>Cable</li>
<li>DSl</li>
<li>Wireless</li>
<li>Business Cable</li>
<li>Business DSL</li>
</ul>
</li>
<li class="dropdown">Phone<span class="caret"></span>
<ul class="dropdown-menu">
<li>Residential Phone</li>
<li>Business Phone</li>
<li>Transfers and Rates</li>
</ul>
</li>
<li>Android TV</li>
<li>Shaw Direct</li>
<li>Careers</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="trueSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#trueSlider" data-slide-to="0"></li>
<li data-target="#trueSlider" data-slide-to="1"></li>
<li data-target="#trueSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>Promotions!</h1>
</div>
</div>
<div class="item">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>News and Alerts!</h1>
</div>
</div>
<div class="item">
<img src="Images/blank.png" class="img-responsive" alt="Promotions" />
<div class="carousel-caption">
<h1>Shaw Direct!</h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#trueSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#trueSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="page-content">
<p>Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.Test.</p>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 footersocial">
<i class="hidden-xs fa fa-facebook-official fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-twitter fa-3x socialicons" aria-hidden="true"></i>
<i class="hidden-xs fa fa-instagram fa-3x socialicons" aria-hidden="true"></i>
</div>
</div>
<div class="row footerlinks" style="margin-left: 15px; margin-top: 15px;">
<div class="col-xs-12 col-md-2 text-center">
<p>Privacy Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Terms of Service</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Acceptable Use Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Warranty & Returns Policy</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p>Third Party Copyright Notices</p>
</div>
<div class="col-xs-12 col-md-2 text-center">
<p style="text-align: center;">Terms of Service for Phone</p>
</div>
<div class="col-xs-12 col-md-12 text-center">
<p>Truespeed Internet Services Inc. 2014-2016, all rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/42e4157b18.js"></script>
</body>
And my CSS:
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
}
.page-content {
flex: 1;
width: auto;
}
html, body {
height: 100%;
width: auto;
}
footer {
background-color: #00AEFE;
height: auto;
}
footer p {
color: white;
}
Make sure that your <footer> has no padding or margin values:
footer {
background-color: #00AEFE;
height: auto;
margin: 0;
padding: 0;
}
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?