Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the background-color of jumbrotron?

I want to know how to change the background-color of 'jumbotron' class, it has a default background-color #eee in bootstrap.css.

I tried to override by erasing this and giving the attribute none,none !important, transparent into my custom css and still doesn't work.

I tried inspecting the element in the browser window and removing the property there to see if there was any change, it's still the same problem.

It will adopt any other color, except removing the color entirely. The reason I'm asking this is because I have a full background image and want jumbotron to simply transparent with no background or color to it. Unless,

I'm missing something from the BootStrap 3.1.1 documentation in which I checked there as well.

NOTE: I would use jsfiddle.net to easily show you, but it doesn't support 3.1.1 and not sure how to implement bootstrap into it.

HTML

<title>Full Page Image Background Template for Bootstrap 3</title>  <!-- Bootstrap core CSS --> <link href="css/bootstrap.css" rel="stylesheet">  <!-- Custom CSS for the 'Full' Template --> <link href="css/full.css" rel="stylesheet"> 

<!--Displays the Navigation Bar Style--> <div class="navbar navbar-default navbar-fixed-top">     <!--Displays the Navigation Bar Content-->     <div class="navbar-header">         <!-- displays the icon bar in responsive view; when clicked reveals a list-->         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">             <!-- displays the icon bars in responsive view;-->             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>         <!--Brand, Logo of your website-->         <a class="navbar-brand" href="#">Virtual Productionz, Inc.</a>     </div>      <!-- Allows collapse/show navbar in responsive view-->     <div class="navbar-collapse collapse navbar-responsive-collapse">         <ul class="nav navbar-nav">           <li class="active"><a href="#">Home</a></li>           <li><a href="#">About Us</a></li>           <!-- Dropdown menu-->           <li class="dropdown">             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>             <ul class="dropdown-menu">               <li><a href="#">Integrated Laser Keyboard</a></li>               <li><a href="#">More...</a></li>             </ul>           </li>           <li><a href="#">Contact Us</a></li>         </ul>     </div> </div>   <div class="jumbotron">     <h1>Welcome!</h1>     <p>We're an awesome company that creates virtual things for portable devices.</p>     <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div>   <!-- JavaScript --> <script src="js/jquery-1.10.2.js"></script> <script src="js/bootstrap.js"></script> 

CSS (w/ bootstrap.css)

@import url("bootstrap.min.css"); @import url("bootstrap-theme.css");  body { margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */ }  .full {  /*background: url(http://placehold.it/1920x1080) no-repeat center center fixed;*/  background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }  .jumbotron{ color: #FFFFFF; /*background-color:none !important;*/ } 
like image 418
TheAmazingKnight Avatar asked Apr 07 '14 05:04

TheAmazingKnight


People also ask

What is the color of jumbotron?

A jumbotron indicates a big grey box for calling extra attention to some special content or information.

How do I add a background image to a jumbotron?

We can add a background image to the jumbotron using the CSS style sheet. Use . background-image : url("image_address") within the stylesheet. Here is an example to add a background image to the jumbotron.

How do I change the background color in HTML w3schools?

To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.


1 Answers

Try this:

<div style="background:transparent !important" class="jumbotron">     <h1>Welcome!</h1>     <p>We're an awesome company that creates virtual things for portable devices.</p>     <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> 

Inline CSS gets preference over classes defined in a .css file and the classes declared inside <style>

like image 69
Amit Joki Avatar answered Oct 11 '22 01:10

Amit Joki