Wrap WordPress menu items with Bootstrap html

Question

I am using the WordPress menu widget to generate menu items as follows (using the Bootstrap framework):

<nav class="navbar navbar-toggleable-md">
<div class="container">
    <div class="collapse navbar-collapse" id="navbarNav">
        <?php wp_nav_menu(array('theme_location' => 'header-menu','menu_class' => 'navbar-nav','container' => 'false'));?>
    </div>
</div>
</nav>

I have these functions to add some addtional style:

function add_link_atts($atts) {
    $atts['class'] = "nav-link";
    return $atts;
}

add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Question is ... I would like a div with class col-md-3 to wrap each of my four menu items so they can be laid out into bootstrap columns.

Where would I add the code in wp_nav_menu that should append before and after each menu item?

ie. how to add the <div class="col-md-3"> element before each WordPress menu item, and </div> element after each menu item.

WebDevBooster WebDevBooster · Accepted Answer · 2018-02-28T07:14:22

I would like a div with class col-md-3 to wrap each of my four menu items so they can be laid out into bootstrap columns.

The Bootstrap navbar is NOT designed and will NOT work with any column classes.
You don't need any column classes for controlling the layout of the navbar elements.

Wrap WordPress menu items with Bootstrap html

1 Answers