start
start
  • .
  • Documentations
    • CSS
      • Dessins vectoriels, Bouton, cercles et objets géométriques
      • How To Create a Flip Card
      • Solar System
      • Dessins vectoriels, cercles et objets géométriques (2)
      • CSS Animation
      • Liste complète de tous les sélecteurs CSS
      • Galaxie
      • Variable Font parameters
      • Mask SVG CSS
      • Texte dégradé avec CSS
      • Stroke Contour de texte avec CSS
      • Sélecteurs CSS :has, :not, :is et :where
      • Bootstrap 5 Col
    • PHP and MYSQL
      • Déplacement et remplacent de chaine de caractère en PHP
      • fonction pour supprimer les espaces et autres caractères spéciaux
    • Processing
      • Fill and Stroke Gradient
    • T3, T4, Dev and Code
      • RGPD Joomla Natif
      • Add the Page Class anywhere on the page
      • Récupérer une valeur depuis Json
      • RS Form - du contenu en vrac en bas de page
      • Vendre des produits avec RS FORM
      • Auto populate a list from field table
      • RS Form - Intégration avec Acymailoing
      • RS Form - Masque de numéro ou de champs (formatage de champ)
      • Intégration RSForm avec Zoom
      • Change Logo when langage change
      • T4 Header - Meta
      • Joomla Dev Tutorial
      • How To Add Search & Filtering in Joomla Component
      • Put Heading to masthead
      • Random sur une boucle
      • Page Contact ERROR
      • How RokSprocket Uses Custom Themes
      • Récupérer le titre de l'article depuis un formulaire RSform
      • Gérer 2 Owl carrousel sur la même page
      • Comment insérer un acordéon bootstrap dyamiquement Dans une boucle
    • SSH, SSL, LINUX
      • Commandes SSH fréquemment utilisées et leur usage
      • Cron Task CLI
      • Cron task CLI - 2
      • Vider Cache et libérer espace sur PLESK
      • How to upgrade MariaDB 10.0 to 10.1 on CentOS 7
      • Générer Certificat + key a partir de PFX
      • Les commandes de base en console linux
      • Générer certificat .CSR + .KEY avec SSL (serveur Gandi)
      • Gérez les redirection http https www et sans www
      • DKIM, SPF et DMARC
      • CDN Cloudflare
      • Metadata Tool pour Shema.org (Social média)
      • outils d'analyse et optimisation
    • Modules
      • Create ACM module that make change the Logo when langage change
      • JA MAsthead dont work after Joomla 5.2 update
      • ACM module Incrementation +1
      • Module ACM, utiliser Slider Bootstrap - ajouter une boucle
      • Ordonner les groupe de champs ACM
      • Place a module above and below the component
      • Créer un module Joomla (Timeline)
      • Module - Appel dans le code et le template
      • Gtranslate (conflit mootools / problème de traduction)
      • Créer un select list dans JACM
      • Call a menu Item from ACM module JACM
    • Fields
      • Appeler un Custom field depuis un module
      • Insérer une valeur (à partir d'un radio) dans la propriété d'un élément html
      • Add Subform - repetables on Joomla 5
      • adding joomla custom fields with t3 Framework
      • How to use custom fields in Joomla 3 ?
      • Custom fields don't render plugin shortcode
      • Load custom fields in modules
      • Aller plus loin avec les Custom Fields de Joomla! 3.7
      • Les Champs Personnalisés (Custom Fields) dans Joomla!
      • Ajouter une boucle dans un article Joomla pour utiliser un "Slider Boostrap"
      • Traduire champs répétable
      • Appeler les Fields Joomla dans category (J4)
      • Differents solutions for joomla fields (inside module / inside template / override)
      • Accordéon Boostrap dans une page joomla avec repeteable fields
      • Insérer la valeur d'un champ joomla "joomla field" dans php
      • Fields - lien interne Joomla avec un Itemid + JRoute::
    • SEO - Crawling - IA
      • 28 idées SEO sur le plan technique
      • Robot.txt - Empêcher les IA de crawler le site
      • Empêcher les IA de crawler via .htaccess
      • TDM Reservation Protocol (TDMRep)
      • Display Review from Google review on website
      • Fix microdata for the last breadcrumb item
      • Rewrite sitemap url to sitemap.xml
      • LCP - CLS and Google Speed
    • Other
      • Synology Drive - Synchronisation à la demande ?
      • Notepad édition avancée
      • Comment protéger un répertoire par mot de passe
      • MySQL delete FROM TABLE
    • October
      • October Videos tutorials
      • October Official tutorials and documentation
    • Librairies / templates / JS
      • Splash page
      • AOS CSS Scrolling effect
      • Add class with jQuery
      • Change HTML Element with JS
      • Hover CSS
    • Optimisation - SEO - Structured Data
      • F.A.Q. données structurées
      • Temoignages données structurées
    • Back-office / Administration
      • Modifier back-office en 5 min

Documentation

Bootstrap 5 col

Details
Category: CSS

Ajoutez le code ci-dessous à votre fichier CSS.
En fait, nous allons créer une class CSS intermédiaire aux class de colonnes existantes.

/*******************/
/* Bootstrap 5 Col */
/*******************/

.col-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xl-5 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

 

Puis ajoutez votre nouvelle class à votre code HTML

<div class="row">
  <div class="col-5">
    Colonne 1
  </div>
  <div class="col-5">
    Colonne 2
  </div>
  <div class="col-5">
    Colonne 3
  </div>
  <div class="col-5">
    Colonne 4
  </div>
  <div class="col-5">
    Colonne 5
  </div>
</div>

 

 

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

Page 13 of 98