Bootstrap 4 : Responsive Sidebar de taille fixe via scss

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 ...)

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Vous pourriez aussi être intéressés par

Sauvegarde automatique de Mysql

Système de sauvegarde automatique des bases de données MySQL. automysqlbackup sauvegarde toutes vos tables de données et les conservent plusieurs jours, semaines ou mois, selon vos besoins

Août 05 2015
facebook developers

Créer une application Facebook

Je vous propose un tuto pour suivre pas à pas les étapes de création d'une application pour Facebook à l'aide de PHP. J'ai choisi de créer un petit quizz viral, le principe de base sera le même pour créer toute autre application facebook.

Août 03 2013