Grid/Multiple rows - varying ratios

Multiple rows with multiple columns and ratios

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.

1

2

3

4

5

6

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code

<div class="container">
  <div class="row mb-3">
    <div class="col-md-3 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.             
    </div>
    <div class="col-md-3 border">
[[File:DSC02166 363.jpg|220px]]           
    </div>
    <div class="col-md-3 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.             
    </div>
    <div class="col-md-3 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.             
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-12 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.             
    </div>    
  </div>
  <div class="row mb-3">
    <div class="col-md-8 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.             
    </div>
    <div class="col-md-4 border">
[[File:DSC02166 363.jpg|300px]]
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-2 border">
1        
    </div>
    <div class="col-md-2 border">
2        
    </div>
    <div class="col-md-2 border">
3         
    </div>
    <div class="col-md-2 border">
4         
    </div>
    <div class="col-md-2 border">
5         
    </div>
    <div class="col-md-2 border">
6         
    </div>    
  </div>
  <div class="row mb-3">
    <div class="col-md-2 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.          
    </div>
    <div class="col-md-6 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.          
    </div>
    <div class="col-md-4 border">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.           
    </div>
  </div>
</div>

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!