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;
}
Related
I have a two image carousel where each image is a different size. I am trying to make all of them vertically align in the middle in order to look much more cleaner.
I tried: margin, display: block, vertical-align: middle. none make the images in the carousel center.
<div class="container">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">FEATURED PARTNERS</h2><br>
</div>
<div class="row">
<div class="col-xs-4">
<a href="../cards/list-partners.php">
<div class="hvrbox">
<img src="img/_stock_mwc_partners.jpg" class="img-responsive hvrbox-layer_bottom">
<div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright">
<div class="hvrbox-text">
<h2>BROWSE<br>PARTNERS</h2>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-8">
<div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-12-GLOBAL ELITE DENTAL CLINIC.jpg" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-17-Mimmo Logo.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-18-LOGO CORE.png" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="img/uploads/merchant-19-docnic_newlogo-3.png" class="img-responsive">
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
We can achieve this using display table & display table cell.
.item row{
display:table;
}
.img-center-vertical{
display:table-cell;
vertical-align:middle;
height:300px;
float: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">FEATURED PARTNERS</h2><br>
</div>
<div class="row">
<div class="col-xs-4">
<a href="../cards/list-partners.php">
<div class="hvrbox">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive hvrbox-layer_bottom">
<div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright">
<div class="hvrbox-text">
<h2>BROWSE<br>PARTNERS</h2>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-8">
<div id="imageCarousel" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" data-wrap="true">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/200/f44336/000000" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/200/f44336/000000" class="img-responsive">
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
Check out the codepen
.img-center-vertical {
display: inline-block;
text-align: center;
justify-content: center;
}
Try this
.img-center-vertical {
display: flex;
align-items: center;
justify-content: center;
}
I'm trying to make a sticker footer by flexbox; however, it's not working. It's still up about half of the screen.
Here's my HTML and CSS code:
.page {
flex: 1 0 auto;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
<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>
<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>
</div>
<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>
I've tried using different variants, and all the same issue.
Place footer outside of .page and set .page to flex: 1 (Commented some footer links for better appreciation):
.page {
flex: 1;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer {
background: lightgray;
}
<div class="page">
Content
</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>
Since we don't have a minimal code snippet of yours, here is a sample code showing how it could be done.
html, body {
margin: 0;
}
body {
display: flex; /* IE 11/10 min-height bug fix - or an extra wrapper */
background: red;
} /* in the markup having display: flex; */
.page {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
background: lightgray;
flex: 1;
}
<div class="page">
<div class="header">
Header
</div>
<div class="content">
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</div>
<div class="footer">
Footer
</div>
</div>
you can still do so
<main>
Main
</main>
<footer>
Footer
</footer>
html {
height: 100%;
}
body {
height: 100%;
}
main {
height: 100%;
padding-bottom: 200px;
background-color: #ccc;
}
footer {
height: 200px;
margin-top: -200px;
position: relative;
}
I do not advise use flexbox for all grid in page.
I'm currently struggling to figure out why the navigation tabs, do not scroll to the specified sections for one page site. Initially I assumed that the issue may have been result of simple syntax error, but from my perspective it seems perfectly fine. Below I have included minimal copy of code from my index.html. I would really appreciate, if some could let me know what the problem & solution could be. Thanks in advance.
<!-- Navigation -->
<header class="header scrolling-header">
<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container clearfix">
<a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-navicon"></i>
</a>
<a class="navbar-brand scroll" href="index.html">
<img class="normal-logo " src="img/logo.png" alt="logo" />
<img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" />
</a>
<div class="right-nav-block pull-right clearfix">
<div class="navbar-collapse collapse floated" id="navbar-collapse">
<ul class="main-menu nav navbar-nav clearfix navbar-with-inside vcenter">
<li class="">Services
</li>
<li class="">Work
</li>
<li class="">About
</li>
<li class="">Quote
</li>
<li class="">
Contact
<div class="wrap-inside-nav">
<div class="inside-col">
<ul class="inside-nav">
<li>Contact 1
</li>
<li>Contact 2
</li>
<li>Contact 3
</li>
</ul>
</div>
</div>
</li>
<li class=""><i class="fa fa-twitter"></i>
</li>
<li class=""><i class="fa fa-facebook"></i>
</li>
</ul>
<ul class="nav navbar-nav hidden-xs clearfix vcenter">
<li>
<a href="#" class="toggle-menu-button">
<div class="toggle-menu-button-icon">
</div>
</a>
</li>
<li class="no-hover">call us 1.800.12345
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="wrap-fixed-menu" id="fixedMenu">
<div class="top-items">
<a href="blog.html" class="top-menu-item menu-item">
<span class="subtitle">All The Latest</span>
<span class="title">Blog</span>
</a>
<a href="portfolio.html" class="top-menu-item menu-item">
<span class="subtitle">Awesome</span>
<span class="title">Portfolio</span>
</a>
</div>
<div class="bottom-items">
<a href="contact.html" class="bottom-menu-item menu-item">
<span class="subtitle">We Are Designers</span>
<span class="title">Contacts</span>
</a>
<div class="bottom-menu-item menu-item contact-info">
<div class="row">
<div class="col-md-12">
<i class="fa fa-home"></i>
<label>ADDRESS</label>
<p class="vcenter">746 Roberts Road Findlay, OH 45840</p>
</div>
<div class="col-md-12">
<i class="fa fa-phone"></i>
<label>PHONE</label>
<p class="vcenter">+201 126 216 88</p>
</div>
<div class="col-md-12">
<i class="fa fa-envelope"></i>
<label>EMAIL</label>
<p class="vcenter">support#CreativeBrick.com</p>
</div>
</div>
</div>
</div>
</div>
</header>
<!--./navigation -->
<!-- Slider header -->
<section class="section-header-slider">
</section>
<!-- Section intro -->
<section class="section-intro blue-dark ">
<div class="container dark-content">
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
</div>
<div class="col-md-3 scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-scale="1.5" data-opacity="0">
<div class="arrow hidden-sm hidden-xs">
<img src="img/arrow.png" alt="" />
</div>
<div class="intro-title">Intro</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="intro-text">
</div>
<div class="under-intro-text">
</div>
</div>
</div>
</div>
</section>
<!-- Section intro 2 -->
<section class="section-intro-2 ">
<div class="container">
<div class="row">
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section Services -->
<!-- ========================== -->
<section class="section-services">
<div class="container">
<div class="section-heading">
<div class="section-subtitle">creating awesomeness</div>
<div class="section-title">services we provide</div>
<div class="sep-element"></div>
</div>
</div>
<div class="wrap-services-tabs">
<div class="wrap-tabs">
</div>
<div class="wrap-tabs-content top-arrow-effect">
<div class="container">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="support">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="responsive">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="-400">
<img src="img/sections/tab-image-1.png" alt="" />
</div>
<div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="400">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="analytics">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-6">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
<div class="designations clearfix">
<div class="last-year"><span></span>last year</div>
<div class="this-year"><span></span>this year</div>
</div>
</div>
<div class="col-md-6">
<div class="graph-line" id="graph-line3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="customizable">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="multipurpose">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12">
<div class="row">
<div class="col-md-12">
<h5 class="bold text-uppercase blue">Analytics details</h5>
<p>
TEXT HERE
</p>
<ul class="list list-round-check orange-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-purchase orange-dark">
<div class="container dark-content">
<div class="row">
<div class="col-md-2 col-sm-3 text-right logo-block">
<img src="img/logo.png" alt="" />
<div>Creative Agency</div>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-6">
<h3 class="bold">Drop us a line if you’d like to work with us</h3>
<p>We’re always looking for new talent so join our team now</p>
</div>
<div class="col-md-2 col-sm-3 text-right">
get in touch
</div>
</div>
</div>
</section>
<section class="section-skills">
<div class="feature-section dark dark-strong">
<div class="container dark-content">
<div class="row">
<div class="col-md-4">
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>01</span>Generate Ideas</h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item feature-divider text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300">
<h5><span>04</span>Launch & Deliver</h5>
<p>
TEXT HERE
</p>
</div>
</div>
<div class="col-md-4">
<div class="wrap-feature-content">
<img src="img/feature-background.png" alt="" />
<div class="feature-content">
<img src="img/logo-free.png" alt="" />
<div class="feature-text">
THE PROCESS
<span>We Follow</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Preparing Briefs<span>02</span></h5>
<p>
TEXT HERE
</p>
</div>
<div class="feature-item right-feature-item feature-divider animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<div class="feature-divider-item"></div>
</div>
<div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300">
<h5>Project Development<span>03</span></h5>
<p>
TEXT HERE
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================== -->
<!-- Section trust -->
<!-- ========================== -->
<section class="section-trust-us clearfix">
<div class="trus-image">
<img src="img/sections/section-trust-us-image.png" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-6 col-md-6">
<div class="section-heading">
<div class="section-title">why trust us</div>
<div class="section-subtitle">creating awesomeness</div>
</div>
</div>
<div class="col-md-offset-6 col-md-6" data-wow-duration="2s">
<div id="accordion-one" role="tablist" aria-multiselectable="true">
<div class="panel panel-default panel-alt-two">
<div class="panel-heading active" role="tab" id="headingOne">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-one" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-bulb"></i>
</span>
</span>
TEXT HERE
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingTwo">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-rocket"></i>
</span>
</span>
<b>TEXT HERE</b>
</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
<div class="panel-heading" role="tab" id="headingThree">
<h5 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
<b>TEXT HERE</b>
<span class="accordion-icon">
<span class="stacked-icon">
<i class="icon-badge"></i>
</span>
</span>
</a>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>
TEXT HERE
</p>
</div>
</div>
</div>
<!--panel-->
</div>
<!--accordion-->
</div>
</div>
</div>
</section>
You are missing id="works-section", etc.
The way it works is you have a page anchor like
Some Title
Then later in the markup, where you want to the link to jump to, you place a corresponding ID, like:
<section id="someID">…</section>.
Makes sense?
I've using some code for custom vertical tabs in bootstrap and I trying to make them horizontal and text below every tab but I can't understand exactly how.
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="feature_header text-center">
<h3 class="feature_title"><b>Tabs</b></h3>
</div>
</div>
</div>
<div class="row">
<div class="feature-tab">
<div class="col-md-2 col-sm-3 col-xs-12">
<ul class="nav nav-tabs main-tab-list text-center" role="tablist">
<li role="presentation" class="active">
<a href="#home" role="tab" data-toggle="tab" >
<div class="single-tab">
<div class="f-icon">
<i class="fa fa-laptop"></i>
</div>
</div>
<h4>Tab 1</h4>
</a>
</li>
<li role="presentation" >
<a href="#profile" role="tab" data-toggle="tab">
<div class="single-tab">
<div class="f-icon">
<i class="fa fa-send"></i>
</div>
</div>
<h4>Tab 2</h4>
</a>
</li>
<li role="presentation" >
<a href="#messages" role="tab" data-toggle="tab">
<div class="single-tab">
<div class="f-icon">
<i class="fa fa-heart"></i>
</div>
</div>
<h4>Tab 3</h4>
</a>
</li>
</ul>
</div> <!-- col-md-12 end -->
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="tab-content main-tab-content">
<div role="tabpanel" class="tab-pane active " id="home">
<div class="col-md-12 col-sm-9">
<div class="c-tab">
<h4>Tab 1</h4>
<p>Lorem ipsum.... </p>
More
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active " id="home">
<div class="col-md-12 col-sm-9">
<div class="c-tab">
<h4>Tab 2</h4>
<p>Lorem ipsum.... </p>
More
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active " id="home">
<div class="col-md-12 col-sm-9">
<div class="c-tab">
<h4>Tab 3</h4>
<p>Lorem ipsum.... </p>
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I wont post CSS because will be very long instead I'll post the JsFiddle.
For more clear I have made this Jsfiddle. Can some one tell how will this go horizontal. I mean Tab 1, Tab 2 and Tab 3..
You can try as below, i just edited your below class and it works!
you should always give style float: left; and display: inherit; together to do the magic :)
.main-tab-list li{
padding: 10px 0px 10px;
border: 1px solid#eee;
width: 150px;
/* background: #FBFBFB; */
float: left;
margin-bottom: 5px;
border-radius: 5px;
display: inherit;
margin-right: 5px;
}
remove .col-md class from .nav-tabs parent and replace it by .row class, and your `` should be:
.main-tab-list li{
position: relative;
display: inline-block;
float: left; /* or none */
padding: 10px 0px 10px;
border: 1px solid#eee;
width: 150px;
/*background: #FBFBFB;*/
margin-bottom: 5px;
border-radius: 5px;
}
http://jsfiddle.net/yt21wup5/
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">