Bootstrap 4 losing content with fullPage.js

Bootstrap 4 losing content with fullPage.js - javascript

Well basically my problem is that when I'm scrolling down when using the fullPage.js, I loose the content of my 'Section0, I don't know if it is the lack of sleep but I can't find the problem, I'm linking the codepen so you can try it live, thanks in advance!
<div id="fullpage">
<div class="section fp-auto-height" id="section0">
<!-- Fin del menú de navegación -->
<div class="banner">
<div class="container">
<div class="intro">
<h1 class="jumbotitle">BRAND LOGO</h1>
<p class="jumboparr">¡Some text for information!</p>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide sd1" id="slide1">
<div class="container">
<div class="row justify-content-center">
<p class="sdp1">More info bla bla blaa </p>
<p class="sdp1">The same info different color</p>
</div>
</div>
</div>
<div class="slide sd2" id="slide2">
<div class="container">
<div class="row justify-content-center">
<p class="sdp2">¡Moooore infoooo lorem impsum! </p>
</div>
</div>
</div>
</div>
</div>
Codepen

I think the problem is .banner {height:800px;}. If you change it, for example, in height:100vh you can see your content.
https://codepen.io/anon/pen/mjdPpz
.navbar{
background: black !important;
}
#header, #footer {
position:fixed;
display:block;
width: 100%;
z-index:9;
}
#header {
top:0px;
}
.banner {
height: 100vh;
width: 100%;
background-image: url("https://cdnb.artstation.com/p/assets/images/images/009/439/993/large/brody-bellon-background-space-sm.jpg?1519023411") !important;
background-size: cover;
z-index: -1;
}
.navbar-brand {
font-family: 'Francois One', sans-serif;
font-size: 30px;
font-weight: bold;
color: white !important;
}
.navbar-nav {
font-family: 'Francois One', sans-serif;
font-size: 25px;
text-align: right;
color: white !important;
}
.nav-link {
color: white !important;
}
.nl1:hover {
color: #9933ff !important;
font-family: 'Monoton', cursive !important;
}
.nl2:hover {
color: #ffcc00 !important;
font-family: 'Monoton', cursive !important;
}
.sd1 {
background-color: #ffcc00;
}
.sd2 {
background-color: #9933ff;
}
.sdp1 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
color: black;
}
.sdp2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
color: white;
}
.jumbotitle {
font-family: 'Francois One', sans-serif;
font-size: 130px;
text-align: center;
color: white;
}
.jumboparr {
font-family: 'Oswald', sans-serif;
font-size: 40px;
text-align: center;
color: white;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css?family=Acme|Fjalla+One|Francois+One|Oswald|Monoton" rel="stylesheet">
<!-- Scroll Plugin de fullpage.js -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.css">
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.js"></script>
<title>TEST</title>
</head>
<body>
<div id="header">
<!-- Menú de navegación -->
<div class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">BRAND TEST</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link nl2" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nl1" href="#">Galeria</a>
</li>
<li class="nav-item">
<a class="nav-link nl2" href="#">Noticias</a>
</li>
<li class="nav-item">
<a class="nav-link nl1" href="#">Equipo</a>
</li>
<li class="nav-item">
<a class="nav-link nl2" href="#">Contacto</a>
</li>
</ul>
</div>
</div>
</div>
<div id="fullpage">
<div class="section fp-auto-height" id="section0">
<!-- Fin del menú de navegación -->
<div class="banner">
<div class="container">
<div class="intro">
<h1 class="jumbotitle">BRAND LOGO</h1>
<p class="jumboparr">¡Some text for information!</p>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide sd1" id="slide1">
<div class="container">
<div class="row justify-content-center">
<p class="sdp1">More info bla bla blaa </p>
<p class="sdp1">The same info different color</p>
</div>
</div>
</div>
<div class="slide sd2" id="slide2">
<div class="container">
<div class="row justify-content-center">
<p class="sdp2">¡Moooore infoooo lorem impsum! </p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#ffcc00', '#9933ff'],
fixedElements: '#header'
});
</script>
</body>
</html>

You should need to remove "fp-auto-height" class from section0.

Related

Change dropdown backround colour on toggle

I am trying to make it so that my dropdown menu gets a background color when its toggled. As you can see in the demo, the dropdown content get mixed up with the text that's behind. I have a scrollspy that gives the nav and thus the dropdown menu a background color when you scroll down. I could remove the scrollspy, but I want it in my other HMTLs
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Korvens Pizzeria</title>
<!-- <link rel="stylesheet" href="css/style.css" /> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css"
integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<!--
https://www.rawpixel.com/
hemsiida för bilder high ress puyblkic domain -->
<style>
body{
background-color:#212529;
}
.banner-image {
background-image: url("../img/backroundimg.jpg");
}
.navbar-dark .navbar-nav .nav-item .nav-link {
color: white;
font-size: 3vh;
font-weight: 500;
}
.navbar-dark .navbar-nav .nav-item .nav-link:hover {
color: red;
}
#logoname {
font-size: 4vh;
font-weight: 600;
color: white;
}
.opentimes {
font-size: large;
font-weight: 700;
}
a:link {
text-decoration: none;
}
a {
color: white;
}
a:hover {
color: rgb(182, 172, 172)
}
#karta {
height: 60vh;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 5vh;
}
.navbar-dark.navbar-toggler-icon {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-md navbar-dark p-3">
<div class="container">
<p id="logoname">Korvens <span class="text-danger">Pizzeria</span></p>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
HEM
</li>
<li class="nav-item">
MENY
</li>
<li class="nav-item">
KONTAKT
</li>
<li class="nav-item">
OM OSS
</li>
</ul>
</div>
</div>
</nav>
<!-- Banner Image -->
<div class="banner-image w-100 vh-100 d-flex justify-content-start align-items-center">
<div class="section text-light p-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-between p-5 inforuta">
<div>
<h1>Korvens <span class="text-danger">Pizzeria</span></h1>
<p class="lead my-4">
<span class="opentimes">Korvgatan i Bollnäs</span><br>
<span class="opentimes">Mån-tors:</span> 10:00-22:00 <br>
<span class="opentimes">Fre-Sön:</span> 10:00-24:00
</p>
<button class="btn btn-danger btn-lg">MENY</button>
</div>
</div>
</div>
</div>
</div>
<iframe id="karta"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3304.1299831271676!2d16.369699422372438!3d61.40832785956194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4666ec65929b3967%3A0xa314d5067c221948!2sKorvgatan%2C%20821%2094%20Bolln%C3%A4s!5e1!3m2!1ssv!2sse!4v1650885795555!5m2!1ssv!2sse"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<footer>
</footer>
<!-- <script src="js/bootstrap.bundle.min.js"></script> -->
<script type="text/javascript">
var nav = document.querySelector('nav');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 50) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>

change your script with this:
<script type="text/javascript">
var nav = document.querySelector("nav");
var btn = document.querySelector(".navbar-toggler");
btn.addEventListener("click", () => {
if (window.pageYOffset < 50) {
nav.classList.toggle("bg-dark");
nav.classList.toggle("shadow");
}
});
window.addEventListener("scroll", function () {
if (window.pageYOffset > 50) {
nav.classList.add("bg-dark", "shadow");
} else {
nav.classList.remove("bg-dark", "shadow");
}
});
</script>

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.

My Bootstrap Carousel doesn't work, buttons don't show up

I've tried every solution I could find in these forums, and some I found in YouTube, nothing works. Bear in mind I'm a newbie and this is my first Bootstrap project, and my first time posting here. I basically copied all the code from the sample project, so I don't know what I'm doing wrong. I installed Bootstrap on my computer, downloaded and installed the fonts, everything I could think of. I'm losing my mind here. Basically I have three problems: my carousel doesn't work at all, the arrows don't show up, and the page takes forever to load. Here's my code. Thanks in advance for your help.
/* NAVBAR
-------------------------------------------------- */
.navbar {
margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
height: 240px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 240px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 240px;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/* MARKETING
-------------------------------------------------- */
.marketing {
margin: 60px auto;
}
.marketing .col-md-4 {
text-align: center;
font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
font-size: 60px;
background-color: #EAEAEA;
border-radius: 50%;
padding: 40px;
color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 160px;
}
.footer,
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background: #444;
color: white;
text-shadow: 1px 1px 1px black;
padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My name</a>
</div>
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</div>
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

line 8 is unnecessary you already have bootstrap 3.3.7
you should only have one carousel-inner class
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>

here is the corrected file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My name</a>
</div>
<div class="collapse navbar-collapse" id="portfolio-collapse-menu">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

You were pretty close. ;) You defined to many unnecessary div's like two body div's and to many div's with the class carousel-inner. Also you had two enclosing head tags in your version. Your controls don't need to be inside your carousel-inner. Also the CSS-classes for the right arrow were wrong. Just compare them to the ones from the left arrow.
/* NAVBAR
-------------------------------------------------- */
.navbar {
margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
height: 240px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 240px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 240px;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/* MARKETING
-------------------------------------------------- */
.marketing {
margin: 60px auto;
}
.marketing .col-md-4 {
text-align: center;
font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
font-size: 60px;
background-color: #EAEAEA;
border-radius: 50%;
padding: 40px;
color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 160px;
}
.footer,
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background: #444;
color: white;
text-shadow: 1px 1px 1px black;
padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="main.css">
<title>HTML Portfolio</title>
</head>
<body>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
<li data-target="#portfolio-carousel" data-slide-to="1"></li>
<li data-target="#portfolio-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Left</span>
</a>
<a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Right</span>
</a>
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

Adding hidden spaces between buttons

I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
The buttons on the third page,when collapsed don't leave a space in between. How do I add space between the buttons in the small and xsmall screen sizes?I tried inserting between the buttons, but that didn't work.
Here is the JsFiddle

Add this to your CSS
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
Updated fiddle
Sample snippet
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>

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>

We Keep Coding

JavaScript is the programming language of the Web.

Bootstrap 4 losing content with fullPage.js - javascript

You should need to remove "fp-auto-height" class from section0.

Related

Change dropdown backround colour on toggle

Having trouble with Bootstrap

My Bootstrap Carousel doesn't work, buttons don't show up

Adding hidden spaces between buttons

How to replace css class value using angularjs values?

Categories

Resources