Login/Register
How to change the background-color of jumbrotron?
Asked Answered
Solved htmlcsstwitter-bootstraptwitter-bootstrap-3background-color
A

14

53

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;*/
}
Arlyn answered 7/4, 2014 at 5:14 Comment(4)
adding !important should make it override the default style with your custom one:.jumbotron{background-color: #FFFFFF!important;} – Explication
i am speaking of the background-color:none !important; and other attempts I've tried to make it override, it refuse to change. – Arlyn
I think your code works fine, it is just you need to use this format Value: <color> | transparent | inherit – Scarito
JSFiddle supports Bootstrap 3.2.0 – Janka
R
21

Just remove class full from <html> and add it to <body> tag. Then set style background-color:transparent !important; for the Jumbotron div (as Amit Joki said in his answer).

Roselinerosella answered 7/4, 2014 at 9:18 Comment(0)
S
31

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>

Sheathing answered 7/4, 2014 at 5:19 Comment(6)
No, the background image is still behind the white background jumbotron uses up. I added the jumbotron class to this template since it didn't have any: startbootstrap.com/full. It started to act up. – Arlyn
@TheAmazingKnight, the problem is that jumbotron is only till the white part. In your full.css you are defining some image – Sheathing
I'm not sure I understand...? – Arlyn
See, remove the .full class – Sheathing
But I want the image and remove that white background color blocking half of my image. – Arlyn
!important is not important anymore. Just this: background:transparent – Bertrand
S
24

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:

<div class="jumbotron bg-dark text-white">
...

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.

Sori answered 8/5, 2018 at 8:27 Comment(2)
I had the same idea but when I tried that and it didn't work. The Jumbotron's background colour takes precedence over the bootstrap background colours. – Thistledown
Yes this works. I created a class of .bg-jcol and added it to .jumbotron. Sometimes, you have to hold shift when resetting your web page to override the cached page. You will find the instructions in Bootstrap under the 'navbar' component. – Topee
R
21

Just remove class full from <html> and add it to <body> tag. Then set style background-color:transparent !important; for the Jumbotron div (as Amit Joki said in his answer).

Roselinerosella answered 7/4, 2014 at 9:18 Comment(0)
E
9

Add this to your css file

.jumbotron {
    background-color:transparent !important; 
}

It worked for me.

Engud answered 14/12, 2015 at 2:15 Comment(0)
F
4

In the HTML file itself, modify the background-color of the jumbotron using the style attribute:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

Fireside answered 7/2, 2018 at 7:44 Comment(2)
Why should anyone use inline style nowadays? – Trailblazer
@NicoHaase if someone decides to make a pure html-bootstrap project without linking any CSS file, it might come to use. I have done this in my freecodecamp tribute page project. – Fireside
B
2

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;
}
Bleak answered 22/11, 2014 at 2:54 Comment(0)
S
2

just and another class to jumbotron 

bg-transparent

It will work perfectly

bootstrap color documentation: https://getbootstrap.com/docs/4.3/utilities/colors/

Stilbite answered 27/5, 2019 at 14:34 Comment(0)
M
2

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:

<div class="jumbotron myclass">   
    <h1>My Heading</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

CSS Code:

<style>
    .myclass{
        background-color: red;
    }
</style>
Misnomer answered 6/2, 2020 at 6:7 Comment(1)
Your profile indicates you're associated with the company that owns the site to which you have linked. Linking to something you're affiliated with (e.g. a product or website) without disclosing it's yours in your post is considered spam on Stack Exchange/Stack Overflow. See: What signifies "Good" self promotion?, some tips and advice about self-promotion, What is the exact definition of "spam" for Stack Overflow?, and What makes something spam. – Fireguard
T
1

You can use the following to change the background-color of a Jumbotron:

<div class="container">
    <div class="jumbotron text-white" style="background-color: #8c6278;">
        <h1>Coffee lover project !</h1>
    </div>
</div>
Tennietenniel answered 10/9, 2018 at 20:33 Comment(0)
T
0

In the .css try

.jumbotron {
    background-color:red !important; 
}
Tormentor answered 16/8, 2016 at 19:58 Comment(0)
M
0
.jumbotron {
background-color:black !important;

}

Add this one line code in .css file, worked for me!

Mosque answered 8/11, 2016 at 8:20 Comment(1)
Please don't downvote an answer without saying why you did it. This looks like a reasonable answer to me and I have no way of knowing why this is problematic now (if it is). – Pindaric
K
0

I put the jumbotron in a <header> class and added background-color: black !important; to the header class in css.

Kegan answered 22/4, 2017 at 4:58 Comment(0)
L
0

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;
   }
Lieu answered 17/2, 2018 at 14:4 Comment(0)
U
0

I think another way to do it is to use in-line css, just add your background-color in the html code

<div class="jumbotron" style="background-color:blue;">
    <h3>Piece of text</h3>
</div>
Umbelliferous answered 30/9, 2020 at 10:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.