2
\$\begingroup\$

I'm an asp.net web forms app using, for the first time, Bootstrap 4 as a responsive design framework.

I've built a 2 row header navigation with big branding on the left, where the branding spans both rows. Note, I haven't decided on menu placement, which is why you see menus on both left and right of each bar. I'm hoping this can be code reviewed for appropriate usage of bootstrap classes, etc. This is bootstrap 4, although I did steal some of the glyphicons from Bootstrap 3 as they don't appear to be included anymore. I do feel I may have applied padding and width ineffectively. Although it appears to visually do what I want, I can't help but feel I am over-using the classes throughout the html.

I am aware of several big brand multi row examples for bootstrap but a lot of them felt a little clunky, or didn't quite give me the layout I was after.

I've put this up on code pen here, and the html/css below.

HTML:

<header>

  <div id="app-header" class="p-0 m-0 mb-2">

    <nav class="app-headerrow navbar navbar-expand-md navbar-dark bg-dark pt-0 pb-0">

      <!-- Big Brand -->
      <div class="flex-column pb-1">
        <div class="flex-row pb-0">
          <a id="lnkApp" class="navbar-brand navbar-bigbrand align-bottom p-0" href="../../Default.aspx"><img id="imgApp" src="../../App_Themes/Default/img/app/applogo.png" />Big Brand</a>
        </div>
        <div class="flex-row" style="line-height: 1rem">
          <span class="navbar-text small p-0">My Application</span>
        </div>
      </div>
      <!-- End Big Brand -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="container flex-md-column w-100 align-items-stretch ml-0 mr-0 pl-0 pr-0" style="max-width:none;">

        <!-- Row 1 -->
        <div class="collapse navbar-collapse flex-row notextwrap-all" id="navbarCollapse">

          <!-- Left -->
          <ul class="navbar-nav noflexwrap">
            <li class="nav-item d-md-none">
              <span class="navbar-text"><i class="glyphicon glyphicon-user mr-2"></i>
                                IHA\chaj17
                            </span>
            </li>
            <li class="nav-item active">
              <a href="../../MasterUserControls/#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>

          <!-- Right -->
          <ul class="navbar-nav nav ml-auto noflexwrap">
            <li class="nav-item active ">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 1</a>
            </li>
            <li class="nav-item mr-2">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 2</a>
            </li>
            <li class="nav-item d-none d-md-flex">
              <span class="navbar-text"><i class="glyphicon glyphicon-user mr-2"></i>Domain\User</span>
            </li>
          </ul>
        </div>

        <!-- Row 2 -->
        <div class="collapse navbar-collapse flex-row notextwrap-all pt-0 pb-2" id="navbarCollapseBottom">

          <!-- Left -->
          <ul class="navbar-nav mr-auto noflexwrap">
            <li class="nav-item active">
              <a href="../../MasterUserControls/#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown02">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>

          <!-- Right -->
          <ul class="navbar-nav nav ml-auto noflexwrap">
            <li class="nav-item active">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 1</a>
            </li>
            <li class="nav-item mr-4">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 2</a>
            </li>
          </ul>
          <div id="app-search" class="input-group noflexwrap">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
            <div class="input-group-append">
              <button class="btn btn-success" type="button"><i class="glyphicon glyphicon-search"></i></button>
            </div>
          </div>
        </div>

      </div>
    </nav>
  </div>

</header>

Extra CSS:

#app-search
{
    max-width:200px;
}

#app-search input
{
    background-color:#e1e1e1;
    border:none;
    line-height:1.20rem;
}

#app-search input,
#app-search button
{
    height:2rem;
}
#app-search button
{
    padding-top:.2rem;
}

.noflexwrap
{
    flex-wrap:nowrap !important;
}

.noflexwrap-all,
.noflexwrap-all *
{
    flex-wrap:nowrap !important;
}
.notextwrap
{
    white-space:nowrap !important;
}

.notextwrap-all,
.notextwrap-all *
{
    white-space:nowrap !important;
}

<p data-height="413" data-theme-id="0" data-slug-hash="EEoNPm" data-default-tab="result" data-user="jerchap" data-embed-version="2" data-pen-title="EEoNPm" class="codepen">See the Pen <a href="https://codepen.io/jerchap/pen/EEoNPm/">EEoNPm</a> by Jeremy (<a href="https://codepen.io/jerchap">@jerchap</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.