Bootstrap Beginner: Grid Problems

Question

I'm a bootstrap beginner and I'm having all sorts of problems with this Bootstrap grid I'm creating. I would like the text on the right to remain where it is, but I would like the images on the left to have two on each line. I'm not quite where where I'm going wrong here.

    <div class="container">
        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
</div>
<div class="row">
            <div class="col-md-4">
                 <h3>Project Description</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
                 <h3>Project Details</h3>

                <ul>
                    <li>Lorem Ipsum</li>
                    <li>Dolor Sit Amet</li>
                    <li>Consectetur</li>
                    <li>Adipiscing Elit</li>
                </ul>
            </div>
        </div>
    </div>
</div>

JSFiddle: https://jsfiddle.net/5d430t93/1/

Idealling the text/images will align similar to this: http://www.dota2.com/store/itemdetails/11393?r=d0

Answer 1

hufflapuff, you asked if you could get a similar result like the website in the link you provided.
When you want this to be fully responsive because you don't really know what device someone will use to view your site.
You need to cover all options.
Bootstrap will only take you most of the way there and then you will need to still use some custom css to have full responsive control.

The example here in this Fiddle will help show you how to get started with bootstrap. (In a basic way)
Make sure that when you use your own images that your size them ALL to be the same size width and height. If one image is just one pixel taller it will cause an issue and get hooked on another and it won't flow... move down when resized.

To see how this works properly grab the side of the window and resize it, as you do this you can see how certain divs change size. Look in the code to see why and at what points etc.
Hope this helps to get you started.

This is just a sample below.

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="http://cdn.dota2.com/apps/570/icons/econ/loading_screens/storm_spring_loadingscreen.f581055d5d2479082991d67c26a04d0d91506071.png" class="img-responsive block">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="http://cdn.dota2.com/apps/570/icons/econ/loading_screens/dreamleague_vindictive_loadingscreen.4c57c8398415be2acb0ba6e4004dff31b51816bc.png" class="img-responsive block">
</div>

Answer 2

you need to use a inner row to contains the images:

Please look an updated jsfiddle with this technique:

https://jsfiddle.net/5d430t93/4/embedded/result/

container
    row
        col-8 (left side)
            row
                col-6 (first image)
                col-6 (second image) ...
        col-4 (right side)
            your text