Comprendre et utiliser la grille de Bootstrap Twitter

Découvrir la logique de Bootstrap
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Bootstrap - Le Framework Front-End
Revoir le teaser Je m'abonne
2,7
Transcription

Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
2,7
Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont:
1. Comprendre le fonctionnement des colonnes dans Bootstrap.
2. Savoir utiliser des containers et des rows.
3. Mettre en place un design responsive avec Bootstrap.

Cette vidéo explique en détail comment fonctionne la grille de Bootstrap, un système de 12 colonnes pour structurer votre site.

Dans cette vidéo, nous explorons le système de grille du Bootstrap Twitter, un outil puissant pour structurer vos éléments sur une page web. La grille de Bootstrap est basée sur un système de 12 colonnes, permettant de placer vos éléments sur le nombre de colonnes désiré. Par exemple, pour deux éléments côte à côte représentant chacun 50% de la largeur de la page, il suffit de leur attribuer une classe col-md-6, chaque chiffre indiquant le nombre de colonnes à occuper. Nous abordons également le concept de container, utilisé pour centrer et délimiter les contenus du site avec une largeur définie à 1170 pixels par défaut. Découvrez comment ajouter du CSS pour visualiser cette structure et voyez comment créer des lignes et des colonnes à l'intérieur de votre conteneur. De plus, nous démontrons comment les colonnes se comportent en version mobile, permettant un responsive design facile et efficace. Enfin, nous ajoutons des exemples de colonnes imbriquées pour illustrer la flexibilité de ce système.

Voir plus
Questions réponses
Qu'est-ce qu'une classe <em>container</em> dans Bootstrap?
Une classe container est utilisée pour centrer et définir la largeur maximale des éléments sur une page, en ajoutant des margins automatiques à droite et à gauche.
Comment identifier deux éléments côte à côte occupant chacun 50% de la largeur dans Bootstrap?
Utilisez la classe col-md-6 pour chaque élément, ce qui signifie qu'ils occuperont chacun 6 colonnes sur les 12 disponibles.
Que se passe-t-il lorsque la somme des colonnes dépasse 12 dans Bootstrap?
Les éléments excédant les 12 colonnes passeront automatiquement à la ligne suivante.
3 commentaires
2,7
3 votes
5
4
3
2
1
F0336B96-E0CF-4BA4-985C-EF3C86C62EA6@cyberlibris.studi.fr
Il y a 1 semaine
une nouvelle video boostrap 7 sera bonne
ideal.micro40
Il y a 1 mois
video sur Bootstrap 3 alors qu'on est sur la version 5.3.6.
on parle de jquery alors que dans la version il n'y est plus
on nous parle de phpstorm comme editeur qui est payant voir lez bloc note (au secours !!!)
il y a vscode qui maintenant est utiliser par quasi tous les développeurs et qui est gratuit.

sur la video : Maîtriser les Grilles et Colonnes dans Bootstrap
1 - le cours annonce la modification pour passer sur 4 colonne puis de changer les titres,
a ce moment la on reviens en arrière à la modification pour passer en 4 colonnes... et ça recommence
grosse erreur de montage.

2 - ensuite push et pull ont été supprimé pour utiliser le système flexbox sur la version 5
avec les classes order pour gérer l'ordre des colonnes.

3 - l'explication sur le offset n'est absolument pas claire :
on a une première explication, puis une deuxième qui est la même mais avec le résultat directe avec offset.

bref je vais être franc j'ai trouver une formation sur udemy sur bootstrap 5 bien plus intéressante, je ne trouve pas normal d'avoir une formation sur bootstrap 3 qui nous induit en erreur.
ayant passer ce premier chapitre j’arrête car je ne vois aucun intérêt à continuer.
Stephd
Il y a 4 ans
tres bonne formation c est une bonne decouverte generale.