"background multi-color"
Bootstrap 4.1.1 Snippet by Rodrigoh16

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 lang="pt-br"> <head> <title>Contatos</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Ícones Font Awesome --> <link rel="stylesheet" href="font-awesome/font-awesome.min.css"> <!-- Seus estilos CSS --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> </head> <body background="" > <div > <button type="button" class="btn btn-danger" style="width: 200px;" ><i class="fab fa-instagram pr-1" href=""></i> Instagram </button><br><br> <button type="button" class="btn btn-primary" style="width: 200px;" ><i class="fa fa-facebook" href="" ></i> Facebook </button><br><br> <button type="button" class="btn btn-warning " style="width: 200px;"><i class="fab fa-google-plus-g pr-1" href=""></i> Google </button><br><br> </div> </body> </html>
div{ position: absolute; top: 50%; left:50%; max-width: 100%; transform: translateY(-50%) translateX(-50%) } h4{ font-family: "Times New Roman", Times, serif; color: white; text-shadow: black 0.1em 0.1em 0.2em } body { max-width:100%; height:auto; }
$(function(){ var cores = ['skyblue','blue', 'black', 'green','yellow','green','pink']; var tamanhoArray = cores.length; var contador = 0; setInterval(function(){ $("body").css("background-color",cores[contador]); contador++; if(contador>tamanhoArray){ contador = 0; } },1000); // VAI CHAMAR A FUNÇÃO DE 2 EM 2 SEGUNDOS ! });

Related: See More

Vue Light Bootstrap Dashboard
Multi Select Tiled Layout
Accordion Multi Level List Group Menu
Social Login Page with CSS Background

Questions / Comments: