Problems with Bootstrap Grid Alignment

0
votes

See the page and code here: http://deadlydesigns.com/bootstrap/

Hello, I am new to Bootstrap. I have been implementing Bootstrap to a static HTML page and can't seem to figure out how to align the cart, popular artists, and popular genres correctly on the right-hand side. Here is what I did. The art title and artist are in a row using the col-md-10 class. I do not end the row yet and create the new row for the image, description, and product details in a col-md-10 class with a nested col-md-5 for the image and nested col-md-7 for the description and product details. Again, I do not end the row yet. I then added a third row for the similar products section. This was given the class col-md-10. I then class the cart, popular artists and popular genres in a col-md-2 class. I had hoped that since the rows hadn't been ended yet that the panels would "float" to the right-hand side and align properly, but they do not. They actually DO align properly prior to applying the col-md-2 class;however, the element takes up the entire width of the page. Once col-md-2 is applied, it drops to the lower part of the page. After these panels, I end all three rows. Here is how the page is supposed to look. Any help would be appreciated.

Thank you! Mike

3
htmlcsstwitter-bootstrapgrid
Thanks everyone. I still have a few other questions. I am unable to get the panels on the right-hand side to be at the same level as the title of the image (Self-portrait in a Straw Hat). I tried what user3365721 but was unsuccessful. It did place them on the same row, but the image description still needs to be at the same level as the large image and not inline with the image title. Also, for some reason my media objects are not padded in any way. I figure this should be part of the .media class. – apertured
FYI--I updated the website link with the most recent code. – apertured

3 Answers

1
votes

Divs are abit all over the place and need moved around and changed see http://www.bootply.com/vYCgzsLueY for the most of it layout out correctly, your page heading will need to be dropped into the same row as the rest and the col-md-10 changed to col-md-12

1
votes

Move this div: <div class="col-md-2"> up a little. Just inder this div (first one): <div class="col-md-10">

0
votes
<div class="row">
    <div class="col-md-10">...code</div>
    <div class="row">            //You must not have a row inside an other row
        <div class="col-md-10">...code</div>
        <div class="row"> ...code</div> //You must not have a row inside an other row
    </div>
</div>

This should been

<div class="row">
    <div class="col-md-10">...code</div>
    <div class="col-md-2">
        <div class="row">            
            <div class="col-md-10">...code</div>
            <div class="col-md-2"> ...code</div>
        </div>
    </div>
</div>