Dynamic Bootstrap Grids with Javascript

Bootstrap Grids: Dynamic Bootstrap Grids with Javascript

Usually, bootstrap grids, i.e. rows and columns are fixed in a screen. So what should one do when some data is added or removed within the page. The following code helps you manage the bootstrap grinding system dynamically and change it by a click!

#Dynamic Bootstrap Cols #Dynamic Bootstrap Rows #Bootstrap Javascript Grids #Dynamic Bootstrap Columns

<!-- this script got from www.frontendfreecode.com -->
Videos Per Row: <input data-bind="value: videosPerRow"/> 
<button data-bind="click: addVid">Add vid</button>
<div data-bind="foreach: new Array(rowCount())" class="container">
  <div data-bind="foreach: $root.getVideosInRow($index())" class="row">  
    <div data-bind="attr: { 'class': $root.bootstrapColClass }">
      <a href="javascript:;" class="thumbnail">                
        <img data-bind="attr: { src: thumbnail }" />
        <div class="caption">
          <span data-bind="text: title"></span>
        </div>
      </a>
    </div>
  </div>
</div>

rowCount: <span data-bind="text: rowCount"></span><br/>
videosPerRow: <span data-bind="text: videosPerRow"></span><br/>
videos in row: <span data-bind="text: getVideosInRow(1)().length"></span><br/>
bootstrapColClass: <span data-bind="text: bootstrapColClass"></span><br/><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>

var video = function (title) {
  var self = this;
  self.thumbnail = ko.observable("http://placehold.it/250x150");
  self.title = ko.observable(title);
};

var vm = function () {
  var self = this;

  self.videos = ko.observableArray([
  new video("1. Lorem ipsum dolor sit amet."),
  new video("2. Vivamus dictum lacus ac pharetra lacinia."),
  new video("3. Nunc consequat, sapien sed pentesque feugiat, nunc ligula."),
  new video("4. Etiam nec ligula commodo lacus."),
  new video("5. Nunc consequat, feugiat, nunc ligula."),
  new video("6. Etiam nec ligula commodo lacus."),
  new video("7. Etiam nec ligula commodo lacus."),
  new video("8. Etiam nec ligula sapien sed pelltesque lacus.")]);


  self.addVid = function () {
    var newIndex = self.videos().length + 1;
    self.videos.push(new video(newIndex + ". Etiam nec ligula sapien sed pelltesque lacus."));
  };

  self.videosPerRow = ko.observable(3);
  self.bootstrapColClass = ko.computed(function () {
    var colNum = 12 / self.videosPerRow();
    return "col-xs-" + colNum;
  });

  self.rowCount = ko.computed(function () {
    return Math.ceil(self.videos().length / self.videosPerRow());
  });

  self.getVideosInRow = function (rowNumber) {
    return ko.computed(function () {
      // Row Number starts at 0
      var startIndex = rowNumber * self.videosPerRow();
      var endIndex = startIndex + self.videosPerRow();
      return self.videos().slice(startIndex, endIndex);
    });
  };
};

ko.applyBindings(new vm());

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js'></script>
</head>
<body>
Videos Per Row: <input data-bind="value: videosPerRow"/> 
<button data-bind="click: addVid">Add vid</button>
<div data-bind="foreach: new Array(rowCount())" class="container">
  <div data-bind="foreach: $root.getVideosInRow($index())" class="row">  
    <div data-bind="attr: { 'class': $root.bootstrapColClass }">
      <a href="javascript:;" class="thumbnail">                
        <img data-bind="attr: { src: thumbnail }" />
        <div class="caption">
          <span data-bind="text: title"></span>
        </div>
      </a>
    </div>
  </div>
</div>

rowCount: <span data-bind="text: rowCount"></span><br/>
videosPerRow: <span data-bind="text: videosPerRow"></span><br/>
videos in row: <span data-bind="text: getVideosInRow(1)().length"></span><br/>
bootstrapColClass: <span data-bind="text: bootstrapColClass"></span><br/>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
var video = function (title) {
  var self = this;
  self.thumbnail = ko.observable("http://placehold.it/250x150");
  self.title = ko.observable(title);
};

var vm = function () {
  var self = this;

  self.videos = ko.observableArray([
  new video("1. Lorem ipsum dolor sit amet."),
  new video("2. Vivamus dictum lacus ac pharetra lacinia."),
  new video("3. Nunc consequat, sapien sed pentesque feugiat, nunc ligula."),
  new video("4. Etiam nec ligula commodo lacus."),
  new video("5. Nunc consequat, feugiat, nunc ligula."),
  new video("6. Etiam nec ligula commodo lacus."),
  new video("7. Etiam nec ligula commodo lacus."),
  new video("8. Etiam nec ligula sapien sed pelltesque lacus.")]);


  self.addVid = function () {
    var newIndex = self.videos().length + 1;
    self.videos.push(new video(newIndex + ". Etiam nec ligula sapien sed pelltesque lacus."));
  };

  self.videosPerRow = ko.observable(3);
  self.bootstrapColClass = ko.computed(function () {
    var colNum = 12 / self.videosPerRow();
    return "col-xs-" + colNum;
  });

  self.rowCount = ko.computed(function () {
    return Math.ceil(self.videos().length / self.videosPerRow());
  });

  self.getVideosInRow = function (rowNumber) {
    return ko.computed(function () {
      // Row Number starts at 0
      var startIndex = rowNumber * self.videosPerRow();
      var endIndex = startIndex + self.videosPerRow();
      return self.videos().slice(startIndex, endIndex);
    });
  };
};

ko.applyBindings(new vm());
</script>

</body>
</html>

Preview

RECENT CODES

Bootstrap Table with Sorting Animation

Bootstrap Table with Col and Row Effect on Hover

Bootstrap Table with Fixed Header

Bootstrap Collapsing / Expanding Table

Bootstrap Pricing Table with Fade Effect

Bootstrap Header with Hover Effect

Bootstrap Dynamic Header with Style Change

Bootstrap Header with Material Effect for Tabs

Animating Bootstrap 4 Navbar

Vertical Bootstrap Header with Animation

Feel The Power

Bootstrap Grids: Dynamic Bootstrap Grids with Javascript

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo