Bootstrap et ses marges

Bonjour

je débute un peu sur bootstrap et j'ai un doute.

j'organise un pavé d'actualité qui ressemble a ca


j'aurais aimé que les images occupe toute la largeur de chacun des pavés de news.

voici le code

	<div class="container toutelactu" id="Table_of_Contents">
          <div class="row "><!-- debut actu -->
                <div class="col-xs-12 col-sm-12 col-lg-4 pavenews">
                  <h2>les news</h2>
                  <div class="row detailnews">
                    <div class="col-xs-6 col-sm-3 col-lg-6 news1">
                     <h4>news1</h4>
                      <img class="img-responsive" src="images/VISU.png" alt=""/>
                    </div>
                    <div class="col-xs-6 col-sm-3 col-lg-6 news2">
                     <h4>news2</h4>
                     <img class="img-responsive" src="images/news2 .jpg" alt=""/>
                    </div>
                    <div class="col-xs-6 col-sm-3 col-lg-6 news3">
                     <h4>news3</h4>
                     <img class="img-responsive" src="images/news3.png" alt=""/>
                    </div>
                    <div class="col-xs-6 col-sm-3 col-lg-6 news4">
                     <h4>news4</h4>
                     <img class="img-responsive" src="images/news4.png" alt=""/>
                    </div>
                  </div>
                </div>
                
                 <div class="col-xs-12 col-lg-8 monslide">
                  	<h2>le slide</h2>
            	 </div><!-- fin slide -->
           </div><!-- fin actu -->
  	</div><!-- 	touteactu -->

mais ces images étant dans la div, …… ll y a un padding …



comment faire avec bootstrap pour que mes images occupe toute la zone colorée de chaque pavé de news ?

merci de vos conseils

Hello,

Si j'étais toi, je surclasserais comme ceci dans les styles :

.pavenews [class^=news]{
    padding: 0;
}

Si non il y a une solution un peu cracra (tu vas encore écrire de l'HTML inutile), c'est de redéfinir un <div class="row"> qui englobe le contenu des <div class="col-xs-6 col-sm-3 col-lg-6 news"> comme ceci :

<div class="row detailnews">
    <div class="col-xs-6 col-sm-3 col-lg-6 news1">
          <div class="row">
                <h4>news1</h4>
                <img class="img-responsive" src="images/VISU.png" alt=""/>
           </div>
     </div>
</div>

je ne connais pas du tout cette syntaxe
[class^=news]

pour l'autre piste cela semble fonctionner
voila le rendu


je ne comprends pas trop comment boostrap gere ca
car je me retrouve avec une image qui fais 195


incluse dans une row de 195


la div class col ayant un padding de 15


je ne sais pas si c'est valide sur le plan "boostrap" mais le résultat est là

merci pour cette piste

jacques

ça s'appelle des [url=https://developer.mozilla.org/fr/docs/Web/CSS/Reference/S%C3%A9lecteurs_d'attribut]sélecteurs d'attributs[/url], n'hésite pas à les utiliser c'est super pratique et très bien supporté

En fait, la <div class="row"> à simplement comme propriétés ceci :

.row{
    margin-left: -15px;
    margin-right: -15px;
}