3 div sur une même row de la même couleur BOOTSTRAP

oce -  
oceane751 Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   -
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 

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

4 réponses

Réponse 1 / 4
oceane751 Messages postés 80 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,

voici l'image que je voudrai


Et franchement j'ai pas envie d'utiliser des images..

Merci ;)
0
Réponse 2 / 4
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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
0
Réponse 3 / 4
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
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 ...
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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 ;)
0
Réponse 4 / 4
oceane751 Messages postés 80 Date d'inscription   Statut Membre Dernière intervention  
 
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 : 
<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 ;)
0

Discussions similaires

Ca veut dire quoi :3
Moi -
Adraen -

3 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses
Signification de :3
blanchecanelle -
Adraen -

6 réponses
signification "<3" dans un sms
lecogno -
Utilisateur anonyme -

3 réponses
Retrouver réglages couleurs d'origine de mon écran W10
LoulouSophie -
pistouri -

8 réponses