Bootstrap 4 : Responsive Sidebar de taille fixe via scss

0

Conserver une sidebar de taille fixe pour des colones fluides en responsive design avec Boostrap 4 sauf pour les mobiles

Dans cette exemple, je vais forcer la sidebar sur une taille de 300px. Bootstrap 4 ajoute un padding de 15px à gauche et à droite, la taille total de la barre latérale est donc de 330px (300 + 15 + 15).

Pour la sidebar, il suffit donc juste de forcer la taille via css :

 max-width: 330px; min-width: 300px;

pour le contenu, il va donc falloir calculer la taille en live. Bootstrap 4 dimension les colones en pourcentage.  Un simple cacl fera donc l’affaire.

calc(100% - 330px)

Structure HTML

<body class="sidebar-prymary">
<div class="content">
<main>Contenu du site</main>
<aside class="sidebar">Barre latérale</aside>
</div>
</body>

Code SCSS

$main-sm-columns: 12;
$sidebar-sm-columns: 4;
.main {
 @include make-col-ready;
 @include media-breakpoint-up(md) {
 @include make-col($main-sm-columns);

.sidebar-primary & {
 width: calc(100% - 330px);
 max-width: calc(100% - 330px) !important;
@include make-col($main-sm-columns - $sidebar-sm-columns);
 }
 }
}

.sidebar {
 @include make-col-ready;
 @include media-breakpoint-up(md) {
 @include make-col($sidebar-sm-columns);

min-width: 330px;
 max-width: 330px;
 }
}

.sidebar-primary {
 .content {
 @include make-row;
 }
}

Voilà, j’obtiens donc une colonne de contenu dont la taille s’adapte automatiquement pour conserver une barre latérale de taille fixe. Pour les petits écrans (inférieur à md), on revient au fonctionnement classique de Boostrap 4 grâce aux medias queries media-breakpoint-up. J’ai conservé la gestion des grids de bootstrap pour des cas particuliers et pouvoir jouer avec les colones en fonction des appareils.

Cette barre latérale de taille fixe peut s’avérer utile pour intégrer des éléments non responsive comme des publicités (le bon vieux MPU), ou des plugins de réseaux sociaux (facebook like box, etc …)

Recevoir la newsletter

Recevoir la newsletter

Recevez les dernières news et astuces Wordpress & Développement Web par email une fois par semaine

Bravo, vous êtes inscrits