Floats not working with Bootstrap? - html

I am trying two float two elements with inside a Bootstrap navigation, but it won't work.
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top hidden-sm hidden-md hidden-lg">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I missing something? Is there a conflict that I am not seeing?


there is class .hidden-lg it have css style
#media (max-width: 1199px) and (min-width: 992px)
.hidden-md {
display: none!important;
}
#media (min-width: 1200px)
.hidden-lg {
display: none!important;
}
#media (max-width: 991px) and (min-width: 768px)
.hidden-sm {
display: none!important;
}
Because of these bootstrap classes, the whole element should be hide from DOM. Below 768px of window size it should work.
Below edit the code and try it
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
#media (max-width: 768px) {
.cls3 {
float: right !important;
}
.cls2 {
display:none;
}
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls3 hidden-sm hidden-md hidden-lg">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Related

How to place a section as a background for all of the page?

How to place a section as a background for all of the page?
I have maked a FontAwesome Background Animation Effects
all of it in a section, I want to complete the page with paragraph, photos,,, and set the section as a background for all of that. there is about 20 rows in HTML code but I have maked it small so I can put it in StackOverflow
*
{
margin: 0;
padding: 0;
}
section
{
position: relative;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #0f0;
transition: 0s;
text-shadow: 0 0 120px #0f0;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
#keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
#keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
</body>
</html>

If your background based on DOM elements, you cannot apply this to another page without paste the same html code one more time in another place. But if you apply background or background pattern based on CSS, you can multiple this one everywhere. In this case, all what you can is absolute positioning this section in every page where you want, using correct position in stack with z-index. Also, need to check performance of your page: maybe some gif pattern will be easier.

Make the section's position fixed with top 0 and push it back with z-index. Then change all the other element's background to be transparent and push them front with z-index, and you get the section to be as background for the whole page.
*
{
margin: 0;
padding: 0;
}
#background
{
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 0;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #0f0;
transition: 0s;
text-shadow: 0 0 120px #0f0;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
#keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
#keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
div {
position: relative;
color: white;
background-color: transparent;
z-index: 100;
line-height: 2rem;
color: #fff6;
}
div.red {
color: #f005;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="background">
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Non nisi est sit amet facilisis magna etiam tempor. Cursus euismod quis viverra nibh. Augue eget arcu dictum varius. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Turpis egestas sed tempus urna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Elit pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis mattis aliquam faucibus purus. At urna condimentum mattis pellentesque id nibh tortor id. Faucibus ornare suspendisse sed nisi lacus. Habitant morbi tristique senectus et netus et malesuada. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Diam in arcu cursus euismod. Sodales neque sodales ut etiam sit amet nisl purus. Aliquam sem fringilla ut morbi tincidunt.
</div>
<div class="red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Non nisi est sit amet facilisis magna etiam tempor. Cursus euismod quis viverra nibh. Augue eget arcu dictum varius. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Turpis egestas sed tempus urna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Elit pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis mattis aliquam faucibus purus. At urna condimentum mattis pellentesque id nibh tortor id. Faucibus ornare suspendisse sed nisi lacus. Habitant morbi tristique senectus et netus et malesuada. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Diam in arcu cursus euismod. Sodales neque sodales ut etiam sit amet nisl purus. Aliquam sem fringilla ut morbi tincidunt.
</div>
</body>
</html>
But a small problem is, you will not be able to hover those icons because they are at the back of a div.

Bootstrap appears not to be working with my columns

I am currently working on my first website and I'm attempting to create a product page using bootstrap. However, it seems that the columns and rows are not working with bootstrap. Alongside with the columns not working other things aren't working properly such as the shopping cart icon. What am I missing? here is my code.
HTML:
<head>
<meta charest="UTF-8">
<meta name="veiwport" content="width=device-width, initial-scaled=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<title>Store</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="./js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<header id="store-header">
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Your Local Artist</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Store</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
<div class="page-wrapper">
<div class="logo-top">
<h1 class="logo-text">
Your Local Artist
</h1>
<h2>
|Store
</h2>
</div>
<div class="store-container">
<h2>New Arrivals</h2>
<div class="row">
<div class="col-md-3">
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fas-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fas-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
</div>
</div>

Replace your Bootstrap and font awesome CDN with this(I replaced and it started working)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

HTML FontAwesome

I am working with fontawesome 5.0.13 and all of a sudden the last icons that I added decided to not show up on InDesign. I am fairly new with html and fontawesome in general. So any help will be appreciated.
What I do is copy and paste the code for each icon in the doc below. Then I copy the glyph and paste it on my InDesign file. From there, I only need to select the icon and change the font to FontAwesome. The problem started when I changed the font to FontAwesome and instead of coming to form, the icon would disappear. Any ideas why?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="css/fontawesome-all.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<i class="fas fa-address-book"></i>
<i class="fab fa-wpexplorer"></i>
<i class="fab fa-cc-discover"></i>
<i class="fab fa-searchengin"></i>
<i class="fas fa-edit"></i>
<i class="fas fa-tty"></i>
<i class="fas fa-cogs fa-spin"></i>
<i class="fas fa-share-alt"></i>
<i class="fas fa-edit"></i>
<i class="fas fa-graduation-cap"></i>
<i class="fas fa-battery-full"></i>
<i class="fas fa-portrait"></i>
<i class="fas fa-database"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-globe"></i>
<i class="fas fa-toolbox"></i>
<i class="fas fa-user-plus"></i>
<i class="fas fa-cart-plus"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-book"></i>
<i class="fas fa-book fas-spin"></i>
<i class="fas fa-flag-checkered"></i>
<i class="fas fa-building"></i>
<i class="fas fa-briefcase"></i>
<i class="fas fa-briefcase fa-spin"></i>
<i class="fas fa-flask"></i>
<i class="fas fa-sitemaps fa-3x"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fas fa-mouse-pointer"></i>
<i class="fas fa-info-circle"></i>
</body>
</html>

Bootstrap right-align inline <ul>

I'm trying to find a solution to right-align my content for my container which is holding an inline un-ordered list. The issue that I'm having is that my list contains mixed content (text, links and icons).
<!-- Header -->
<div class="container">
<div id="intro" class="text-right">
<ul class="list-inline">
<li>5420 Bond Road, Louisville, MS 39339</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">MCBC Louisville</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>

Use this
<ul class="text-right list-inline">

You can use "pull-right" class. It's default class of bootstrap and by this you can pull the text or your content to the right side easily.
here is how you can add the class:
<div class="container">
<div id="intro" class="pull-right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>

you need to add bootstrap class 'text-right' on "intro" div like below:
<div class="container">
<div id="intro" class="text-right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>

**add inline style float:right**
<div class="container">
<div id="intro" class="text-right" style="float:right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><a href="#"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
</a></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
</li>
<li><a href="#"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</div>

So, the way I've addressed this issue is I just took the content from the "intro" id and simply placed it on the nav-bar right aligned that was a much easier solution. I would have preferred to have a container above the navbar with right-aligned content, but I tried everything that was suggested here to no avail. I appreciate everyone's responses, you folks are amazing.

**Try this**
<ul class="text-right list-inline d-block">
<li>5420 Bond Road, Louisville, MS 39339</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>

BootStrap 3 Two Nav headers on the same row

I have a basic BootStrap 3 nav header. I would like to separate the existing header so that I have the single dropdown item on the far right, and the rest of the other main menu items to be on the far left. Not sure how to do this?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Cost Tracking</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
<button type="button" class="btn btn-primary btn-sm">Project Details</button>
<button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
<button type="button" class="btn btn-primary btn-sm">Address Book</button>
<button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
<button type="button" class="btn btn-primary btn-sm">Reports</button>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li class="background-color:#333">
<i class="fa fa-edit fa-fw"></i> Project Info
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Roles
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Surcharges
</li>
<li>
<i class="fa fa-group fa-fw"></i> Project Crews
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Employees
</li>
</ul>
<!-- /#side-menu -->
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>

According to the docs to have a navigation over to the right hand side of the navbar you need to place it in it's own <ul>:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
As a side note, the only direct child of a <ul> can be a <li>, so your <button>s need to be wrapped in list elements:
<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>
Demo
If you don't want it in a separate list, then you'll have to override the float on the <ul> and then float the final <li> right. You'll also need the .dropdown-menu-right class on the dropdown <ul>.
...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
CSS
.navbar-nav {
float: none;
}
Demo