Bootstrap column not stacking

Question

I am designing a website using Oscommerce 2.4.3. Bootstrap.

On the products page my desired layout is the product image on the left and the product details in a list format on the right.

|  IMAGE |  Colour:         Red |
|        |  Weight:         1kg |
|        |  size:           1M  |
|        |  model:          xyz |

It is important to me that the details in the product details are aligned with each other, i.e. NOT:

Colour: Red
Weight: 1kg
size:1M
model: xyz

I am new to Bootstrap and seeking some guidance on the best way to achieve this.

The approach I took initially was to put the image in one column, the product details in another and nest 2 columns within that column. This worked for those product details which were above the bottom of the image, however anything which was lower than the bottom of the image, then got pushed all the way to the left hand side i.e under the image.

The approach then I took subsequently was to put the image in one column, and in another column create a list group. I had to specify the width in the columns so that they could remain aligned in a 2x2 format rather than revert to the size of their contents e.g.

    <li class="list-group-item borderless col-sm-4"> Colour </Li>
    <li class="list-group-item borderless col-sm-8"> Red </Li>
    <li class="list-group-item borderless col-sm-8"> Weight </Li>
    <li class="list-group-item borderless col-sm-8"> 1kg </Li>

This approach works and looks fine when viewing the site through a dekstop computer. However when resizing the screen or viewing the page through a mobile, the column containing the list refuses the stack underneath the image.

My questions are:

Any general guidance on best way to achieve the format above:
Any reason why the lists would not stack underneath the image and what I could do to resolve.

I am grateful to anyone who can point me in the right direction.

on thing is add classes for all supported viewports col-sm, col-md, col-xs, col-lg — Deep, Jan 13 '17 at 14:41
The OP for this question added a link to the relevant page, which [was this](http://www.ancientcointraders.com/product_info.php/cPath/23/products_id/36). We discourage external links to the degree that if they are removed from a question and the question no longer makes any sense, the question is off-topic. Questions must be self-contained, so that a subsequent fix to the site in question does not render a link (and a question) redundant. — halfer, Feb 03 '17 at 16:39

brandondavid · Answer 1 · 2017-01-15T20:22:21.990

Personally I think it would be better to separate your list group elements from the grid elements.

<div class="row">
<div class="col-sm-4">
<img src="../path/to/image.jpg" class="img-responsive" />
</div>

<div class="col-sm-8">
<li class="list-group-item borderless"> Colour </Li>
    <li class="list-group-item borderless"> Red </Li>
    <li class="list-group-item borderless"> Weight </Li>
    <li class="list-group-item borderless"> 1kg </Li>
</div>
</div><!-- closing div for row -->

Unless I am mistaken, a list group will always displays vertically. If you want the list to display horizontally on large screens, but stack vertically on a small screen, then you may want to do something more like this:

<div class="row">
<div class="col-sm-4">
<img src="../path/to/image.jpg" class="img-responsive" />
</div>

<div class="col-sm-2">Colour</div>
<div class="col-sm-2">Red</div>
<div class="col-sm-2">Weight </div>
<div class="col-sm-2">1kg </div>

</div><!-- closing div for row -->

EDIT

You can keep the Colour, Red, Weight and 1kg divs horizontal but allow them as a group to stack beneath the image by nesting grid rows. First you need to mark the nested grid columns as col-xs (according to bootstrap documentation these will always stay horizontal).

<div class="row">
  <div class="col-sm-4">
  <img src="../path/to/image.jpg" class="img-responsive" />
  </div>

  <div class="col-sm-8">

    <div class="row">
        <div class="col-xs-3">Colour</div>
        <div class="col-xs-3">Red</div>
        <div class="col-xs-3">Weight</div>
        <div class="col-xs-3">1kg</div>
    </div><!-- nested row -->

  </div><!-- col-sm-8 -->
</div><!-- outer row -->

If you want the list to stay horizontal but then on small screens split into two stacked horizontal lists then you can combine grid classes like this:

<div class="row">
  <div class="col-sm-4">
  <img src="../path/to/image.jpg" class="img-responsive" />
  </div>

  <div class="col-sm-8">

    <div class="row">
        <div class="col-xs-6 col-sm-3">Colour</div>
        <div class="col-xs-6 col-sm-3">Red</div>
        <div class="col-xs-6 col-sm-3">Weight</div>
        <div class="col-xs-6 col-sm-3">1kg</div>
    </div><!-- nested row -->

  </div><!-- col-sm-8 -->
</div><!-- outer row -->

Thanks Brandondavid! The second example works well. If I didn't want the e.g. 'red' or '1kg' to stack under the 'colour' and 'weight' headings when viewing on a smaller screen i.e. to remain horizontal at all times (but the entire section to still stack under the image) what changes would I need to make to the above? Thanks again! — Peter Pil, Jan 14 '17 at 04:22

Bootstrap column not stacking

1 Answers1