Clash Royale CLAN TAG#URR8PPP

Bootstrap 4, equal spacing between columns with different content widths

So within my footer I am using <div class="col"> which creates same width columns, although this is great, the content inside each columns are different widths so visually it looks like the spacing between each column are different widths as shown below:-

<div class="col">

Is there a way to create equal spacing between these columns based on the width of their content so the spacing between each look the same?

3 Answers
3

The easiest way is to combine col-auto (to wrap the columns) with col (to space the columns)...

col-auto

col

<div class="row">
<div class="col-auto">
...
</div>
<div class="col"> </div>
<div class="col-auto">
...
</div>
<div class="col"> </div>
<div class="col-auto">
...
</div>
<div class="col"> </div>
<div class="col-auto">
...
</div>
<div class="col"> </div>
<div class="col-auto">
...
</div>
<div class="col"> </div>
<div class="col-auto">
...
</div>
<div class="col"> </div>
<div class="col-auto">
...
</div>
</div><!--/row-->


Demo: https://www.codeply.com/go/s4Jk0NBC6a

To adjust spacing, add a class ".no-gutter" inside your footer div tag. And add style in your css file.

.no-gutter [class*='col-']
width: auto;



This can be done using the flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flexbox

In Bootstrap 4 there are utilities for convenient work with it https://getbootstrap.com/docs/4.1/utilities/flex/

Example: https://www.codeply.com/go/WQtjXDd8qA

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.