Des lignes imbriquées avec un système de grille bootstrap?

Je veux une image plus grande avec 4 images plus petites dans un format 2x2 comme celui-ci:

Ma première pensée était de tout ranger 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 1x1 et 2x2.

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

Bootstrap version 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 du niveau parent se trouve à l'intérieur d'un .containerélément. Chaque fois que vous souhaitez imbriquer des lignes, ouvrez simplement un nouvel .rowintérieur de votre colonne.

Voici une mise en page simple à partir de laquelle travailler:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap version 4.0

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

Voici une version mise à jour pour 4.0, mais vous devriez vraiment lire toute la section de la documentation sur la grille afin de comprendre comment tirer parti de cette fonctionnalité puissante

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Démo dans Fiddle jsFiddle 3.x | jsFiddle 4.0

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

En plus de ce que @KyleMit a dit, pensez à utiliser:

• col-md-* classes pour les plus grandes colonnes extérieures
• col-xs-* classes pour les petites colonnes internes

Cela sera utile lorsque vous affichez la page sur différentes tailles d'écran.

Sur un petit écran, l'enroulement des colonnes extérieures plus grandes se produira alors tout en conservant les colonnes intérieures plus petites, si possible