"JavaScript Background Color Change "
Bootstrap 4.1.1 Snippet by esiksha

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/cover/"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="https://getbootstrap.com/docs/4.0/examples/cover/cover.css" rel="stylesheet"> <title>Javascript Background Color Change</title> </head> <body class="text-center"> <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> <div class="inner"> <h3 class="masthead-brand">Cover</h3> <nav class="nav nav-masthead justify-content-center"> <a class="nav-link active" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Contact</a> </nav> </div> </header> <main role="main" class="inner cover"> <h1 class="cover-heading">Cover your page.</h1> <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> <p class="lead"> <input type="button" id="btn" class="btn btn-lg btn-secondary" value="Change Color"> </p> <script> let color = ['red', 'green', 'blue', 'orange', 'black', 'gray', 'purple']; let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ let randomColor = color[Math.floor(Math.random()*color.length)]; document.body.style.background = randomColor; }); </script> </main> <footer class="mastfoot mt-auto"> <div class="inner"> <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </footer> </div> </body> </html>

Related: See More

Get Shit Done Kit
Social Login Page with CSS Background
Call to action with dark background
Particle Background Login Form

Questions / Comments: