generate m x n grid in bootstrap in javascript

To generate an m x n grid in Bootstrap using Javascript, you can use the Bootstrap grid system to create a container and then add rows and columns dynamically using Javascript.

Here's an example function that generates an m x n grid in Bootstrap:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Grid Example</title>
  <!-- Add Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container" id="grid-container">
    <!-- Grid will be generated here dynamically -->
  </div>
  <!-- Add Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    function generateGrid(m, n) {
      // Get container element
      var container = document.getElementById("grid-container");

      // Create rows and columns dynamically
      for (var i = 0; i < m; i++) {
        // Create a new row
        var row = document.createElement("div");
        row.classList.add("row");

        for (var j = 0; j < n; j++) {
          // Create a new column
          var col = document.createElement("div");
          col.classList.add("col");
          col.innerHTML = "Row " + (i + 1) + ", Column " + (j + 1);

          // Add column to row
          row.appendChild(col);
        }

        // Add row to container
        container.appendChild(row);
      }
    }

    // Call generateGrid(5, 5) to generate a 5 x 5 grid
    generateGrid(5, 5);
  </script>
</body>

</html>
1503 chars
51 lines

In this example, the generateGrid function creates a Bootstrap container and then dynamically adds rows and columns to create an m x n grid. The function takes two arguments, m and n, to specify the number of rows and columns in the grid. The id attribute of the container is used to select it using document.getElementById in the function. The innerHTML of each column is set to a string that indicates its position in the grid. Finally, the generateGrid function is called with the desired number of rows and columns to generate the grid dynamically in Javascript.

similar javascript code snippets

generate bootstrap row in javascript

cteate grid in javascript

how to use useeffect in javascript

how to create fibonacci in javascript

how to create a proxy variable in javascript

how to parse a json string in javascript

loop in javascript

how to use usestate in javascript

create a loop in javascript

loop from 1 to 10 in javascript

related categories