I am using Bootstrap's grid system in the footer of the website I'm currently developing.
I want to have 2 columns next to each other (so I'm using the class col-6 for each one of them), but since some elements are too large, the text wraps to a second line and the column grows vertically to have enough place for them. This makes the other column grow vertically too and puts a space between it and the next element.
I've seen a similar problem which was resolved but the solution was to put an element from the right column and the next row's element from the left column in a same row, which solves the problem but it is not a viable option when I'm dealing with quite a number of entries.
Here's my HTML for these elements :
<div class="col-lg-5 col-sm-12">
<p class="footer-title">NOS SOCIÉTÉS</p>
<div class="row no-gutters">
<div class="col-lg-6 col-sm-12"><p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Jaenicke</a><span> - Guebwiller</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">René Graf</a><span> - Colmar</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Graf Services Plus</a><span> - Colmar</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Vivale</a><span> - Turckheim</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p></div>
<div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p></div>
</div>
If you need any other information, feel free to ask, I might have forgotten something useful.
If the order of the HTML items can be changed (which you can do), then there are 2 ways to do this.
1. Use 2 columns instead of multiple columns
Create 2 columns and put half of the items in the first column and half in the second. This is how the answer you linked to does it and you said you couldn't do that, but it is the only way if you want to use the grid.
Run the snippet to see it in action: (Note: I have changed 'col-sm-12' to col-sm-6 just so that you can see the effect when you run the snippet)
.row.no-gutters p { background:#eee; }<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<p class="footer-title">NOS SOCIÉTÉS</p>
<div class="row no-gutters">
<div class="col-lg-6 col-sm-6">
<p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p>
<p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p>
<p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p>
<p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p>
<p><a href="#">Jaenicke</a><span> - Guebwiller</span></p>
<p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p>
<p><a href="#">René Graf</a><span> - Colmar</span></p>
</div>
<div class="col-lg-6 col-sm-6">
<p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p>
<p><a href="#">Graf Services Plus</a><span> - Colmar</span></p>
<p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p>
<p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p>
<p><a href="#">Vivale</a><span> - Turckheim</span></p>
<p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p>
<p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p>
</div>
</div>2. Use CSS columns.
Put all of your items in one single div, and add the following CSS to the class for that div.
This CSS will display the content in the number of columns in column-count (i.e. 2 here):
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
This sets the gap between the columns - you were using no-gutter so I've set it to 0 here.
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
Finally, this sets the minimum width for the columns. Here we've set it to 200.
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
This will create 2 columns while the container is at least 400px (i.e. 2 cols x 200px). If the container gets smaller than 400px, it can no longer fit 2 columns so it will display everything in a single column.
Run the snippet to see it in action:
/* Just for the demo */
.mycolumns p {background:#eee;}
.mycolumns {
/* specify number of columns */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
/* specify min width for columns */
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
/* specify the gap between columns */
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<p class="footer-title">NOS SOCIÉTÉS</p>
<div class="mycolumns">
<p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p>
<p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p>
<p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p>
<p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p>
<p><a href="#">Jaenicke</a><span> - Guebwiller</span></p>
<p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p>
<p><a href="#">René Graf</a><span> - Colmar</span></p>
<p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p>
<p><a href="#">Graf Services Plus</a><span> - Colmar</span></p>
<p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p>
<p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p>
<p><a href="#">Vivale</a><span> - Turckheim</span></p>
<p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p>
<p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p>
</div>Note that you will need to change the order of the items to suit, no matter how you do this.
Displaying them "across and down" (i.e. col 1, col 2, col 1, col 2 etc) with variable height items can't easily be achieved without getting the gap you are experiencing. They have to be displayed "down and across" (i.e. fill column 1 first, then column 2) to overcome the gapping.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments