PRIMARY PAGE HEADER

Navbar Beets

The .navbar class is reserved for regular Bootstrap which can be used with Beets and there for we need to use a prefix of "-b" for our navbar.

Markup

The contents of the left, right and middle columns are aligned accordingly. Since the navbar is built of .col you can remove the middle column if you don't need it. Also, you can set fixed width for columns that you know don't need a responsive width.

<nav class="row b-navbar">
    <div class="col b-navbar-left bg-primary">Left</div>
    <div class="col b-navbar-middle bg-secondary">Middle</div>
    <div class="col b-navbar-right bg-primary">Right</div>
</nav>

Styles

<nav class="row b-navbar">
    <div class="col b-navbar-left">Left</div>
    <div class="col b-navbar-middle">Middle</div>
    <div class="col b-navbar-right">Right</div>
</nav>

<nav class="row b-navbar b-navbar-light">
    <div class="col b-navbar-left">Left</div>
    <div class="col b-navbar-middle">Middle</div>
    <div class="col b-navbar-right">Right</div>
</nav>

<nav class="row b-navbar b-navbar-white border-top">
    <div class="col b-navbar-left">Left</div>
    <div class="col b-navbar-middle">Middle</div>
    <div class="col b-navbar-right">Right</div>
</nav>

Example