Image grid 1

Two rows

Code

<div class="container">
  <div class="row">
    <div class="col">
[[File:DSC02166 363.jpg|300px]]
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px]]
    </div>
  </div>
</div>

Result

Tree rows

Code

<div class="container">
  <div class="row">
    <div class="col">
[[File:DSC02166 363.jpg|200px]]
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|200px]]
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|200px]]
    </div>
  </div>
</div>

Result

Other Examples

Code

<div class="container">
  <div class="row">
    <div class="col">
<!--1 of 3-->
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px]] 
    </div>
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

<div class="container">
  <div class="row">
    <div class="col">
<!--1 of 3-->
    </div>
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px]]
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

<div class="container">
  <div class="row">
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px|center]]
    </div>
    <div class="col">
<!--3 of 3-->
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

<div class="container">
  <div class="row">
    <div class="col">
[[File:DSC02166 363.jpg|300px]]
    </div>
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
    <div class="col">
<!--3 of 3-->
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

<div class="container">
  <div class="row">
    <div class="col">
<!--1 of 3-->
    </div>
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px|center]]
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

<div class="container">
  <div class="row">
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px]]
    </div>
    <div class="col">
<!--3 of 3-->
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

<div class="container">
  <div class="row">
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
    <div class="col">
[[File:DSC02166 363.jpg|300px]] 
    </div>
    <div class="col">
Lorem ipsum dolor sit amet...
    </div>
  </div>
</div>

Result

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone on this site for creating outstanding content!