html, body { height: 100% } body { display: flex; flex-direction: column; align-items: stretch; } .avatar{ border-radius: 100%; width:40px; height:40px; } .navbar-brand img { width: 40px; margin-right: 10px; } .navbar-toggler { border: none; box-shadow: none !important; } main { display: flex; flex-grow: 1; align-items: stretch; } sidebar { width: 300px; padding: 15px; background-color: rgba(var(--bs-dark-rgb)); display: flex; flex-direction: column; } sidebar div { display: flex; flex-direction: column; border-bottom: 1px solid var(--bs-body-color); padding-bottom: 10px; } sidebar a { text-decoration: none; color: var(--bs-body-color); ; opacity: 0.6; margin: 5px 0px; } sidebar a:hover { text-decoration: none; opacity: 1; } content { flex-grow: 1; align-items: stretch; padding: 15px; } @media (max-width: 991px) { sidebar { width: 70px; } sidebar i { font-size: 200%; } sidebar span { display: none; } }