Automatic Bootstrap Columns and Rows

How to Automate Bootstrap Rows and Columns

December 27, 2016


Bootstrap is a fantastic front-end development framework that makes creating responsive websites a breeze. One of its mostly widely-used features is its grid-system, that is, the framework’s ability to provide rows and even-width columns. The system is based off of the magic number 12 where the sum of all the column widths of a single row must add up to. This is ideal for those that already know the exact amount of data they are working with, but what does one do when it comes to populating multiple rows and columns with an unknown amount of data. That particular scenario is what the purpose of this post aims to achieve: Automate Bootstrap Rows and Columns.

 

Guide Summary

Set a variable to represent the data length


Designate the amount of columns per row


Create two counting variables


Iterate through the data


The Complete Code


 

 

Set a Variable to Represent the Data Length

Depending on what technologies you are working with, you should be able to get a general count or data length amount. This is the very first thing that needs to be accomplished.

 

For example, if you want to automate an “All Posts” page with WordPress, then you could get the total number of posts you have by using WordPress’s ‘wp_count_posts()’ function.

 

The purpose of getting this number is to use it in a for loop we are going to create shortly as an arguement. For this example, I am simply going to create a string array and get the length of that.

 

//String Array
var stringText = ["string1","string2","string3","string4","string5","string6","string7","string8","string9","string10","string11","string12"];

//String Array Length
var stringTextArrayLength = stringText.length;

 

Designate the Amount of Columns Per Row

Now that we have the number we are going to iterate up to with our loop, we need to plan out how many columns we want to divvy out per row. For this example, I want to have 4 columns per row. This could be ideal for displaying a row of books, while having up to 4 books per row (see Cellar Door for a live example).

 

Create Two Counting Variables

There are two integer variables that we need to utilize for counting. The first count variable will be used to create a new row, add columns, and then close off the new row.

 

//Variable to add a row, column, or close row
var trackColumnsAndRowsCount = 0;

 

The second count variable will be used to create a unique row id, which will then be used to add new columns to.

 

//Variable to generate a unique row id
var uniqueRowIdCount = 0;

 

Iterate Through the Data

Now that we have everything we need to generate correctly formatted Boostrap rows and columns, we can proceed into creating the loop that makes it all come alive.

 

Here, we will begin by creating our for-loop, with our ‘stringTextArrayLength’ as the parameter number to meet:

 

//For-loop, loops to the total amount of strings in the 'stringText' array
for(var i = 0; i<stringTextArrayLength; i++){ }

 

This for-loop will serve 3 functions:

1) Add a new row

2) Add a column to the newly created row

3) Complete the new row

 

Add a New Row

 

The Code:

if(trackColumnsAndRowsCount == 0){
		$("div#mainBoot").append(`<div class="row" id="rowNum${uniqueRowIdCount}">`);
}

 

What the Code is Doing

Here we have an if-statement that checks to see if the ‘trackColumnsAndRowsCount’ is equal to zero. If you remember from earlier, we created this count variable to check to see if we needed to add a row, a column, or complete a row. Since, the current value of this variable is zero, it will then append a new row to the main Bootstrap div.container that was hard-coded in the main HTML document earlier.

 

The second thing that you will notice with this if-statement is that the new row we are appending is using our second count variable ‘uniqueRowIdCount’. This will allow us to append future columns to this particular row. Without this unique row id, the columns would continuously append to the first row we created. Not a desirable result.

 

Add a Column to the Newly Created Row

 

The Code:

 $(`#rowNum${uniqueRowIdCount}`).append(`
		<div class="col-lg-3 col-md-3 col-sm-3">
			<p>${stringText[i]}</p>
		</div>
	`);

 

What the Code is Doing

Each time the loop iterates, we will add a column to the newly created row. Inside each column, we will have a paragraph element that holds a piece of data. In this particular example, we will add a string from the string array, ‘stringText’.

 

In your own web-applications, this can be whatever piece of data you like. For example, with the Cellar Door application, I added in an image, book title, author, price, and rating.

 

Complete the New Row

 

The Code:

 	trackColumnsAndRowsCount++;
	if(trackColumnsAndRowsCount == 4){
		$("div#mainBoot").append(`</div>`);
		uniqueRowIdCount++;
		trackColumnsAndRowsCount = 0;
	}

 

What the Code is Doing

The first line of this code increases the ‘trackColumnsAndRowsCount’ by one. This is executed because we want to signify what the next iteration of the for-loop is going to do. Without increasing this count variable, we would not be able to add a new row or column, or complete the new row. This keeps the Bootstrap formatting.

 

The next line has an if-statement that checks to see if the current ‘trackColumnsAndRowsCount’s variable is equal to 4. This means that we have successfully filled this row with our Bootstrap data columns, and the row is ready to be completed. To complete the row, we simply append ‘</div&rt;’ to the hard-coded #mainBoot div element.

 

Now that the row has been successfully completed, we will need to create a new ‘unique-row-id’ for the next row that is about to be created. To accomplish this, we will up the value of the ‘uniqueRowIdCount’ by one.

 

The last part of this if-statement is to reset the ‘trackColumnsAndRowsCount’ count variable back to zero. Since the row has been completed, we will need to have the ‘trackColumnsAndRowsCount’ set to zero for the next loop iteration to know to create a new Bootstrap row.

 

The Complete Code

Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container" id="mainBoot">
	
</div>


<script>
	
var stringText = ["string1","string2","string3","string4","string5","string6","string7","string8","string9","string10","string11","string12"];

var stringTextArrayLength = stringText.length;
console.log(stringTextArrayLength);

var trackColumnsAndRowsCount = 0;
var uniqueRowIdCount = 0;
for(var i = 0; i<stringTextArrayLength; i++){
	if(trackColumnsAndRowsCount == 0){
		$("div#mainBoot").append(`<div class="row" id="rowNum${uniqueRowIdCount}">`);
	}

	$(`#rowNum${uniqueRowIdCount}`).append(`
		<div class="col-lg-3 col-md-3 col-sm-3">
			<p>{stringText[i]}</p>
		<<div>
	`);

	trackColumnsAndRowsCount++;
	if(trackColumnsAndRowsCount == 4){
		$("div#mainBoot").append(`</div>`);
		uniqueRowIdCount++;
		trackColumnsAndRowsCount = 0;
	}
}

</script>
	
</body>
</html>

 
Which should look something like this:
 
Bootstrap Automation Example