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
google disavow links

Google : outil pour refuser et désavouer des liens

Si vous estimez que le classement de votre site est mis à mal par la faible qualité des liens que vous ne contrôlez pas, vous pouvez demander à Google de ne pas les prendre en compte lors de l'évaluation de votre site.

Oct 17 2012

Créer un serveur de sauvegarde

Si la plupart des hébergeurs proposent des solutions de sauvegarde dans leurs offres, ces sauvegardes s'avèrent souvent insuffisantes, nécessitant la mise en place d'un serveur de sauvegardes incrémentales externe. Tout ça pour à peine 5 € euros par mois

Fév 23 2015