Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

Question

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution.

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  ...
</div> <!-- / .row -->

Each item has a bottom margin to prevent them from being too close together vertically:

.item {
  margin-bottom: 20px;
}

Is there a way to set the bottom margin to "0" for all items in the last row, without knowing which items will be in that specific row at different resolutions?

PS: Remember, the .row container does not dictate that the divs inside are part of a single row. It's simply a wrapper for the .col- containers.

Check out the JSFiddle demonstration here: http://jsfiddle.net/m668fska/

html css twitter-bootstrap

Answer 1

Answer №1

To create more space between rows, try adding a negative margin-bottom value to the row element. This will cause all items within the row to shift down accordingly, giving the appearance of added distance between each row.

Answer 2

To create more space between rows, try adding a negative margin-bottom value to the row element. This will cause all items within the row to shift down accordingly, giving the appearance of added distance between each row.

Answer 3

Answer №2

Implement media queries that are in line with bootstrap's guidelines, like this:

/* For large desktop screens */
@media (min-width: 768px) {
    div.row>div.col-xs-6.col-sm-4.col-md-3:nth-last-child(-n+4)>div.item{
        margin-bottom:0;
    }
}

Repeat the process for the following scenarios, adjusting the use of nth-last-child(-n+3) and nth-last-child(-n+2):

/* From landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* For landscape phones and smaller devices */
@media (max-width: 480px) { ... }

Answer 4

Implement media queries that are in line with bootstrap's guidelines, like this:

/* For large desktop screens */
@media (min-width: 768px) {
    div.row>div.col-xs-6.col-sm-4.col-md-3:nth-last-child(-n+4)>div.item{
        margin-bottom:0;
    }
}

Repeat the process for the following scenarios, adjusting the use of nth-last-child(-n+3) and nth-last-child(-n+2):

/* From landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* For landscape phones and smaller devices */
@media (max-width: 480px) { ... }

Answer 5

Answer №3

To mimic a table, simply include a style for the row:

.row {
    padding-bottom: 10px;
}

Then, customize the last row of your "table":

.table:last-child {
    padding-bottom: 0px;
}

Each .row, except the last one, will have specific padding at the bottom.

Answer 6

To mimic a table, simply include a style for the row:

.row {
    padding-bottom: 10px;
}

Then, customize the last row of your "table":

.table:last-child {
    padding-bottom: 0px;
}

Each .row, except the last one, will have specific padding at the bottom.

Answer 7

Answer №4

From my current knowledge, there doesn't seem to be a straightforward CSS solution...

However, I've come up with a JavaScript approach: comparing each item's offset top with the last item's offset top to assign class names accordingly.

// Function to adjust margin-bottom of last-row elements
function manage_last_row_items(){

  $('.last_row_management').each(function(){
    var
      $context = $(this),
      item_selector = $context.data('item_selector'),
      $last_item = $context.find(item_selector +':last-of-type').addClass('last_row_item'),
      final_top = $last_item.offset() ? $last_item.offset().top : 0
    ;
    $context.find(item_selector)
      .not($last_item)
        .removeClass('last_row_item')
        .filter(function(){
          var
            o = $(this).offset(),
            decision = false
          ;
          if (o) {
            decision = o.top === final_top;
          }

          return decision;
        })
          .addClass('last_row_item');
    });
}


$(document).ready(function(){
  manage_last_row_items();
  $(window).resize(manage_last_row_items);
});

If we have this DOM structure:

<ul class="last_row_management" data-item_selector="li">
…
</ul>

<form class="last_row_management" data-item_selector="fieldset">
…
</form>

Check out the Fiddle for a live demo.

(Maybe in the future, we can also address the last-column items as well...) (¬_¬)

Answer 8

From my current knowledge, there doesn't seem to be a straightforward CSS solution...

However, I've come up with a JavaScript approach: comparing each item's offset top with the last item's offset top to assign class names accordingly.

// Function to adjust margin-bottom of last-row elements
function manage_last_row_items(){

  $('.last_row_management').each(function(){
    var
      $context = $(this),
      item_selector = $context.data('item_selector'),
      $last_item = $context.find(item_selector +':last-of-type').addClass('last_row_item'),
      final_top = $last_item.offset() ? $last_item.offset().top : 0
    ;
    $context.find(item_selector)
      .not($last_item)
        .removeClass('last_row_item')
        .filter(function(){
          var
            o = $(this).offset(),
            decision = false
          ;
          if (o) {
            decision = o.top === final_top;
          }

          return decision;
        })
          .addClass('last_row_item');
    });
}


$(document).ready(function(){
  manage_last_row_items();
  $(window).resize(manage_last_row_items);
});

If we have this DOM structure:

<ul class="last_row_management" data-item_selector="li">
…
</ul>

<form class="last_row_management" data-item_selector="fieldset">
…
</form>

Check out the Fiddle for a live demo.

(Maybe in the future, we can also address the last-column items as well...) (¬_¬)

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Show HTML code inside a text box

Modify the display of multiple divs within a main div

JS: Discovering an element's screen position consistently across various computers

Is there a lack of a feature for automatically shifting to the next input element in dynamically-created HTML?

transferring background-image in html between elements

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

Shift div position when clicked and employ jQuery animations

Checking File Upload Progress in HTML and PHP

Tips for locating a file using javascript

Embed the WordPress header file outside of the WordPress platform

Prevent the Bootstrap Navbar from collapsing

The error code TS2554 is triggered when 5 arguments are passed instead of the expected 3-4

Is there a way to simultaneously apply the :active pseudoclass to multiple elements?

I'm attempting to make it so that when users click on this link, it opens in a new tab instead of directing them away from my website. Unfortunately, using _blank

CSS Navigation Menu - Submenu displaying above main link

Type of element returned

How can I eliminate the gap above the footer in iframes alignment?

Tips for modifying layout and concealment of content when using window.print()

The cropper fails to load within the image element inside a modal pop-up

Footer remains fixed to the bottom of the page even when there is not enough content to