Des lignes nestedes avec un système de grid bootstrap?

Je veux 1 image plus grande avec 4 images plus petites dans un format 2×2 comme ceci:

Figure 1 Exemple

Ma première pensée était de tout loger dans une rangée. Créez ensuite deux colonnes et, dans la deuxième colonne, créez deux lignes et deux colonnes pour créer l’effet 1×1 et 2×2.

Cependant, cela ne semble pas possible ou je ne le fais pas correctement?

Version Bootstrap 3.x

Comme toujours, lisez l’excellente documentation de Bootstrap:

3.x Docs : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Assurez-vous que la ligne de niveau parent est à l’intérieur d’un élément .container . Chaque fois que vous souhaitez imbriquer des lignes, ouvrez simplement un nouveau .row intérieur de votre colonne.

Voici un schéma simple à utiliser:

 
image
1
2
3
4

Version Bootstrap 4.0

4.0 Docs : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Voici une version mise à jour pour la version 4.0, mais vous devriez vraiment lire l’intégralité de la section des documents sur la grid pour comprendre comment tirer parti de cette fonctionnalité puissante.

 
image
1
2
3
4

Demo in Fiddle jsFiddle 3.x | jsFiddle 4.0

Ce qui ressemblera à ceci ( avec un peu de style ajouté ):

capture d'écran

En ajoutant à ce que @KyleMit a dit:

  • envisagez d’utiliser les classes col-md-* pour la plus grande
  • colonnes extérieures et col-xs-* classes pour le plus petit
  • colonnes intérieures

Ce sera utile lorsque vous affichez la page sur différentes tailles d’écran. Sur un petit écran, utilisez:

  • l’emballage de plus grand
  • colonnes extérieures se produiront alors tout en maintenant la plus petite
  • colonnes intérieures si possible