We Keep Coding

How can I change active Bootstrap tab style to underline?

Bootstrap nav tab how to change active tab to underline?
This is my code.
// Bootstrap Handles The Javascript
// Add css to underline the active tab
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div>
</div>
</div>
Thanks in advance!

You can do it this way:
// Tabs
var triggerTabList = [].slice.call(
document.querySelectorAll(".nav-tabs>button")
);
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener("click", function (event) {
document.querySelectorAll(".nav-tabs>button").forEach(
(button) =>
(button.style.cssText = `
background-color: #fff;
color: rgb(245, 158 ,11);
transition: background-color .5s;
`)
);
document.querySelectorAll(".nav-tabs>button.active").forEach(
(button) =>
(button.style.cssText = `
cursor: default;
background-color: #fff;
font-weight: bold;
border: none;
border-bottom: 3px solid rgb(245, 158 ,11);
color: rgb(245, 158 ,11);
transition: all .5s;`)
);
});
});
.nav-tabs>button.active,
.nav-tabs>button.active:hover,
.nav-tabs>button.active:focus {
color: #555;
cursor: default;
background-color: #fff;
font-weight: bold;
border: none;
border-bottom: 3px solid #1976d2;
}
.nav-tabs>button {
transition: none;
border-bottom: 1px solid #dee2e6;
}
.nav-tabs>button:hover {
border: none;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0px;
/* font-size: initial; */
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div>
</div>
</div>

Having trouble with Bootstrap

I've recently started using bootstrap to make a website functioning for both computer and mobile phones/tablets.
While it scales everything nicely in the browser, when I resize my browser window, some words disappear in my interface.
How can I make it so that my text doesn't disappear and stay in their respective rectangles?
I'm running this webpage on a Siemens S7-1200 PLC. I have made a json file that fetches data from the PLC which I represent on my website. When I try it on my phone however, some of the text disappears.
The following Image represents how my page looks like on a web browser on my laptop:
When I resize my browser it looks like the following:
Notice the arrow I've added, the arrow points towards the '1' that is next to the text that says 'Mixer 1'.
Excuse my english, it's not my mother tongue.
My HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col" id="ovznormaal">Normaal</div>
<div class="col" id="ovzengsave">Energy Save</div>
<div class="col" id="ovzhyg">Hygieniseren</div>
<div class="col" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col" id="mix1">Mixer 1</div>
<div class="col" id="mix2">Mixer 2 (EC100)</div>
<div class="col" id="ventil">Ventilator</div>
<div class="col" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col">Product Temperatuur</div>
<div class="col"><p id="prodTemp">000.0 C</p></div>
<div class="col">Mat 1 Temperatuur</div>
<div class="col"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col">Mat 2 Temperatuur</div>
<div class="col"><p id="m2temp">000.0 C</p></div>
<div class="col">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col">Verwarming Matten</div>
<div id="mt1" class="col">Mat 1</div>
<div id="mt2" class="col">Mat 2</div>
<div id="mt3"class="col">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col">Programma Keuze</div>
<div id="kort" class="col"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col">Operationele stand</div>
<div class="col">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="js/custom/main.js"></script>
</body>
</html>
My CSS:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
I hope someone can give my some tips, I'm kind of a beginner to CSS/HTML/JS.

Your <DIV> text is wrapping into the box below it, add white-space: nowrap to your CSS for the DIVs under .col {} and .col-pixel-width-100 {}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
white-space: nowrap;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
white-space: nowrap;
}

You could also try adding the "text-nowrap" class. That is a bootsrtap class that will essentially do the same as what Bob Dole has suggested above

you can simply provide a new class to all the required columns. Here i have edited the code for you
HTML PART
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- title -->
<title>Main Page</title>
<!-- scripts -->
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img src="img/logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><h2>Main</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="motoren.html"><h2>Motoren</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="verwarming.html"><h2>Verwarming</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io1.html"><h2>DI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io2.html"><h2>DQ</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="io3.html"><h2>AI</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="alarm.html"><h2>Alarm</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diagnostics.html"><h2>Diagnostics</h2></a>
</li>
<li class="nav-item">
<a class="nav-link" href="parameters.html"><h2>Parameters</h2></a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay">
<div class="customTable">
<div class="container-fluid">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-pixel-width-100">Overzicht</div>
<div class="col newclass" id="ovznormaal">Normaal</div>
<div class="col newclass" id="ovzengsave">Energy Save</div>
<div class="col newclass" id="ovzhyg">Hygieniseren</div>
<div class="col newclass" id="ovzhygdone">Hygieniseren Klaar</div>
<div class="col newclass" id="ovzdrleeg">Leeg Draaien</div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Motoren</div>
<div class="col newclass" id="mix1">Mixer 1</div>
<div class="col newclass" id="mix2">Mixer 2 (EC100)</div>
<div class="col newclass" id="ventil">Ventilator</div>
<div class="col newclass" id="percent"><p id="percnum">0 %</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Verwarming</div>
<div class="col newclass">Product Temperatuur</div>
<div class="col newclass"><p id="prodTemp">000.0 C</p></div>
<div class="col newclass">Mat 1 Temperatuur</div>
<div class="col newclass"><p id="m1temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">IO</div>
<div class="col newclass">Mat 2 Temperatuur</div>
<div class="col newclass"><p id="m2temp">000.0 C</p></div>
<div class="col newclass">Mat 3 Temperatuur</div>
<div class="col"><p id="m3temp">000.0 C</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Alarmen</div>
<div class="col newclass">Verwarming Matten</div>
<div id="mt1" class="col newclass">Mat 1</div>
<div id="mt2" class="col newclass">Mat 2</div>
<div id="mt3"class="col newclass">mat 3</div>
<!--<div class="col"></div>-->
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Diagnostics</div>
<div class="col newclass">Programma Keuze</div>
<div id="kort" class="col newclass"><p id="shortprog">Kort 0000 Min</p></div>
<div id="lang" class="col newclass"><p id="longprog">Lang 0000 Min</p></div>
</div>
<br>
<div class="row">
<div class="col-pixel-width-100">Parameters</div>
<div class="col newclass">Operationele stand</div>
<div class="col newclass">
<div class="switchcontainer">
<form>
<input type="submit" value="Auto">
<input type="hidden" name='"2_HMI".AUTOTEST' value="0">
</form>
<form>
<input type="submit" value="Handmatig">
<input type="hidden" name='"2_HMI".AUTOTEST' value="1">
</form>
<!--<button id="Auto">Auto</button>
<button id="Handmatig">Handmatig</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS PART
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
.header {
background-image: url('../img/test.png');
background-size: cover;
background-position: center;
position: relative;
}
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.customTable {
padding-top: 8%;
padding-left: 2%;
width: 98%;
}
.col {
height: 100px;
font-size: 25;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 98px;
border: 1px solid black;
background-color:lightgray;
}
.col-pixel-width-100 {
font-size: 40;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 100px;
flex: 0 0 15%;
background-color:grey;
}
.newclass {
min-width: 300px;
}
#Auto {
width: 180px;
height: 100%;
}
#Handmatig {
width: 180px;
height: 100%;
}
PS I have added a new class named "newclass" and provided a min width....please change the min-width as you like

I think your issue lies with using line-height as a vertical align, as when the text wraps, it wraps with 98px of line-height.
I would start by removing it and re-aligning it with padding etc.

CSS transition not working in ASP.NET Web Forms

CSS3 transition works fine in an HTML page, but not in a .aspx page. Is there a way to overcome this? I'd like to do the app in Web Forms as it makes designing the forms much easier. Any input would be appreciated.
Here is the .aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CMSWebForms.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="Content/jquery-1.10.2.min.js" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-combined.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Content/test.css"/>
</head>
<body>
<ul id="sidebar" class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: fixed; top: 0; left: 0;">
<li><h1 class="text-center"><a tabindex="-1" href="#">CMS</a></h1></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Sales</a>
<ul class="dropdown-menu text-right">
<li><a tabindex="-1" href="#">Customers</a></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Pricing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">A</a></li>
<li><a tabindex="-1" href="#">B</a></li>
<li><a tabindex="-1" href="#">C</a></li>
<li><a tabindex="-1" href="#">D</a></li>
<li><a tabindex="-1" href="#">E</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Quotes</a></li>
<li><a tabindex="-1" href="#">Orders</a></li>
<li><a tabindex="-1" href="#">Pricing</a></li>
<li><a tabindex="-1" href="#">Reports</a></li>
</ul>
</li>
<p> </p>
<!--<p> </p>-->
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Manufacturing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">One</a></li>
<li><a tabindex="-1" href="#">Two</a></li>
<li><a tabindex="-1" href="#">Three</a></li>
<li><a tabindex="-1" href="#">Four</a></li>
<li><a tabindex="-1" href="#">Five</a></li>
</ul>
</li>
</ul>
<!--</div>-->
<!--<div id="wrapper">-->
<div id="page-content-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li>
<button id="sidebarToggle" class="btn btn-primary btn-lg">
<i class="fa fa-angle-left"></i>
</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-sm btn-info">
<i class="fa fa-sign-in"></i> Log in
</a>
</li>
</ul>
</div>
</nav>
<div class="content-header container-fluid text-center">
<h1 id="home" class="">
CMS
</h1>
</div>
<div class="page-content inset container-fluid">
<div class="row">
<div class="jumbotron text-center">
<h1 class="">Hello Beautiful!</h1>
<p class="">
</p>
Name:
<asp:TextBox ID="TextBox1" runat="server" Width="248px"></asp:TextBox>
Address:
<asp:TextBox ID="TextBox2" runat="server" Width="248px"></asp:TextBox>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<h4 class="text-center text-primary">©2016 Apiron Technologies, Inc.</h4>
</div>
</div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script src="Scripts/site.js"></script>
</body>
</html>
</asp:Content>
Here is the CSS:
#sidebar{
background: #000;
color: #999999;
border-radius: 0;
padding: 0;
height: 100%;
width: 200px;
margin-top: 0;
transition: .25s;
}
#sidebar.dropdown-menu.text-right.hide-sidebar{
left: -200px !important;
transition: .25s;
}
.navbar.navbar-inverse{
border-radius: 0 !important;
background: #1536b6 !important;
}
.navbar-inverse
.navbar-inverse .nav>li>a {
color: #fff !important;
}
.btn-info{
color: #fff !important;
}
.navbar.navbar-inverse.navbar-fixed-bottom{
margin-left: 200px !important;
}
#page-content-wrapper {
margin-left: 200px;
transition: .25s;
}
#page-content-wrapper.hide-sidebar{
margin-left: 0;
transition: .25s;
}
.dropdown-menu {
border-radius: 0;
padding: 0;
}
.dropdown-menu li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu li a:hover,
.dropdown-menu li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.dropdown-menu.text-right li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu.text-right li a:hover,
.dropdown-menu.text-right li.active {
color: #fff;
background-color: #333131 ;
text-decoration: none;
}
.dropdown-submenu.pull-right{
background: #000;
display: block;
width: 100%;
}
#myId {
color: aqua;
}
and here is the JS:
(function () {
var $sidebarAndWrapper = $("#sidebar,#page-content-wrapper");
var $icon = $("#sidebarToggle i.fa");
$("#sidebarToggle").on("click", function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
$icon.removeClass("fa-angle-left");
$icon.addClass("fa-angle-right");
}
else {
$icon.removeClass("fa-angle-right");
$icon.addClass("fa-angle-left");
}
});
})();

What browser are you checking in? Try using another browser.
Once i had a same problem. Resetting IIS site fixed the issue. You can also try prefixing CSS.
Cheers

How to replace css class value using angularjs values?

I have a problem now to make my css values dynamic. I have this kind of code but not working
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
I've seen this post from this link
How to Dynamically create a CSS class using AngularJS
i don't know what is my mistakes there that it didn't work.
Anyone have an alternative solution to my problem.
I just want to make bootstrap panel to be customized in colors and i don't want to put ng-class or ng-style in every panel i used coz it is so many.
Anyone have an idea please let me know.
Full Code
<!DOCTYPE html>
<html data-ng-app="Aptus">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
<title>Centralized Test</title>
<!--<link href="http://cdn.dbtc.sdb.ph/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />-->
<link href="contents/css/angucomplete.css" rel="stylesheet" />
<link href="contents/css/bootstrap.min.css" rel="stylesheet" />
<link href="contents/css/dashboard.css" rel="stylesheet" />
<link href="contents/css/loading-bar.css" rel="stylesheet" />
<link href="contents/css/loading-bar.min.css" rel="stylesheet" />
<link href="contents/css/font-awesome.min.css" rel="stylesheet" />
<link href="contents/css/cropper.min.css" rel="stylesheet" />
<link href="styles/myStyles.css" rel="stylesheet" />
<link href="contents/css/elusive-webfont.css" rel="stylesheet" />
<link href="contents/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="contents/css/angular-chart.css" rel="stylesheet" />
<link href="Scripts/ckeditor/contents.css" rel="stylesheet" />
<link href="Contents/css/colorpicker.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.ng-ckeditor {
border: 0;
}
body {
overflow-x: hidden;
}
#sidebar-dropdown {
color: #9a96a1 !important;
}
.form-control {
border-radius: 0 !important;
}
.modal .modal-body {
max-height: 450px !important;
overflow-y: auto;
}
#media (max-width:767px) {
.small-width-hidden {
display: none;
}
}
#media screen {
footer {
display: none;
}
}
#media print {
.progress {
background-color: #F5F5F5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
}
.progress-bar-success {
display: block !important;
background-color: #198718 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#198718', endColorstr='#198718')" !important;
}
.progress-bar-info {
display: block !important;
background-color: #5BC0DE !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
}
.progress, .progress > .progress-bar {
display: block !important;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 !important;
-webkit-box-shadow: inset 0 0 !important;
}
.not-printable {
display: none;
}
.additional {
display: inline-block !important;
}
.printable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
}
.small-font {
font-size: 8pt !important;
}
.small-padding > tbody > tr > td {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > tbody > tr > th {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > table {
padding: 1px !important;
}
.small-font > span {
font-size: 6pt !important;
}
footer {
position: fixed !important;
bottom: 0 !important;
}
#page {
size: auto;
margin: 5mm;
}
}
#CriteriaTable > tr > th {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.dashboardsubmenu {
list-style-type: none;
padding-left: 10px;
}
.tab-content {
border-right: solid 1px #ddd;
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
#icon-tab > li > a {
border-radius: 0 !important;
}
#loading-bar-spinner .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: red;
border-left-color: red;
border-radius: 10px;
-webkit-animation: loading-bar-spinner 400ms linear infinite;
-moz-animation: loading-bar-spinner 400ms linear infinite;
-ms-animation: loading-bar-spinner 400ms linear infinite;
-o-animation: loading-bar-spinner 400ms linear infinite;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar .bar {
background: red;
}
#loading-bar .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 1px red, 0 0 1px red;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/************For Angular-Modal****************/
#media (max-width:530px) {
.message {
width: 100% !important;
}
}
/*******************************************/
a:not(:hover) {
text-decoration: none !important;
}
.modal-content {
border-radius: 0;
}
.go-top {
position: fixed;
bottom: 1em;
left: 1em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.math-tex {
font-size: 20px !important;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="Scripts/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!---->
<!-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
</head>
<body data-ng-cloak="" data-ng-controller="indexController">
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="sidebar-wrapper not-printable">
<div class="sidebar not-printable" style="margin-bottom:10px">
Centralized Test
<div class="user-panel">
<div class="pull-left image">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello {{lastName}}</p>
<a class="cursor-pointer" data-ng-click="logOut()">Log Out</a>
</div>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a class="cursor-pointer">Dashboard</a></li>
<li id="sidebar-dropdown" data-ng-repeat="mod in modulesData | filter:{userRoleName:currentRole || ''}" data-ng-class="{'active' : activeModule == mod.moduleId}">
<a href="{{mod.moduleUrl}}" data-toggle="collapse" data-target="#{{mod.moduleId}}" data-ng-click="setCurrentModule(mod);SetActiveModule(mod.moduleId)">
<span class="pull-right"><span class="caret" data-ng-show="mod.moduleUrl == '#' || mod.moduleUrl == ''"></span></span><i class="{{mod.iconUrl}}"></i> <span>{{mod.moduleName}}</span>
</a>
<ul class="collapse dashboardsubmenu" id="{{mod.moduleId}}" style="list-style-type: none">
<li class="list-group-item no-border" data-ng-repeat="sub in mod.subModule | filter:{userRoleName:currentRole || ''}"><i class="{{sub.iconUrl}}"></i> <span>{{sub.moduleName}}</span></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div class="container not-printable">
<div class="row">
<div class="header">
<nav class="navbar navbar-static-top navigation" role="navigation">
<a class="navbar-toggle navbar-left cursor-pointer" role="button" id="toggle-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-left">
<ul class="nav navbar-nav">
<li><a class="cursor-pointer" href="#/home" data-ng-click="setCurrentModule('Dashboard')" style="color:white !important"><span class="fa fa-home fa-lg"></span></a></li>
<li class="dropdown" data-ng-show="iTestRoles.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#Roles">{{currentRole}} <span class="caret"></span></a>
<ul class="dropdown-menu" id="Roles">
<li data-ng-repeat="data in iTestRoles"><a class="cursor-pointer" data-ng-click="SetiTestRole(data.userRoleName,data.userRoleId)">{{data.userRoleName}}</a></li>
</ul>
</li>
<li class="dropdown" data-ng-show="iTestSubjectGrade.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#SubGrade">{{subject}} {{grade}}<span class="caret"></span></a>
<ul class="dropdown-menu" id="SubGrade">
<li data-ng-repeat="data in iTestSubjectGrade"><a class="cursor-pointer" data-ng-click="SetiTestSubGrade(data.subject,data.grade,data.subjectCode,data.gradeID)">{{data.subject}} {{data.grade}}</a></li>
</ul>
</li>
</ul>
</div>
<div class="navbar-right right-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle cursor-pointer" data-toggle="dropdown-menu" data-target="ProfileMenu">
<i class="fa fa-user"></i> {{firstName
}} {{middleInitial}} {{lastName}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="ProfileMenu">
<!-- User image -->
<li class="user-header bg-light-green">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
<p>
{{firstName}} {{middleInitial}} {{lastName}}
<!--- {{userRole}}-->
<small></small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<!-- <div class="col-xs-4 text-center">
Followers
</div>
<div class="col-xs-4 text-center">
Sales
</div>
<div class="col-xs-4 text-center">
Friends
</div>-->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a class="btn btn-default btn-flat cursor-pointer">Profile</a>
</div>
<div class="pull-right">
<a class="btn btn-default btn-flat cursor-pointer" data-ng-click="logOut()">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row not-printable" id="content-title">
<h3>{{currentModule.moduleDescription}}</h3>
</div>
<div class="row" id="content">
<div data-ng-view="" class="printable">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="go-top text-center not-printable">
<span class="fa fa-chevron-circle-up not-printable" style="font-size:32px"></span><br />
<span class="not-printable">Go to Top</span>
</a>
</div>
<div id="icon" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border-radius:0">
<div class="modal-header" style="border-radius:0;background-color:#3c8dbc">
<label class="modal-title" style="color:white">Icons</label>
</div>
<div class="modal-body">
<ul class="nav nav-tabs cursor-pointer" role="tablist" id="icon-tab">
<li class="active"><a class="cursor-pointer" role="tab" data-toggle="tab" data-target="#glyphicons">Glyphicons</a></li>
<li><a role="tab" data-toggle="tab" data-target="#font-awesome">Font-Awesome</a></li>
<li><a role="tab" data-toggle="tab" data-target="#elusive">Elusive-Icon</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="glyphicons">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="glyph in ModuleIcons.GlyphIcons" style="padding:10px"><span class="{{glyph.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="font-awesome">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="awesome in ModuleIcons.FontAwesome" style="padding:10px"><span class="{{awesome.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="elusive">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="elusive in ModuleIcons.ElusiveIcon" style="padding:10px"><span class="{{elusive.Name}}"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="border-radius:0">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-ng-click="Submit(classes,enrollCodes)">Continue</button>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header" style="border-radius:0">
<h4 style="font-weight:bolder" class="text-center">You're Idle. Do Something!</h4>
</div>
<div ng-idle-countdown="countdown" ng-init="countdown=10" class="modal-body" style="border-radius:0">
<progressbar max="10" value="10" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
</p>
</div>
</script>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-local-storage.min.js"></script>
<script src="scripts/loading-bar.min.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="scripts/angular-idle.min.js"></script>
<script src="scripts/angucomplete-alt.min.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/bootstrap-datetimepicker.min.js"></script>
<script src="scripts/cropper.min.js"></script>
<script src="scripts/dashboard.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/Chart.min.js"></script>
<script src="scripts/angular-chart.js"></script>
<script src="Scripts/ng-ckeditor.js"></script>
<script src="Scripts/angularjs-unique.js"></script>
<script src="Scripts/bootstrap-colorpicker-module.min.js"></script>
<script src="app/app.js"></script>
<script src="app/Controllers/IndexController.js"></script>
<script src="app/Controllers/loginController.js"></script>
<script src="app/Services/authInterceptorService.js"></script>
<script src="app/Services/authService.js"></script>
<script src="app/Controllers/HomeController.js"></script>
<script src="app/Services/HomeService.js"></script>
<script src="app/Filters/Filter.js"></script>
<script src="app/Controllers/SetupController.js"></script>
<script src="app/Services/SetupService.js"></script>
<script src="app/Directives/Directives.js"></script>
<script src="app/Controllers/TestController.js"></script>
<script src="app/Services/TestService.js"></script>
<script src="app/Controllers/ITestController.js"></script>
<script src="app/Services/ITestService.js"></script>
<script src="app/Services/SignalRService.js"></script>
<script src="Scripts/jquery.floatThead.min.js"></script>
<script src="app/Controllers/ActivateExamController.js"></script>
<script src="app/Services/ExamActivationService.js"></script>
<script type="text/javascript">
$('#icon-tab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
//$.fn.modal.Constructor.prototype.enforceFocus = function () {
// modal_this = this
// $(document).on('focusin.modal', function (e) {
// if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
// modal_this.$element.focus()
// }
// })
//};
$(document).ready(function () {
// Show or hide the sticky footer button
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 300);
})
});
</script>
</body>
</html>

I've provided a simple example below as to how you can switch classes, not directly modify the classes, however that's not a very typical procedure.
function MyCtrl($scope) {
$scope.myClass = 'blue'
}
.blue { color: blue }
.red { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<h2 ng-class="myClass" ng-click="myClass = myClass == 'blue' ? 'red' : 'blue'">Click Me!</h2>
</div>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
angular.module("myApp",[]).controller("myController",function($scope){
$scope.name="sagar";
$scope.myColorPanel ="green";
$scope.colorChange=function(color){
$scope.myColorPanel =color;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<style>
.panel-primary {
background-color:{{myColorPanel}};
}
</style>
<div class="panel-primary"><h3>{{name}} ,dynamic Color Change By Angularjs</h3></div>
<button ng-click="colorChange('red')">Red</button>
<button ng-click="colorChange('blue')">Blue</button>
<button ng-click="colorChange('pink')">Pink</button>
<button ng-click="colorChange('yellow')">Yellow</button>
</body>
</html>
Hope That Was Help you..

Now I found the real problem. Its the version of the angularjs that i use didn't support angularjs in style. Since it is an existing system, the angularjs used is older version. The version I previously used is 1.2x then i updated it to newer version (1.5x) and all the code I used is now working. Thank a lot for all the effort of you guys. I know its my fault not realized about the version of angularjs but thank you so much.
The solution was changing from old version to newer version.

ng-class is the best option if you want it to work using AngularJs.
You can check this article.Hopefully this will give you the solution to your problem.

I think it should work.
May be there are other places where background color on .panel-primary is being set.
You are using bootstrap, right? Make sure your custom CSS is loaded after bootstrap's CSS.

Put the style tag inside your controller, not in the head tag as follows
<body ng-controller="MainCtrl">
Background of div is <input ng-model="name">
<style>
.p { background-color: {{name}}; }
</style>
<div class="p">dddd</div>
</body>

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.