How to change the background-color of jumbrotron

Question

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                             lt title gt Full Page Image Background Template for Bootstrap 3 lt  title gt    lt  -- Bootstrap core CSS -- gt   lt link href  css bootstrap css  rel  stylesheet  gt    lt  -- Custom CSS for the  Full  Template -- gt   lt link href  css full css  rel  stylesheet  gt         lt  --Displays the Navigation Bar Style-- gt   lt div class  navbar navbar-default navbar-fixed-top  gt       lt  --Displays the Navigation Bar Content-- gt       lt div class  navbar-header  gt           lt  -- displays the icon bar in responsive view  when clicked reveals a list-- gt           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-responsive-collapse  gt               lt  -- displays the icon bars in responsive view -- gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt           lt  button gt           lt  --Brand  Logo of your website-- gt           lt a class  navbar-brand  href     gt Virtual Productionz  Inc  lt  a gt       lt  div gt        lt  -- Allows collapse show navbar in responsive view-- gt       lt div class  navbar-collapse collapse navbar-responsive-collapse  gt           lt ul class  nav navbar-nav  gt             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt             lt li gt  lt a href     gt About Us lt  a gt  lt  li gt             lt  -- Dropdown menu-- gt             lt li class  dropdown  gt               lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Products  lt b class  caret  gt  lt  b gt  lt  a gt               lt ul class  dropdown-menu  gt                 lt li gt  lt a href     gt Integrated Laser Keyboard lt  a gt  lt  li gt                 lt li gt  lt a href     gt More    lt  a gt  lt  li gt               lt  ul gt             lt  li gt             lt li gt  lt a href     gt Contact Us lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt     lt div class  jumbotron  gt       lt h1 gt Welcome  lt  h1 gt       lt p gt We re an awesome company that creates virtual things for portable devices  lt  p gt       lt p gt  lt a class  btn btn-primary btn-lg  role  button  gt Learn more lt  a gt  lt  p gt   lt  div gt     lt  -- JavaScript -- gt   lt script src  js jquery-1 10 2 js  gt  lt  script gt   lt script src  js bootstrap js  gt  lt  script gt        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

User · Answer

You can also create a custom jumbotron with whatever features changes you want and apply that class in your html    jumbotronTransp      padding  30px     margin-bottom  30px     font-size  21px     font-weight  200     line-height  2 1428571435     color  inherit     background-color  transparent

User · Answer

I think another way to do it is to use in-line css  just add your background-color in the html code  lt div class  quot jumbotron quot  style  quot background-color blue  quot  gt       lt h3 gt Piece of text lt  h3 gt   lt  div gt

User · Answer

Adding internal style is not good for SEO and Performance  I add an id to the div e g  id  jumbocustom  and style it   jumbocustom       background red

User · Answer

In the  css try   x000D   x000D   jumbotron   x000D      background-color red  important   x000D    x000D   x000D   x000D

User · Answer

The easiest way to change the background color of the jumbotron  If you want to change the background color of your jumbotron  then for that you can apply a background color to it using one of your custom class   HTML Code    lt div class  jumbotron myclass  gt          lt h1 gt My Heading lt  h1 gt       lt p gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  lt  p gt   lt  div gt     CSS Code    lt style gt       myclass          background-color  red         lt  style gt

User · Answer

I put the jumbotron in a  lt header gt  class and added background-color  black  important  to the header class in css

User · Answer

You can use the following to change the background-color of a Jumbotron    lt div class  container  gt       lt div class  jumbotron text-white  style  background-color   8c6278   gt           lt h1 gt Coffee lover project   lt  h1 gt       lt  div gt   lt  div gt

User · Answer

Add this to your css file   jumbotron       background-color transparent  important       It worked for me

User · Answer

In the HTML file itself  modify the background-color of the jumbotron using the style attribute   lt div class  jumbotron  style  background-color  CFD8DC   gt  lt  div gt

User · Answer

Try this    lt div style  background transparent  important  class  jumbotron  gt       lt h1 gt Welcome  lt  h1 gt       lt p gt We re an awesome company that creates virtual things for portable devices  lt  p gt       lt p gt  lt a class  btn btn-primary btn-lg  role  button  gt Learn more lt  a gt  lt  p gt   lt  div gt    Inline CSS gets preference over classes defined in a  css file and the classes declared inside  lt style gt

User · Answer

jumbotron   background-color black  important        Add this one line code in  css file  worked for me

User · Answer

just and another class to jumbotron   bg-transparent   It will work perfectly  bootstrap color documentation  https   getbootstrap com docs 4 3 utilities colors

User · Answer

Just remove class full from  lt html gt  and add it to  lt body gt  tag  Then set style background-color transparent  important  for the Jumbotron div  as Amit Joki said in his answer

User · Answer

You don t necessarily have to use custom CSS  or even worse inline CSS   in Bootstrap 4 you can use the utility classes for colors  like    lt div class  jumbotron bg-dark text-white  gt        And if you need other colors than the default ones  just add additional bg-classes using the same naming convention  This keeps the code neat and understandable   You might also need to set text-white on child-elements inside the jumbotron  like headings

[html] How to change the background-color of jumbrotron?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to background-color