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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes

Feel The Power

Bootstrap Grids: Dynamic Bootstrap Grids with Javascript

What are You Looking for?

Watch how to Create the Tool!