Bootstrap : disposition 4 blocs dans 2 colonnes et responsive

Fermé
Azina - 12 mai 2021 à 09:21
 Totox - 12 mai 2021 à 16:25
Bonjour communauté,

J'ai besoin d'aide : je débute sous bootstrap, je n'ai que peu de base en code, et je ne comprends pas bien le système de grilles/colonnes, je suis perdue par rapport à ce que je souhaite réaliser dans les classes qu'ils proposent dans leurs exemples sur leur site : https://getbootstrap.com/docs/5.0/layout/columns/

Je souhaite faire 4 blocs de contenus : ils contiendraient chacun soit un tableau, soit une grouplist soit un accordéon. En fait c'est pour une page d'accueil. Je veux que les blocs soient espacés entre eux un peu, et disposé 2 puis 2 en dessous.
Je n'arrive pas avec les codes que j'ai trouvé à faire des colonnes assez larges et espacées entre elle de quelques pixels (il faudrait donc un espace tout autour en fait du bloc). Après, je pensais copier-coller le code pour avoir ces 2 blocs en dessous pour refaire 2 blocs. Mais je ne sais pas quelles classes choisir dans bootstrap pour faire ça ni les paramétrer...

Pouvez-vous m'aider ? Merci,
Bonne journée,
Cordialement,

1 réponse

Salut,
si vous ne comprenez pas le système de "grille" Bootstrap il faut bosser un peu plus le sujet.
Les tutos ne manquent pas.

https://www.google.com/search?q=apprendre+bootstrap

"espacées entre elle de quelques pixels (il faudrait donc un espace tout autour en fait du bloc)."
C'est plus du pur CSS, il faut jouer sur les marges(internes ou externes) d'un élément. CSS s'appliquant sur du HTML il faut que vous ayez compris et maîtriser les bases de HTML avant tout.

" Après, je pensais copier-coller le code pour avoir ces 2 blocs en dessous"
Quel code? Un langage permet d'écrire ce qu'on veut mais chaque "phrase" est propre au "sens" qu'on veut donner. Donc il n'y a pas un "code" universel" uniquement des façons d'écrire un résultat.
Pour chaque résultat différent il faudra écrire quelque chose de différent donc, en fonction du contexte et des contenus.

Bref plutôt que "singer" un code qui à son propre contexte et application( : la page et la mise en page qui en résulte)que vous ne comprenez pas il faut comprendre les principes derrière pour pouvoir les utiliser sur un cas particulier(votre mise en page).

Ce n'est pas très compliqué en plus HTML et CSS car fait pour faire le plus rapidement et simplement les pages web et leurs contenus, descriptions et mises en page. Sans apprendre par contre pas la peine d'essayer de faire au pif, il faut suivre les règles des langages et savoir comment les utiliser.

Exemple pour les marges internes d'un élément html(ou balise):

https://www.w3schools.com/csS/css_padding.asp

Et avec Boostrap qui utilise du CSS géré avec un peu de programmation(JavaScript):

Pour définir le nombre de colonne d'une ligne de la grille:
https://www.pierre-giraud.com/bootstrap-apprendre-cours/creation-colonne-grille/

Pour les marges:
http://monbootstrap.fr/spacing-margin-et-padding-a-la-carte/
0