A
Anonymous

Responsive Floating Sidebar with Icons

Crea-un-sidebar-flotante-responsive-con-íconos.-Su-comportamiento-será-que-en-pantallas-de-escritorio-sea-una-contenedor-vertical-y-en-pantallas-pequeñas-una-sea-un-contenedor-horizontal-debajo-del-header,-el-header-y-el-sidebar-serán-fijos-al-scrollear.-El-header-es-un-boostrap-container,-es-decir,-el-logo-no-se-encuentra-al-iniciar-la-pantalla-sino-con-un-espacio-adicional,-el-sidebar-y-el-header-deben-estar-alineados,-es-decir,-donde-empieza-el-logo-del-header-deberá-empezar-el-sidebar,-esta-es-mi-estructura:-<div-class="base">-<header>-<nav-class="navbar-fixed-top"-style="background-color:-#eff1f3cc;">-<div-class="container">-<a-asp-controller="Home"-asp-action="Index"-class="navbar-brand">-<img-src="~/img/desk_core_logo.svg"-alt="Desk-Core"-width="55"-height="55">-</a>-<div>-<a-asp-controller="Administrador"-asp-action="Index"-type="button"-class="btn-btn-principal">-<i-class="bi-bi-house-door-fill"></i></a>-<a-asp-controller="Acceso"-asp-action="CerrarSesion"-type="button"-class="btn-btn-cancelar">-<i-class="bi-bi-box-arrow-right"></i>-</a>-</div>-</div>-</nav>-</header>-<main-role="main"-class="pb-3">-@RenderBody()-</main>-<footer-class="border-top-p-3">-<div-class="container-text-center">-<div-class="row-align-items-center">-<div-class="col"-style="text-align:-left;-font-weight:-bold;">&copy;-2024-Desk-Core</div>-<div-class="col"-style="text-align:-right;-font-weight:-bold;">EC</div>-</div>-</div>-</footer>-</div>-body-{-font-family:-"Nunito-Sans",-sans-serif;-font-optical-sizing:-auto;-font-weight:-400;-font-style:-normal;-font-variation-settings:-"wdth"-100,-"YTLC"-500;-background-color:-#eff1f3;-}-header-{-height:-96px;-}-footer-{-height:-57px;-}-.base-{-min-height:-100dvh;-display:-grid;-grid-template-rows:-auto-1fr-auto;-}

Prompt
Component Preview

About

Learn how to build a responsive floating sidebar with icons using Bootstrap and HTML. Perfect for desktop and mobile views with fixed header and aligned sidebar.

Share

Last updated 1 month ago