2

Lets say we have the following markup:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-md-4 col-lg-3">
            <img src="..." alt="..." />
        </div>
        <!--
            And, possibly, many more columns, 
            which are printed dynamically using
            the PHP's foreach loop
        -->
    </div>
</div>

The resulting markup contains only one row and lots of columns. However, this is not useful at all: the grid is supposed to have 2 columns on extra small screens, 3 columns on medium screens and 4 columns on large screens, with a separate row for each collection of columns.

The above technique, though, produces markup that is not semantic and problems begin to emerge whenever one decides that he/she wants to separate rows of columns with a border.

If the layout was static (non-responsive), I could simply output a separate row after every X image(column) in the foreach loop, but this obviously doesn't work for responsive layouts.

The responsive approach seems to introduce more problems than I originally anticipated, because the server side can not distinguish whether the user has resized his browser window or not (and reload the columns with a different markup and number of rows accordingly). Making AJAX calls for this would be overkill and I don't really want to use JQuery to rewrap columns based on screen width, which leaves me at the mercy of nasty CSS hacks.

Is there a proper way to accomplish this?

EDIT: There is a way to do this, but it's also not the preferred one: output several grids with a different number of columns and show each of them using media queries. Although this is a possibility, I would never want to do this, because it produces bad markup and it's possibly bad for SEO as well.

EDIT 2: Here's what I'm trying to achieve: Multiple rows

However, I also need to do this dynamically for each screen size.

EDIT: 3: Here's how the layout should behave on different screen sizes:

Different layout

This seems to be difficult to achieve on a responsive layout. The reason I need to have separate rows is because I want each row to have a border-bottom CSS property. I can currently add such a separator using the :after CSS pseudo element on every nth column in the grid, but the CSS for such a separator is quite ugly (the separator needs to go full-width and since the pseudo element is a child of the column, I'm using absolute positioning in this case):

&:after {
   content: "";
   position: absolute;
   width: 420%;
   height: 1px;
   left: -160%;
   background-color: black;
}

Is the above CSS the right way to do it? How else can I achieve this?

Onion
  • 1,714
  • 1
  • 23
  • 42
  • 1
    What's not semantic? The use of multiple DIVs? Perhaps a visual representation of what you are trying to achieve would allow us to better understand the visuals and the related issues you are having. – hungerstar Dec 29 '14 at 15:52
  • What's not clear? I've described the problem in detail. – Onion Dec 29 '14 at 16:19
  • Is your content flowing through the columns? Like a magazine or newspaper article? – hungerstar Dec 29 '14 at 16:43
  • I have a number of images. I want to show them in a grid, so I use foreach in my template to echo them out. Each image goes into a div with a `col-xx-y` class. This works well for any screen size. However, I need to add a border *after each row of columns*. This means that the borders would have to change places in different screen widths. – Onion Dec 29 '14 at 16:48
  • 1
    Assuming I've read what you're trying to achieve correctly, you're making this far more complicated than it needs to be. – MattD Dec 29 '14 at 16:57
  • I'm fully aware of this. Querying the server multiple times is precisely what I'm trying to avoid. Let me give you an example. Lets say I have a grid which displays two columns on small screens and 3 columns on medium screens. How could I add a separator that separates each row of columns/images for every screen size? If I add a separator for every 2 images in my grid, it would work well in a mobile layout, but this wouldn't look good on medium screens (where I'd have to a add a separator for every 3 images, since a "row" contains 3 columns now). – Onion Dec 29 '14 at 17:03
  • 1
    It's hard to understand what you're trying to achieve. Can you include a visual for how you want this to behave on the different screesizes? – Shawn Taylor Dec 29 '14 at 17:24
  • It seems that I either have a wrong understanding of the general practice, or I have difficulties getting my point across. I'll update my question with visual aids soon. – Onion Dec 29 '14 at 17:50
  • @Shawn I've edited my question once more. I hope it's clear this time. – Onion Dec 29 '14 at 18:07
  • 1
    right. if you combine the visible/hidden helper classes with a div styled with border bottom, it should work. I'll write it out and paste some code. – Shawn Taylor Dec 29 '14 at 18:09
  • I can see only two outcomes in this: either I use additional markup (hidden separator divs that I display based on different screen sizes, not really great as far as markup semantics are taken into account) or I use CSS pseudo elements with ugly-looking CSS code. What would be the preferred way? – Onion Dec 29 '14 at 18:10
  • Those are two options yes. Maybe neither is perfect, but I think you will get frustrated if you aren't flexible with HOW you achieve what you want. – Shawn Taylor Dec 29 '14 at 18:17
  • Hmm. Well, you could write it up as an answer anyway and I'll mark it as accepted, since you were the one who suggested doing it. :) I'll probably add hidden separator divs after each of my columns and be done with it. – Onion Dec 29 '14 at 18:19

1 Answers1

4

Use the .hidden/.visible helper classes combined with a .clearfix with divider/border-bottom styling. It gets a little complex because you'll use a different divider div every 2nd, 3rd and 4th .col, and then even more because you'll combine them every 4th, 6th, 12th, etc (where common denominators meet up).

Here is a DEMO: http://www.bootply.com/sEAH6qXHiI

<div class="row border">
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 2nd col -->
    <div class="visible-xs visible-sm clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 3rd col -->
    <div class="visible-md clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- and every 4th col -->
    <div class="visible-xs visible-sm visible-lg clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 6th col -->  
    <div class="visible-xs visible-sm clearfix divider"></div>
    <div class="visible-md clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
</div>

Good luck!

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39