<!-- 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 © 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;
}