<!-- top navigation header -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="/Default.aspx">
    <img id="logo" alt="Logo" src="https://picsum.photos/id/774/50/50">
    <span>Bootstrap 4 (nested layout)</span>
  </a>

  <!-- Toggler/collapsible Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          About Us
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Meetings meetings meetings</a>
          <a class="dropdown-item" href="#">Subscriptions</a>
          <a class="dropdown-item" href="#">History</a>
        </div>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
    </ul>
  </div>
</nav>




<!-- START of container section -->
<div class="container">

  <!-- START of content sections -->
  <!-- ========================= -->

 
  <!-- Jumbotron content section-->
  <!-- <div class="row">
    <div class="col bg-primary">JUMBOTRON section
    </div>
  </div> -->

  
  
  <!-- main page content and sidebar box -->
  <div class="row">

    <!-- sidebar navigation section -->
    <!-- auto-hides when small screen -->
    <div class="col-3 sidebar_nav d-none d-sm-block d-print-none">
      <div class="row">
        <div class="col bg-danger">SIDEBAR-NAVIGATION
          <p>(hide on small screen, never print)</p>
        </div>
      </div>
    </div>

    <!-- main content section -->
    <div class="col-8">
      <div class="row">
        <div class="col-md-4 bg-warning">A1</div>
        <div class="col-md-4 bg-warning">A2</div>
        <div class="col-md-4 bg-warning">A3</div> 
      </div>
      <div class="row">
        <div class="col-4 bg-info">B1</div>
        <div class="col-8 bg-info">B2</div>
      </div>
      <div class="row">
        <div class="col-3 bg-success">C1</div>
        <div class="col-3 bg-success">C2</div>
        <div class="col-3 bg-success">C3</div>
        <div class="col-3 bg-success">C4</div>
      </div>
      <div class="row">
        <div class="col-12 bg-secondary">D</div>
      </div>
    </div>



    <!-- END of container section -->
  </div>   

  
  <!-- footer section 
  <footer class=" py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
  </footer> -->

/* styling of content boxes */
.col {
  background-color: lavender;
  border-radius: 0.3rem;
/*  margin: 0.1rem;
  padding: 1rem; */
}  

/* size-defined content boxes */
[class*='col-'] {
  background-color: lavender;
  border-radius: 0.3rem;
/*  margin: 0.1rem;
  padding: 1rem; */
}


/* styling of sidebar-navigation section */
.sidebar_nav {
  background-color: pink;
  border-radius: 0.3rem;
/*  margin: 0.1rem;
  padding: 1rem; */

  /* keep sidebar-nav 'sticky' */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}