10

I have problem with bootstrap columns. I want to do something like this picture and I don't know how to do it.

screenshot

Thanks a lot for helping.

AaA
  • 3,600
  • 8
  • 61
  • 86
Mestowaty
  • 165
  • 1
  • 1
  • 8
  • 3
    Can you post code samples, or an explanation of what you've tried so far? – helencrump Nov 03 '15 at 11:49
  • i tried to do this in pingendo, but it's only begin of my work with this editor. And i have no code. I tried to do two columns and in second column another columns but it was not working. – Mestowaty Nov 03 '15 at 11:51
  • 2
    Possible duplicate of [Twitter bootstrap 3 two columns full height](http://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height) – gpinkas Nov 03 '15 at 12:40

3 Answers3

8

You could use the grid layout to give you something like:

 <div class="row">
   <div class="col-xs-6">
     <div>Big Image Goes Here</div>
   </div>
   <div class="col-xs-6">
     <div class="col-xs-12">Little Image #1</div>
     <div class="col-xs-12">Little Image #2</div>
     <div class="col-xs-12">Little Image #3</div>
     <div class="col-xs-12">Little Image #4</div>
   </div>
 </div>

However, you would need to add some padding to the images to give them the white area around them.

The grid layout is explained here: bootstrap grid layout

Here is a JSFiddle example.

Karl Gjertsen
  • 4,690
  • 8
  • 41
  • 64
2

Bootstrap is made up of 12 columns in a row. If you want something to display half and half for example, the first element would have a value of six like so: class="col-xs-6"and the second would be the same. To learn bootstrap really well make this site your best friend.

For a demo to your solution click here

Here we have your HTML

<div class="col-xs-7 left">
    <img src="http://placehold.it/300x500">
</div>
<div class="col-xs-5 right">
   <img src="http://placehold.it/200x100">
</div>
<div class="col-xs-5 right">
   <img src="http://placehold.it/200x100">
</div>
<div class="col-xs-5 right">
   <img src="http://placehold.it/200x100">
</div>
<div class="col-xs-5 right">
   <img src="http://placehold.it/200x100">
</div>

CSS

.left{
    float: left; 
}
.right{
    float: right; 
}
div{
    padding: 20px; 
}

There is probably already a class for floating objects in bootstrap I just couldn't remember exactly, so I did it manually.

jShoop
  • 411
  • 1
  • 6
  • 15
0

You should create a div with two columns: left and right with same class created for columns (for example .col-md-3). Then in right column add four rows. Example is here.

aslawin
  • 1,981
  • 16
  • 22