Override/Change the background color of Jumbotron Bootstrap

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.

https://www.android-examples.com/demo/heading-tag.html
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:

Override/Change the background color of Jumbotron Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *