Here’s a code snippet to help auto distribute widgets in your footer. It will automatically add the correct Bootstrap class to each widget, so if you have 2, the classes will be “col-sm-6” but if you have 3 widgets then the classes will be “col-sm-4”, etc.

This is pretty specific for the environment I work in, which is WordPress, using the Roots theme starter and Bootstrap. See the CodePen script below.

Place the jQuery in _main.js (if using roots).
Place the HTML portion in templates/footer.php (roots theme). Notice that I wrap it in the “row” bootstrap class…

// Distribute footer widgets evenly
var footer_widgets = $('.content-info .container .row > .widget'),
widget_count = footer_widgets.length,
col_num = Math.floor(12 / widget_count);

footer_widgets.each(function(index, val) {
$(this).addClass('col-sm-' + col_num);

See the Pen Auto Distribute Footer Widgets in WordPress by William (@bigwilliam) on CodePen.

2 responses to “Auto distribute footer widgets in WordPress, with Bootstrap (roots theme)

Leave a Reply

Your email address will not be published. Required fields are marked *