3 div sur une même row de la même couleur BOOTSTRAP
oce
-
oceane751 Messages postés 84 Statut Membre -
oceane751 Messages postés 84 Statut Membre -
Bonjour à tous!!
J'ai 3 div de la même couleur à mettre sur une même ligne mais le hic c'est qu'elles se collent.
Du coup on ne les distingue pas du tout!
Est ce que je peux mettre des margin?
J'ai testé mais c'est pas concluant.
Voici le code HTML
Puis le CSS des deux classes :
Si quelqu'un a une idée...
Merci d'avance!
J'ai 3 div de la même couleur à mettre sur une même ligne mais le hic c'est qu'elles se collent.
Du coup on ne les distingue pas du tout!
Est ce que je peux mettre des margin?
J'ai testé mais c'est pas concluant.
Voici le code HTML
<div class="row">
<div class="col-lg-8 col-lg-offset-2" style="padding-top:30px;">
<div class="rectangle col-lg-4">
<div class="texte_encadre_noir">300 x 160px</div>
</div>
<div class="rectangle col-lg-4">
<div class="texte_encadre_noir">300 x 160px</div>
</div>
<div class="rectangle col-lg-4">
<div class="texte_encadre_noir">300 x 160px</div>
</div>
</div>
</div>
Puis le CSS des deux classes :
.rectangle {
height:160px;
background-color:#353535;
margin-bottom:40px;
display:table;
}
.texte_encadre_noir {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#fff;
display:table-cell;
vertical-align:middle;
width:100%;
margin:0 auto;
text-align:center;
}
Si quelqu'un a une idée...
Merci d'avance!
A voir également:
- 3 div sur une même row de la même couleur BOOTSTRAP
- Ai suite 3 - Télécharger - Optimisation
- La boite a couleur - Télécharger - Divers Photo & Graphisme
- Excel cellule couleur si condition texte - Guide
- Changer la couleur de la barre des taches - Guide
- Picasa 3 - Télécharger - Albums photo
4 réponses
Bonjour,
voici l'image que je voudrai
Et franchement j'ai pas envie d'utiliser des images..
Merci ;)
voici l'image que je voudrai
Et franchement j'ai pas envie d'utiliser des images..
Merci ;)
Salut,
Essaye d'appliquer le background-color sur .texte_encadre_noir plutôt que sur la classe rectangle.
Tu peux éventuellement ajouter un padding à ta classe .rectangle pour ajouter de l'espace.
Bonne journée
Essaye d'appliquer le background-color sur .texte_encadre_noir plutôt que sur la classe rectangle.
Tu peux éventuellement ajouter un padding à ta classe .rectangle pour ajouter de l'espace.
Bonne journée
Bonjour,
col-lg-8 sont des class de Bootstrap et les colonnes sont normalement espacées de 30px. Je pense qu'il y à un bug dans ton code, tu ne doit pas appeler le css de Bootstrap ...
col-lg-8 sont des class de Bootstrap et les colonnes sont normalement espacées de 30px. Je pense qu'il y à un bug dans ton code, tu ne doit pas appeler le css de Bootstrap ...
Le contenu des colonnes est espacé (grâce à un padding appliqué sur ces colonnes) mais celles-ci sont bien collées entre elles : https://getbootstrap.com/css/#grid-example-basic
D'où l'idée d'appliquer le bg-color sur le contenu et pas sur les colonnes ;)
D'où l'idée d'appliquer le bg-color sur le contenu et pas sur les colonnes ;)
Bonjour et merci pour vos réponses :D
Je dois donc mettre mon bg-color dans la class texte_encadre_noir?
parce que sinon j'avais fait ça :
et le css
Est ce une bonne solution?
Merci ;)
Je dois donc mettre mon bg-color dans la class texte_encadre_noir?
parce que sinon j'avais fait ça :
<div class="row">
<div class="col-lg-10 col-lg-offset-2" style="padding-top:30px;">
<div class="rectangle col-lg-3">
<div class="texte_encadre_noir">300 x 160px</div>
</div>
<div class="rectangle col-lg-3">
<div class="texte_encadre_noir">300 x 160px</div>
</div>
<div class="rectangle col-lg-3">
<div class="texte_encadre_noir">300 x 160px</div>
</div>
</div>
</div>
et le css
.rectangle {
height:160px;
background-color:#353535;
margin-bottom:40px;
display:table;
margin-right: 29px;
}
.texte_encadre_noir {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#fff;
display:table-cell;
vertical-align:middle;
width:100%;
margin:0 auto;
text-align:center;
}
Est ce une bonne solution?
Merci ;)
