1

I am creating columns dynamically using Bootstrap. I have a for loop that creates the following columns:

<div class="col-md-6 col-xs-12 inspection-category-col">
  <div class="media inspection-category"> 
    <div class="media-left">
      <a href="#">
        <img src="http://placehold.it/100x100">
      </a> 
    </div> 
    <div class="media-body inspection-category-media-body"> 
      <h3 class="media-heading inspection-category-media-heading">{{ item.title }}</h3>
      <span class="inspection-category-media-content"> 
        {{ item.description }}
      </span>
    </div>
  </div>
</div>

I want to add a border-bottom between each column, but since I don't know the number of columns I need to handle the following logic:

if screen md/lg && count(cols) > 2 && not last one or two cols
  add border-bottom
else if screen xs && not last col
  add border bottom
else 
  do nothing

I'm not sure the best way to handle this. Ideally through CSS, but I'm not sure how. Thanks in advance.

Molly Harper
  • 2,363
  • 3
  • 26
  • 35

1 Answers1

1

Given your logic, we can break this down into smaller steps.

First, screen size. For this we use a css media query. Here, I'm defining a large screen to be over 600px wide and a small to be unde 600px wide. you can change this to suit your needs.

@media (min-width: 600px) {
  /* large code here */
}
@media (max-width: 600px) {
  /* small code here */
}

Then we need the border logic, firstly for the larger screens. Here I assume they all have a class of myColumn.

.myColumn:nth-last-of-type(n+3) {
    border-bottom:1px solid black
}

:nth-last-of-type selects the number in the brackets amount of elements from the end of a list. n+3 means select from the 2nd element in the list, i.e., skip two then select the third element onwards from the end if they have class myColumn

use 

.myColumn:nth-last-of-type(n+2) {
    border-bottom:1px solid black
}

for your smaller screens.

You can mess about with the selectors more here

You can read more about media queries here

Deep
  • 920
  • 8
  • 22
  • Thanks, @Deep! This works great for the small code, but doesn't work quite right for the large. In my example there are 3 different columns: two on the top and one on the bottom. There is a border-bottom below the first col, but not the second. – Molly Harper Aug 17 '16 at 02:36
  • Using :nth-last-of-type(n+2) would work for the above, case, but not for a case where there are only two columns. – Molly Harper Aug 17 '16 at 02:41
  • @MollyHarper I must have misunderstood your logic as that seems to work exactly as I intended, border bottom on all but the last 2 columns, could you explain again what you want? – Deep Aug 17 '16 at 03:07
  • Hey @Deep, I may not have explained it well. Here's a screenshot of what I want it to look like: http://tinypic.com/r/51x9c4/9. Basically, a border-bottom under each if count(cols) > 2 && not last one or two cols. – Molly Harper Aug 17 '16 at 15:06
  • @MollyHarper so if there were 6, 4 would have a border, 2 wouldnt? 5, 4 would 1 wouldnt? 4, 2 would 2 wouldnt? 3 , 2 would 1 wouldnt? – Deep Aug 17 '16 at 20:22
  • Yep, you have it exactly! – Molly Harper Aug 18 '16 at 00:26
  • In which case, this question is a possible duplicate http://stackoverflow.com/questions/29770736/select-last-child-when-odd-2-last-childs-when-even – Deep Aug 18 '16 at 06:55