How to modify the default Jumbotron background color and set new user define background color inside Jumbotron.
Jumbotron background color can be easily override using custom style tag which we have use inside our DIV tag. Just define style=”background-color:#00F3FF” inside your DIV and it will override the default background color and set your new color choice. So here is the complete step by step tutorial for Override/Change the background color of Jumbotron Bootstrap.
How to Override/Change the background color of Jumbotron Bootstrap.
Code for jumbotron-color.html file.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jumbotron</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron" style="background-color:#00F3FF"> <h1>Bootstrap Jumbotron Heading</h1> <p>Display some important information about your web page.</p> </div> </div> <div style="margin-top:100px;"> <center><a href="https://www.android-examples.com/creating-bootstrap-jumbotron-in-html-php-web-page-example-tutorial/"><img src="https://www.android-examples.com/wp-content/uploads/2016/03/back-button-new.png" /></a></center> </div> </body> </html>
Screenshot: