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.
0
Where do you insert the first code snippet?
The first code snippet is Javascript. So in the case of using the roots theme, you would insert it into _main.js. However, in other themes it may be a different file. You could also enqueue it as a separate file if you really need to. Here’s the WP codex link for doing that: http://codex.wordpress.org/Function_Reference/wp_enqueue_script. Let me know if you have more questions, I’d be happy to help.