Styling Issue: text-decoration none is not working - html

So I am trying to create a footer and I have a couple of links featured however the default text-decoration on the links is weirdly not responding to text-decoration none. All the other text-decoration options are working except the text-decoration none. I have even tried making changes to the bootstrap.min.css file as I saw it suggested as a solution however it hasn't worked.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
'none' option.


Give it to the a-element
.company-item a {
text-decoration: none;
color: inherit;
}
This would be your code:
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>


You have to use company-item a when styling because links are styled by default so you have to call directly to that element. Also, added !important; for good measures.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a {
text-decoration: none !important;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>


.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}
<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item">Become a rider</li>
<li class="company-item">Our Story</li>
<li class="company-item">Our Team</li>
<li class="company-item">Contacts</li>
<li class="company-item">Partners</li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item">Ride safely</li>
<li class="product-item">How it works</li>
<li class="product-item">testimonials</li>
</ul>
</div>
<div class="col footer-column contacts">
<p>+254 111 220 055</p>
<p>info#tissboda.com</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><i class="fab fa-facebook-square"></i></i></li>
<li class="social-icons"><i class="fab fa-twitter-square"></i></i></li>
<li class="social-icons"><i class="fab fa-instagram-square"></i></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link">Privacy</li>
<li class="legal-link">Terms</li>
</ul>
</div>
</div>
</div>
</footer>
i think the problem was it was selecting the list items and not the links
anyway this works

Related

How to put ul side by side? [duplicate]

This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
I want to put the ul next to each other so that they are side by side. I tried using inline-block and float left, but it looks messy.

.left{
position:absolute;
padding-left:200px;
}
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
You can do it like this. This is one way.

How to css sticky-left bootstrap 4

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>

Use of float command when language changes in css

I have an issue that when language changes the all elements changes direction from ltr to rtl and float command also changed from left to right direction.
is there any way that ltr changes but float stay right?
please view images below
when float left
when float right
the original language is English which is set as dir="ltr" but Arabic set as "rtl" and these elements appear as rtl when floated in Arabic, so how can I fix it?
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 6px;
height: 50px;
}
.flip-clock-wrapper ul {
position: relative;
float: right;
margin: 1px;
width: 30px;
height: 50px;
font-size: 30px;
font-weight: bold;
line-height: 50px;
border-radius: 5px;
background: #d3d3d3;
}
<html dir="rtl" lang="ar">
<div id="ab__deal_of_the_day_141" class="flip-clock-wrapper">
<span class="flip-clock-divider days"><span class="flip-clock-label">days</span></span>
<ul class="flip ">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
</ul>
<ul class="flip ">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
</a>
</li>
</ul>
<span class="flip-clock-divider hours"><span class="flip-clock-label">hours</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span>
<ul class="flip ">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
</ul>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
</a>
</li>
</ul>
<span class="flip-clock-divider minutes"><span class="flip-clock-label">minutes</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
</ul>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
</ul>
<span class="flip-clock-divider seconds"><span class="flip-clock-label">seconds</span><span class="flip-clock-dot top"></span><span class="flip-clock-dot bottom"></span></span>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
</ul>
<ul class="flip play">
<li class="flip-clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li class="flip-clock-active">
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
</ul>
</div>
</html>
is it possible to float it initial?

Sticky Footer Not at Bottom of 4K Screen

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 &nbsp &nbsp
Cornwall - (343) 885-7733 &nbsp &nbsp
Kingston - (613) 817-7733 &nbsp &nbsp
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;
}

Horizontal tabs in boostrtap

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/