Bonjour,
je connais Bootstrap ainsi que Wordpress (grosso modo pour les 2), mais c'est la première fois que j'insère Bootstrap dans un site Wordpress. Mon intention est de faire une table avec des largeurs de colonnes différentes.

Tout d'abord, j'ai intégré Bootstrap dans Wordpress. Pour cela, j'ai ajouté
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
/*
 *ajouter bootstrap
 */
wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array( 'jquery' ), null, true );
 
wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
dans functions.php du thème enfant.

Le plugin Wappalyzer de Firefox l'a bien détecté.

Je suis parti ensuite d'un tuto. Il propose plusieurs tableaux Bootstrap. J'en ai retenu un qui permet de régler la largeur de chaque colonne :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
<!DOCTYPE html>
<html>
    <head>
        <title>Cours Bootstrap 4</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!--Occupe 2 colonnes-->
                <div class="col-2 bg-info">1er élément</div>
                <!--Occupe 4 colonnes-->
                <div class="col-4 bg-warning">2è élément</div>
                <!--Occupe 6 colonnes-->
                <div class="col-6 bg-success">3è élément</div>
            </div>
        </div>
    </body>
</html>
Pour le contenu de la page Wordpress, je ne retiens que le contenu du body :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<div class="container">
    <div class="row">
        <!--Occupe 2 colonnes-->
        <div class="col-2 bg-info">1er élément</div>
        <!--Occupe 4 colonnes-->
        <div class="col-4 bg-warning">2è élément</div>
        <!--Occupe 6 colonnes-->
        <div class="col-6 bg-success">3è élément</div>
    </div>
</div>
Le souci est qu'au lieu que les 3 cellules soient sur une seule ligne, chacune est placée sur une ligne différente (alors que si je teste ce code en dehors de Wordpress, elles sont sur une seule ligne). Peut-on me corriger ?