24 dispositions de colonnes Bootstrap (organiser le contenu)

Vous pouvez distribuer très facilement différents types de contenu avec ces meilleures dispositions de colonnes Bootstrap sur votre site Web.

Au lieu d'errer (désespérément), nous avons fait toutes les recherches à votre place.

Vous pouvez désormais enrichir votre site Web avec une excellente vitrine de contenu, en utilisant différentes dispositions de colonnes.

Dans la conception de la mise en page, la colonne a une importance primordiale. Il ORGANISE le contenu et les images à l'intérieur de la page. Ne pas s'affronter.

Le modèle de la colonne Bootstrap PEUT VARIER en fonction de l'unicité que vous souhaitez apporter à votre site.

Mais qu'entendons-nous vraiment par la conception de la disposition des colonnes ?

Pour vous donner une meilleure idée, voici quelques exemples :

• Écran divisé
• Disposition asymétrique
• Seule colonne
• Magazine
• Une grille de cartes
• Barre latérale fixe
• Des boites
• Disposition en forme de F

Nous nous sommes assurés d'inclure autant de designs différents que possible - QUELQUE CHOSE pour TOUT LE MONDE.

Meilleures dispositions de colonnes Bootstrap

Pied de page Bootstrap V19

Même en parlant de pieds de page, ils peuvent comporter plusieurs colonnes pour une excellente distribution de contenu. Voici une solution moderne et dynamique avec un fond violet qui pimentera certainement les choses sur votre site Web.

Il y a quatre colonnes, que vous pouvez affiner et activer pour une expérience utilisateur de premier ordre sur votre page.

Le design est également en phase avec tous les appareils populaires, s'acclimatant INSTANTANÉMENT aux smartphones, tablettes et ordinateurs de bureau.

Notez que bien que vous puissiez modifier le modèle à votre guise, vous devez conserver la section des droits d'auteur intacte.

Plus d'infos / Télécharger la démo

Pied de page Bootstrap V18

Bootstrap Footer V18 est une mise en page claire avec plusieurs colonnes pour créer une zone de pied de page enviable sur votre site Web.

Outre la section À propos et les icônes de médias sociaux, il existe différents liens pour les pages et les catégories et un formulaire de contact.

Vous pouvez utiliser celui-ci si vous créez un site Web d'une page, mais N'HÉSITEZ PAS à l'intégrer également à d'autres styles de site. Il n'est pas nécessaire de vous limiter de quelque manière que ce soit.

Plus d'infos / Télécharger la démo

Pied de page Bootstrap V10

Si vous êtes à la recherche d'une zone de pied de page propre et minimaliste avec quatre colonnes, cette disposition Bootstrap est votre meilleur choix. Ce n'est pas seulement que le design est joli et réactif, mais la structure du code est également très conviviale.

Cela dit, que vous soyez débutant ou expert , vous pouvez commencer à travailler sur votre puissante section de pied de page dès le départ.

VOUS POUVEZ AJOUTER n'importe quel lien que vous voulez, encourager vos utilisateurs à s'abonner à votre newsletter et connecter votre site Web à vos plateformes de médias sociaux préférées.

Plus d'infos / Télécharger la démo

Formulaire de contact V14

Le formulaire de contact V14 est une approche créative de la disposition des colonnes Bootstrap pour la section ou la page de contact de votre site Web.

Il est divisé en deux sections ; l'un est pour les mots supplémentaires et encourageants sur votre entreprise, vos services et autres, et l'autre affiche un formulaire de contact complet.

Le formulaire comporte PLUSIEURS champs, une zone de texte et comprend même une liste déroulante. N'hésitez pas à utiliser l'outil pour tout projet sur lequel vous travaillez, car il est facile à personnaliser et à améliorer avec vos réglementations en matière de marque.

Plus d'infos / Télécharger la démo

Formulaire de contact V13

Lorsque vous ajoutez une page de contact à votre site Web ou à votre blog, NE vous contentez PAS du formulaire. Vous pouvez toujours accélérer les choses avec un design soigné qui arbore plusieurs colonnes pour afficher différents détails et informations.

Grâce à la base Bootstrap, vous savez que la mise en page est entièrement fluide , s'adaptant aux différentes tailles d'écran sans accroc. Vous pouvez même pré-tester les choses avant de vous engager pleinement.

Quant au formulaire de contact, il est assez simple, avec nom, e-mail et zone de texte.

Plus d'infos / Télécharger la démo

Disposition réactive à 3 colonnes

La disposition à trois colonnes est une excellente conception pour offrir trois options de variantes au visiteur. Comme vous pouvez le voir sur la photo, il y a trois colonnes affichées côte à côte.

La position de la colonne peut varier en fonction de la taille de votre page. Par exemple, si la largeur de la page est ajustée à une échelle plus petite, la troisième colonne apparaîtra sous la première et la deuxième colonne.

Par contre, le réajustement de la hauteur de la page fait trois colonnes, et elles seront consécutivement empilées les unes avec les autres.

Celui-ci peut être PARFAIT pour un site internet fournissant trois informations différentes à l'utilisateur. Ce que vous aimerez dans cette colonne bootstrap, c'est la flexibilité qu'elle offre aux autres créateurs de sites Web.

Il est assez difficile de trouver une solution de colonne fiable basée sur CSS.

Plus d'infos / Télécharger la démo

Disposition en colonnes Pinterest Pure CSS

Comme vous pouvez le voir sur l'image, ce type de colonne est ce que vous avez appelé la disposition « Une grille de cartes ». Quel est le but de ce style de colonne bootstrap ? Il est souvent utilisé pour les sites Web qui doivent afficher beaucoup d'informations sur une seule page.

Les aperçus en forme de carte montrent une image et une courte description de ce qu'il y a à l'intérieur. Cela aide le public à trouver l'article qu'il aime en cliquant simplement sur la carte.

Ce type de mise en page est flexible et vous pouvez le manipuler pour modifier les tailles, le nombre de colonnes, l'espacement et le style des cartes.

Vous pouvez principalement voir cette mise en page sur YouTube et Pinterest (qui est la même mise en page sur cette photo). Au lieu d'utiliser JavaScript - qui est l'application standard utilisée pour cette mise en page Pinterest - Dudley Storey a utilisé CSS à la place.

Selon lui, il s'est inspiré de Kushagra Agarwal pour créer cela.

Si vous voulez voir une explication plus détaillée de son programme, vous pouvez consulter son blog ici : http://thenewcode.com/825/Pinterest-Style-Column-Layout-In-Pure-CSS.

Plus d'infos / Télécharger la démo

Disposition isométrique du commerce électronique à l'aide de la grille CSS

Vous êtes du genre entrepreneur pour vendre vos produits ? Vous aurez probablement besoin d'utiliser cette mise en page. Comme vous pouvez le voir sur la photo, c'est un moyen fantastique de présenter votre article à vos acheteurs potentiels.

Andy Barefoot est celui qui a créé cette mise en page. L'image montre de nombreux articles de chaussures, mais si vous souhaitez faire de même avec votre site Web de commerce électronique, il s'agit d'une conception à emporter pour vous.

Andy Barefoot a créé cette disposition de grille en utilisant CSS. Lorsque vous passez le bouton de la souris sur l'élément, il a un effet flottant incroyable . Dans chaque pièce, les prix sont visibles par le visiteur ou l'acheteur.

Plus d'infos / Télécharger la démo

Effet de parallaxe

C'est un style unique qui crée une disposition de colonne bootstrap. Dans l'exemple ci-dessus, lorsque vous faites défiler la page vers le bas, la colonne passe de l'une à l'autre.

C'est un style IMPRESSIONNANT pour votre page si vous souhaitez mettre un contenu différent sur une seule page. Adefful n'a pas utilisé Javascript pour cela. Il a utilisé uniquement HTML et CSS pour créer ce design.

Si vous souhaitez ajouter plus d'impact au site Web, vous pouvez en ajouter plus à votre guise.

Plus d'infos / Télécharger la démo

La plupart du temps fluide par Brad Frost

Le modèle qu'il a utilisé pour la disposition des colonnes d'amorçage est ce que vous pouvez voir principalement sur plusieurs sites Web. Cette mise en page est également appelée Magazine. Quelle est la base ? Regardez à nouveau l'exemple d'image.

Les colonnes sont séparées principalement par la poignée modulaire . Ce type de site Web à plusieurs colonnes a été conçu pour hiérarchiser le contenu principal en créant une plus grande taille de colonne.

Êtes-vous allé sur la page Yahoo dernièrement ? Il utilise le même principe MULTI-COLUMN. Le titre ou la grande nouvelle est présenté dans la première colonne, et généralement la plus grande.

Il attire l' attention du lecteur en montrant la valeur ou le contenu le plus critique. Brad Frost a créé cette mise en page inspirée du modèle de Luke Wroblewski.

Plus d'infos / Télécharger la démo

Bloc de préhension 4-Up

Cette mise en page est idéale pour présenter divers contenus sur une seule page. Alors, comment l'utiliser de manière précieuse? Si vous souhaitez créer un portfolio , ce serait un excellent design à utiliser.

D'après l'exemple d'image, il y a 12 cases à mettre en place avec votre contenu. L'utilisation d'un bloc de préhension est le moyen idéal pour afficher des images dans plusieurs cases. Lorsqu'il est utilisé dans un mobile, vous pouvez voir les tableaux dans UNE LIGNE verticalement.

Brad Frost a créé cette conception de mise en page. Il a utilisé des programmes HTML et CSS pour le terminer. Si vous aimez afficher vos photos sur votre blog, cela peut être votre sauveur ultime !

Plus d'infos / Télécharger la démo

3 colonnes de largeur égale

Dans cette colonne de largeur égale, les contenus se séparent les uns des autres à l'aide d'une grille fluide. Bien que simple, vous pouvez mettre beaucoup d'informations à l'intérieur des colonnes.

Ce style de colonne est également préféré pour les blogs et les articles. Vous pouvez l'utiliser librement tel quel en raison de son apparence minimaliste.

Plus d'infos / Télécharger la démo

Grille Flexbox

Cette mise en page peut inclure un style de colonne bootstrap typique que vous pouvez voir sur un autre site Web. C'est sans aucun doute un moyen génial de mettre en valeur votre blog.

Une fois que vous survolez les cases, il se déplace avec diverses animations. Vous pouvez également utiliser ce type de zones de colonnes sur votre site Web.

Certes, le contenu est la chose ESSENTIELLE dans un site Web, mais des designs mignons et attrayants sont également un avantage.

Même à quel point le contenu de votre site Web est bon, cela serait gênant pour les visiteurs s'il y a beaucoup de décalages ou s'ils ne peuvent pas naviguer à travers les bons boutons.

Heureusement, vous pouvez mettre du bon contenu et créer des visuels uniques dans votre colonne en même temps.

Plus d'infos / Télécharger la démo

Grille Infinite Responsive (Maçonnerie/Isotope) + Animation Révéler

Goji (le nom d'utilisateur du créateur), a créé cette mise en page inspirée de l'article de Tymphanus Codrops. Vous pouvez mettre beaucoup d'idées dans les colonnes.

Ceci est similaire à ce que vous pouvez voir sur les images Google ou Bing. Il existe des grilles infinies que vous pouvez inclure sur votre site Web. La plupart du temps, il est idéal pour les présentations de photos.

Au fur et à mesure que vous faites défiler vers le bas, vous trouverez beaucoup plus d'options. Il existe également un effet de filtre que vous pouvez ajouter sur chaque grille.

Plus d'infos / Télécharger la démo

Flux de colonnes

Colum Flow est l'une des dispositions de colonnes d'amorçage couramment utilisées sur le Web. Un plan en forme de F est entièrement conçu pour les utilisateurs qui souhaitent numériser le contenu de manière plus accessible et plus rapide .

Alors vous vous demandez peut-être comment appelle-t-on la forme F ? Habituellement, lorsqu'un lecteur lit un document, il commence du coin supérieur gauche vers la droite, puis passe à une autre ligne suivante.

Où pouvez-vous utiliser ce type de mise en page ? Sites de journaux et de magazines en ligne principalement. Les blogs aussi.

D'après ce que vous pouvez voir sur l'image conçue par le créateur, elle est plus organisée et le contenu a de meilleures impressions visuelles pour le public.

Plus d'infos / Télécharger la démo

Fractionnement d' image fantaisie (SplittingJS)

Si vous souhaitez ajouter un style un peu unique à votre mise en page, cela peut être une chose pour vous. Comme vous pouvez le voir sur l'image, il existe trois transitions différentes : Slant and Slide, Slanted Blinds, Show Border et Slide Over.

Placez le bouton de la souris sur l'image et la transition commencera à fonctionner.

Bien qu'il faille plus de navigation, les styles amusants peuvent ajouter PLUS d' excitation aux visiteurs du site. Le créateur a utilisé splitting.js pour créer le style.

Plus d'infos / Télécharger la démo

Curseur de commerce électronique v2.1

Le créateur de cette mise en page est de donner aux entrepreneurs une meilleure idée sur la façon de rendre leur site Web plus interactif .

Comme vous pouvez le voir sur l'image, il a une grande image avec une transition automatique. Si vous souhaitez trouver le contenu que vous recherchez, cliquez sur la flèche à côté de l'image.

Cette mise en page est faite pour afficher l'édition limitée ou le thème de la saison. C'est l'une des stratégies APPROPRIÉES pour permettre aux visiteurs de cliquer facilement sur l'élément.

Même si votre site Web ne concerne pas les affaires, cette mise en page peut également être utilisée par les blogueurs qui souhaitent afficher leurs galeries sur une seule page. Il est également conçu pour une navigation plus rapide .

En dehors de cela, Pedro Castro, ce créateur de mise en page, souhaite partager ses idées sur la façon dont il a créé ce style.

Plus d'infos / Télécharger la démo

Magnifique Galerie

Magnific Gallery a un excellent moyen d'afficher des grilles réactives montrant les images d'une seule page. Lorsque vous placez le bouton de la souris sur l'image, la légende de la photo apparaît.

Outre les bons visuels qu'il donne, il offre une meilleure qualité de contenu à chaque élément.

Les colonnes sont également ASSEZ GRANDES pour y écrire une légende.

Un problème que je vois dans d'autres dispositions de colonnes avec le même principe que celui-ci est que la légende prend de la place pour des informations détaillées. (Peut devenir trop petit.)

Si vous envisagez de l'utiliser pour un site Web professionnel, vous pouvez mettre une image dans chaque colonne d'amorçage et tous les détails apparaîtront à l'intérieur. Ce sera plus pratique pour l'acheteur.

Plus d'infos / Télécharger la démo

React et CSS Grid Image Gallery

Cette disposition de galerie d'images qui crée une expérience agréable en parcourant votre contenu visuel.

Lorsque vous cliquez sur l'image, elle deviendra plus visible et apparaîtra au centre. Si vous souhaitez voir plus de photos dans la galerie, cliquez sur le bouton suivant.

En revanche, si vous souhaitez revenir à l'image précédente, cliquez sur la flèche retour. C'est généralement la mise en page que vous pouvez voir sur les profils Instagram.

Si vous avez des blogs et que vous souhaitez montrer vos photos de voyage à votre lecteur, celui-ci est parfait pour vous. Présenter des images est également l'un des MEILLEURS MOYENS de communiquer davantage avec vos visiteurs.

Plus d'infos / Télécharger la démo

Disposition de la grille Flexbox avec menu mobile

Voici une autre disposition Flexbox disponible pour votre site Web. Comme vous pouvez le voir sur l'image, dans la partie supérieure, il y a deux colonnes plus importantes.

Cela signifie que ces deux-là ont un contenu plus SIGNIFICATIF que les autres. Après cela, vous verrez plusieurs colonnes plus petites. Ces colonnes ont un contenu qui prend en charge l'histoire principale.

C'est la meilleure solution pour votre site Web si vous souhaitez signaler des idées ou des événements précieux à leurs lecteurs. Vous pouvez ajouter plus de colonnes d'amorçage comme vous le souhaitez.

La conception de la mise en page est généralement visible sur plusieurs sites Web et semble être plus efficace que les autres colonnes populaires.

Plus d'infos / Télécharger la démo

Type Festival – Transition GSAP

Cette transition GSAP est une colonne d'image unique. Quel est le but d'utiliser ce type de mise en page? C'est montrer plus que dire plus. Plus que cela, l'utilisation d'images est un excellent moyen de connecter plus de personnes.

Certains sont simplement paresseux pour lire le contenu du site Web. Au lieu de vous concentrer uniquement sur le contenu, pourquoi n'essayez-vous pas de rechercher des images attrayantes qui mettent l'accent sur le thème de votre site Web ?

La stratégie utilisée dans cette seule colonne est de dire moins et de montrer plus. Cela peut également inciter plus de personnes à visiter le site Web. Cela crée un impact plus important sur le lecteur.

La bonne première impression dure.

Si vous laissez de meilleures impressions à vos visiteurs, ils auront la raison de revenir pour plus. C'est pourquoi il est essentiel de CHOISIR judicieusement les images.

Des images non pertinentes pour votre thème pourraient les confondre. Mieux vaut demander à un ami ou à un professionnel la meilleure image possible.

Plus d'infos / Télécharger la démo

Stores vénitiens

Ces stores vénitiens sont une idée à bascule. Une fois que vous déplacez votre souris sur une colonne de stores, elle se retourne . Si vous souhaitez mettre beaucoup de colonnes sur une seule page, cela peut être une excellente idée.

Plus d'infos / Télécharger la démo

Effets de survol d' image CSS

Cette image, Hover Effects Layout, vous donne une idée fantastique sur la représentation de vos images avec différents effets .

Vous pouvez choisir de faire un zoom arrière, un zoom avant, un glissement, un flou ou une échelle de gris, un sépia, un flou + une échelle de gris, une opacité, un clignotement, un éclat, un cercle et aucun effet. Pour les blogs à des fins d'images, cela peut être une mise en page à emporter pour vous.

Plus d'infos / Télécharger la démo

Article Carte de nouvelles

Haut la main pour le créateur de cette conception de mise en page. Vous n'aurez aucun problème à rechercher le style le plus pratique pour votre site Web. Comme vous pouvez le voir sur la photo, les colonnes ont été représentées dans une carte.

Chaque carte a une image et une description en dessous. Sur la première photo, lorsque vous déplacez votre souris vers elle, l'image monte et la description apparaît.

C'est un excellent moyen de mettre une image et une courte description dans un espace minimal de la page.

Plus d'infos / Télécharger la démo

Lorsque vous choisissez des conceptions de mise en page de colonnes d'amorçage, il est préférable d'en trouver une qui corresponde à votre thème. Mettre des colonnes sans rapport confond et chasser les visiteurs.

Un examen attentif est essentiel pour cela. Si vous aimez les images, vous pouvez choisir des mises en page de style galerie . Sinon, si vous souhaitez avoir un contenu plus long sur votre site Web, la mise en page Magazine ou F-Shape peut être celle qui vous convient.

Vous n'avez pas à vous soucier de la QUALITÉ des mises en page ci-dessus.

Les créateurs qui ont programmé ces mises en page ont les connaissances adéquates pour vous donner des conceptions de mise en page crédibles. Oui, le contenu est essentiel, mais une bonne conception Web génère plus de trafic que les sites Web qui ne se soucient pas du tout des conceptions.