Understrap: Why Don't We Use Bootstrap Grid in Header?

Created on 18 Jun 2018 · 4Comments · Source: understrap/understrap

Issue is about..

[ ] a Bug Report
[ ] a Feature Request
[ ] a Suggestion
[x] a Question
[ ] I need help

Comments

I'm curious, why don't we use a bootstrap grid for the header? Something like:

            <div class="col-md-6">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarNavDropdown"
                        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- The WordPress Menu goes here -->
                <?php wp_nav_menu(
                    array(
                        'theme_location'  => 'primary',
                        'container_class' => 'collapse navbar-collapse',
                        'container_id'    => 'navbarNavDropdown',
                        'menu_class'      => 'navbar-nav',
                        'fallback_cb'     => '',
                        'menu_id'         => 'main-menu',
                        'depth'           => 2,
                        'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                    )
                ); ?>
            </div>
            <?php if ( 'container' == $container ) : ?>
        </div><!-- .container -->
    <?php endif; ?>

</nav><!-- .site-navigation -->

Impetus for this question was that I wanted to move the search box onto the same row as the logo and nav menu, with a bootstrap grid this would be trivial...but more complicated this way?

Source

davidshq

Most helpful comment

I'd like to also vote for no grid in header by default as it's more in line with BS official docs.

But for sure go ahead and add in grid wrappers in a child theme if you want them :) It's worth checking out what utility classes you can use on the nav first though (it's flex based) https://getbootstrap.com/docs/4.1/utilities/flex/. Might be able to make most things happen with the utilities from there :)

pattonwebz on 18 Jun 2018

👍3

All 4 comments

@davidshq You certainly can. The header.php is a base starter header. I often include Bootstrap rows, columns and other Bootstrap classes in headers for projects. Totally up to you.

axlright on 18 Jun 2018

The default navbar with Bootstrap does not use the grid:
https://getbootstrap.com/docs/4.1/components/navbar/

It wouldn't be very Understrap to differ from this. Not everyone wants/needs to have the grid in their header.

Bootstrap is already set up to have the brand, menu, and a search bar in the navbar without any grid, so there is often not a need for it anyway. It would be an individual project choice to have a different navbar. As it is, the code you suggested above only adds unnecessary weight, there is no need to have those extra div elements with the content in the navbar.

If you look at the Bootstrap examples you'll see that the logo, nav menu, and search bar are already in the same row by using flex that is specifically applied to the navbar. They also provide classes that change the breakpoint of the nav menu. I'm a bit confused as to why the need for the grid?