web-dev-qa-db-fra.com

Comment changer la couleur de fond de jumbotron?

Je veux savoir comment changer la couleur de fond de la classe 'jumbotron', elle a un background-color #eee par défaut dans bootstrap.css. 

J'ai essayé de remplacer en effaçant ceci et en donnant l'attribut none, none !important, transparent dans mon CSS personnalisé et ne fonctionne toujours pas. 

J'ai essayé d'inspecter l'élément dans la fenêtre du navigateur et de supprimer la propriété pour voir s'il y avait un changement, c'est toujours le même problème.

Il adoptera n'importe quelle autre couleur, excepté le retrait complet de la couleur. La raison pour laquelle je pose cette question est que j’ai une image d’arrière-plan complète et que je veux simplement que jumbotron soit transparent, sans arrière-plan ni couleur. Sauf si, 

Il me manque quelque chose dans la documentation BootStrap 3.1.1 dans laquelle j'ai également vérifié.

NOTE: J'utiliserais jsfiddle.net pour vous montrer facilement, mais il ne supporte pas la version 3.1.1 et ne sait pas comment implémenter le bootstrap.

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;*/
}
htmlcsstwitter-bootstraptwitter-bootstrap-3background-color
31
TheAmazingKnight

Retirez simplement la classe full de <html> et ajoutez-la à la balise <body>. Puis définissez le style background-color:transparent !important; pour la division Jumbotron (comme Amit Joki l’a dit dans sa réponse).

14
shin

Essaye ça:

<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>

CSS en ligne obtient la préférence sur les classes définies dans un fichier .css et les classes déclarées à l'intérieur de <style>

24
Amit Joki

Ajoutez ceci à votre fichier css

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

Cela a fonctionné pour moi.

4
David

Vous ne devez pas nécessairement utiliser de CSS personnalisé (ni même pire de CSS inline). Dans Bootstrap 4, vous pouvez utiliser les classes d’utilitaire pour les couleurs , comme:

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

Et si vous avez besoin de couleurs autres que celles par défaut, ajoutez simplement des classes bg supplémentaires en utilisant la même convention de dénomination. Cela garde le code propre et compréhensible.

Vous devrez peut-être également définir du texte blanc sur les éléments enfants à l'intérieur du jumbotron, comme les en-têtes.

3
Andreas Bergström

Vous pouvez également créer un jumbotron personnalisé avec les fonctionnalités/modifications souhaitées et appliquer cette classe dans votre code HTML.

.jumbotronTransp {
   padding: 30px;
   margin-bottom: 30px;
   font-size: 21px;
   font-weight: 200;
   line-height: 2.1428571435;
   color: inherit;
   background-color: transparent;
}
2
Quent

Dans le fichier HTML lui-même, modifiez la couleur de fond du jumbotron à l'aide de l'attribut style:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

1
Debopriyo Basu

Dans le .css essayer

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

0
Rob Jones
.jumbotron {
background-color:black !important;

}

Ajoutez ce code d'une ligne dans le fichier .css, a fonctionné pour moi!

0
Karan Motwani

Comme dit dans une autre réponse de débordement de pile, il n'est pas recommandé d'utiliser! Important. 

Dans boostrap, les identifiants ont une priorité plus grande que les classes et les classes ont un plus grand prieuré que des éléments. 

La meilleure solution consiste à ajouter un identifiant arbitraire à n’importe quel élément racine de votre page, comme

<body id="my-body">
    <!-- your html code --> 
</body>

puis sélectionnez l'élément ou la classe en utilisant cet identifiant.

#my-body .jumbotron{
    /*Your css elements and values here.*/
}
0
Leonardo

J'ai mis le jumbotron dans une classe <header> et ajouté background-color: black !important; à la classe d'en-tête dans css.

0
Levi Johnson

Vous pouvez utiliser ce qui suit pour changer la couleur de fond d’un Jumbotron:

<div class="container">
    <div class="jumbotron text-white" style="background-color: #8c6278;">
        <h1>Coffee lover project !</h1>
    </div>
</div>
0
Mahdi Ghelichi

L'ajout d'un style interne n'est pas bon pour le référencement et les performances. J'ajoute un identifiant à la div, par ex. id = "jumbocustom" et le style

#jumbocustom
   {
 background:red;
   }
0
jonah