0

I would like to have a thinner space between my 3 rows, and ideally and really thin space (close to the row no-gutters class) between each of these pictures.

Here is the result:

enter image description here

<div class="container-fluid" data-bootstrap-contains="containers" data-n1ed-block-category="grid">
<div class="container">
<div class="row no-gutters" style="width:100%">
<div class="col">
<p><a data-caption="Offenbach : mode d'emploi (2019)&lt;br/&gt;Louis Bilodeau&lt;br/&gt;Avant Scène Opéra" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6878/original/louisbilodeau.jpeg?1648589142"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6879/original/louisbilodeau-min.jpg?1648589158" /> </a></p>
</div>

<div class="col">
<p><a data-caption="L'enfance et l'errance pour un rappel de l'autre (2005)&lt;br/&gt;Monique Boucher&lt;br/&gt;Nota Bene" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6880/original/moniqueboucher.jpeg?1648589241"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6881/original/moniqueboucher-min.jpg?1648589252" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Un Québec polémique : éthique de la discussion dans les débats publics (2014)&lt;br/&gt;Laurence Daigneault-Desrosiers (avec D. Garand et P. Archmbault)&lt;br/&gt;Hurtubise" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6882/original/laurencedaigneault.jpeg?1648589279"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6883/original/laurencedaigneault-min.jpg?1648589296" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Passagère des limbes (2014)&lt;br/&gt;Sylvie Dion&lt;br/&gt;L'Hexagone" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6884/original/sylviedion-1.jpeg?1648589431"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6885/original/sylviedion-1-min.jpg?1648589445" /> </a></p>
</div>

<div class="col">
<p><a data-caption="La vie en apnée (2017)&lt;br/&gt;Philippe Labarre&lt;br/&gt;L'Hexagone" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6886/original/philippelabarre.jpeg?1648589544"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6887/original/philippelabarre-min.jpg?1648589557" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Le Musée des introuvables (2005)&lt;br/&gt;Fabien Ménard&lt;br/&gt;Québec Amérique" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6888/original/fabienmenard-1.jpeg?1648589634"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6889/original/fabienmenard-1-min.jpg?1648589646" /> </a></p>
</div>

<div class="col" data-n1ed-col-border-right="true">
<p><a data-caption="Le Grand Roman de Flemmar (2001)&lt;br/&gt;Fabien Ménard&lt;br/&gt;Québec Amérique" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6890/original/fabienmenard-2.jpeg?1648589666"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6891/original/fabienmenard-2-min.jpg?1648589679" /> </a></p>
</div>
</div>

<div class="row no-gutters" style="width:100%;">
<div class="col">
<p><a data-caption="Faux et filatures (2011)&lt;br/&gt;Fabien Ménard&lt;br/&gt;Québec Amérique" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6952/original/fabienmenard-3.jpeg?1649173070"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6953/original/fabienmenard-3-min.jpg?1649173081" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Alain Grandbois est-il un grand écrivain québécois? (2012)&lt;br/&gt;Patrick Moreau&lt;br/&gt;Fides" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6911/original/patrickmoreau-1.jpeg?1648823557"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6912/original/patrickmoreau-1-min.jpg?1648823575" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Pourquoi nos enfants sortent-ils de l'école ignorants? (2008)&lt;br/&gt;Patrick Moreau&lt;br/&gt;Éditions du Boréal" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6913/original/patrickmoreau-2.png?1648823595"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6914/original/patrickmoreau-2-min.jpg?1648823615" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Quinze classiques de la littérature québécoise (2015)&lt;br/&gt;Patrick Moreau (avec S. Campeau)&lt;br/&gt;Fides" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6915/original/patrickmoreau-3.jpeg?1648823635"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6916/original/patrickmoreau-3-min.jpg?1648823654" /> </a></p>
</div>

<div class="col">
<p><a data-caption="La prose d'Alain Grandbois (2019)&lt;br/&gt;Patrick Moreau&lt;br/&gt;Nota Bene" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6917/original/patrickmoreau-4.jpeg?1648823672"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6918/original/patrickmoreau-4-min.jpg?1648823688" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Ces mots qui pensent à notre place (2017)&lt;br/&gt;Patrick Moreau&lt;br/&gt;Liber" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6919/original/patrickmoreau-5.jpeg?1648823703"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6920/original/patrickmoreau-5-min.jpg?1648823718" /> </a></p>
</div>

<div class="col" data-n1ed-col-border-right="true">
<p><a data-caption="L'inscription de l'oral et de l'écrit dans le théâtre de Tristan Tzara (1999)&lt;br/&gt;Katherine Papachristos&lt;br/&gt;Peter Lang Publishing" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6921/original/katherinepapachristos.jpeg?1648824081"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6922/original/katherinepapachristos-min.jpg?1648824096" /> </a></p>
</div>
</div>

<div class="row no-gutters" style="width:100%;">
<div class="col">
<p><a data-caption="Des explosions (2015)&lt;br/&gt;Mathieu Poulin&lt;br/&gt;Les éditions de Ta Mère" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6923/original/mathieupoulin1.jpeg?1648824132"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6924/original/mathieupoulin1-min.jpg?1648824145" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Explosions (2018)&lt;br/&gt;Mathieu Poulin&lt;br/&gt;QC Fiction" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6925/original/mathieupoulin-2.png?1648824158"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6926/original/mathieupoulin-2-min.jpg?1648824171" /> </a></p>
</div>

<div class="col">
<p><a data-caption="La lutte (2019)&lt;br/&gt;Mathieu Poulin&lt;br/&gt;Les éditions de Ta Mère" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6927/original/mathieupoulin-3.jpeg?1648824184"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6928/original/mathieupoulin-3-min.jpg?1648824197" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Le cinéma de Marguerite Duras : l'autre scène du littéraire (2015)&lt;br/&gt;Caroline Proulx (avec S. Santini)&lt;br/&gt;Berne-Bruxelles" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6929/original/carolineproulx-1.jpg?1648824455"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6930/original/carolineproulx-1-min.jpg?1648824473" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Poète-Ninja (2010)&lt;br/&gt;Caroline Rivest&lt;br/&gt;Écrits des Forges" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6931/original/carolinerivest-1.jpeg?1648824501"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6932/original/carolinerivest-1-min.jpg?1648824515" /> </a></p>
</div>

<div class="col">
<p><a data-caption="Le corps du Christ pour emporter (2016)&lt;br/&gt;Caroline Rivest&lt;br/&gt;Écrits des Forges" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6933/original/carolinerivest-2.jpeg?1648824529"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6934/original/carolinerivest-2-min.jpg?1648824544" /> </a></p>
</div>

<div class="col" data-n1ed-col-border-right="true">
<p><a data-caption="L'Ennui (2000)&lt;br/&gt;Hugo Roy&lt;br/&gt;Éditions du Boréal" data-fancybox="groupe1" href="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6935/original/hugoroy.jpeg?1648824559"><img alt="" src="https://www.collegeahuntsic.qc.ca/rails_admin_image_manager/6936/original/hugoroy-min.jpg?1648824574" /> </a></p>
</div>
</div>
</div>
</div>

It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details.

Alex NJ
  • 1
  • 1
  • The code you posted doesn't render what's in your image. Please see [ask], then revise this post to make it match up. Protip: Div elements are _already_ 100% width (block level) and Bootstrap provides sizing classes anyway. Don't use inline styles. – isherwood Apr 05 '22 at 16:33
  • 1
    Please tag your Bootstrap version. – isherwood Apr 05 '22 at 16:34
  • Sorry. I had and issue with the ''It looks like your post is mostly code; please add some more details.''. Now all the code is precisely what is on the image. How can I acknowledge my Bootstrap version? – Alex NJ Apr 05 '22 at 17:10
  • `p { margin-bottom: 0; }` or whatever distance you want. The paragraphs in BS5 have a 1rem bottom margin by default – j08691 Apr 05 '22 at 17:12
  • N1ED Ecosystem 2022.3.7, CKEditor 4.6.2. – Alex NJ Apr 05 '22 at 17:17
  • Except you destroyed the snippet demo. Please use the editor to put that back. – isherwood Apr 05 '22 at 18:07
  • 1
    And again, please tag your Bootstrap version. – isherwood Apr 05 '22 at 18:09

0 Answers0