How to add class row in jQuery if bootstrap column reach 12?

bootstrap grid
bootstrap breakpoints

I have this jquery code which will append image inside a div container. I just want to add div class row if the column reach 12.

Can anyone give me an idea. Thankyou in advance.

for (var i = 0, j = result.images.length; i < j; i++){
    $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
}

here my div

<div class="container" id="imageContent" style="display: block;">

</div>

here is my current output.

<div class="container" id="imageContent" style="display: block;">
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl2.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/May 11, 2017.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/8.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/a2la_logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
</div>

but I want to add Div class row if column reaches 12 expected output

<div class="container" id="imageContent" style="display: block;">
  <div class="row">
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl2.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/May 11, 2017.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/8.png" class="img-responsive">
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
        <img src="storage/uploaded/logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/a2la_logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
  </div>
</div>

You can use like this

for (var i = 0, j = result.images.length; i < j; i++){

    if(i==0 || i%4 == 0)
    {
        var appendEl = $("<div class='row'></div>").appendTo("#imageContent");
    }
    $("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name  + "' class='img-responsive img-thumbnail'></div>").appendTo(appendEl);
}

Check the js fiddle https://jsfiddle.net/9Lrg2ecq/

Updated: Please check the screen shot https://ibb.co/fzcR6Q

html, I have this jquery code which will append image inside a div container. I just want to add div class row if the column reach 12. Can anyone give me an idea. The Bootstrap grid has only 12 columns, so you should never have more than 12 columns in a row. You should have only 3 col-md-4 in each .row element, because 3*4=12. Me: Ok, that sounds reasonable.

You should create a function which count how many col-md-3 class there are in the last-child of the last row on your container.

Example: $('.container .row:last-child .col-md-4').length;

If there are more than 4 col-md-3, create your .row element and recall this function Else, add $("#imageContent").append("<div class='col-md-3'>...");on the last row child :-)

Center a column using Twitter Bootstrap 3, What are the possible ways to center a column in bootstrap? Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts; Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows; Grid columns are created by specifying the number of 12 available columns you wish to span.

You can achive this with wrapAll() function of jQuery. http://api.jquery.com/wrapall/

I wasn't able to test this but your code should be like this:

for (var i = 0, j = result.images.length; i < j; i++) {
            if (i % 4 == 0) {
                $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
                $(".col-md-3").wrapAll("<div class='row' />");
            }

            else {
                $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
            }
        }

Bootstrap CSS Tables Reference, Which bootstrap class will apply a striped look to a bootstrap table? Three Equal Columns. Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.

try this, may be this will help you.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

  <p>Resize the browser window to see the effect.</p>
  <div  id="new_row">
  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:yellow;">
      Lorem ipsum dolor sit amet
    </div>
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:green;">
      Lorem ipsum dolor sit amet
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:orange;">
      Lorem ipsum dolor sit amet
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color:red;">
      Lorem ipsum dolor sit amet
    </div> 
  </div>
  </div>
</div>
<script>
$( document ).ready(function() { 

for (var i = 0, j = 10; i < j; i++){

if(i==0 || i%4 == 0)
{
   var appendEl = $("<div class='row'></div>").appendTo("#new_row");
}
    $("</div><div class='col-md-3 col-sm-3 col-xs-3'><img src='storage/uploaded/" + i + "' class='img-responsive img-thumbnail'></div>").appendTo(appendEl);
}
});
</script>
</body>
</html>

7 equal columns in bootstrap, Adds zebra-striping to any table row within <tbody> (not available in IE8) The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts. Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

You'll need to use another loop, wrapping your current loop, making a "paginator-like" behavior. The first loop will count how many rows you'll need (number of images divided by 4 because u have 4 columns in each row), and the inner loop will iterate 4 times to populate that row.

for (index = 0 ; index < images.length / 4 ; index++) {
    var row = document.createElement('div');
    row.className="row";
    for (j = index * 4 ; j < (index * 4) + 4 ; j++) {
        var col = document.createElement('div');
        $(col).addClass("col-md-4");
        $(col).html('<img src="' + images[j] + '"/>');
        $(row).append(col);
    }
    $('body').append(row);
}

Bootstrap 4, Adds border on all sides of the table and cells In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-md-* and only use the .col-md class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

CSS · Bootstrap, Enables a hover state on table rows within a <tbody> Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the CSS part of Bootstrap, you don't need jQuery. Create First Web Page With Bootstrap

Migrating to v4 · Bootstrap, Makes table more compact by cutting cell padding in half The formula for the the nested row is also the same, i.e the columns in the nested row should add up to 12 or fewer. However, please note that it is not required that you use all 12 available columns.

Bootstrap Grid: Mastering the Most Useful Flexbox Properties , Which classes are to be applied to have alerts use animation while closing? Yo ninjas, in this Bootstrap tutorial I'll be talking to you about Bootstrap column classes. We use column classes in Bootstrap to divide our elements up horizontally on the web page, depending on

Comments
  • Please check the snapshot & i added i instead of result.images[i].name & length was hardcoded to create the sample. Check now
  • Yea it's working :) Thankyou so much sir. exactly what I'm looking :)
  • @GeninaAnneGabuten Glad i could help
  • btw what's the difference of $("#imageContent").append("<div class='row'></div>") to your code?
  • appendTo returns me the newly element instead of #imageContent(if i used the append method)
  • I tried your code sir it created row and inside the 1st row there's another row with 5images
  • Thankyou sir you have same answer like agam and it's correct also.
  • Yeah, it okay, almost same answer, But with clear example
  • How can I apply this to my current loop sir? sorry I was new in jquery
  • I try by for (index = 0 ; index < result.images.length / 4 ; index++) { $('#imageContent').html('<div class="row"></div>'); for (j = index * 4 ; j < (index * 4) + 4 ; j++) { $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[index].name + "' class='img-responsive img-thumbnail'></div>"); } } but not putting the images inside the row.
  • When creating a new row, you'll need to give it a variable and then add the columns to that variable. What you did was just creating rows and the images outside the rows. Let me edit my answer to be more explicit...
  • Welcome to SO, your answer might be correct, but you must provide some explanation about it to show why it's correct