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 Header Menu with Dynamic Height

Bootstrap Pricing Table with Color Change

Bootstrap Assigning Project List

Bootstrap Accordion Form Wizard

Bootstrap Grids with Various Hover Effect

Bootstrap Image Gallery with Zoom Effect

Bootstrap Users Profile with Tabs

Bootstrap Pricing Table with Zoom Effect

Bootstrap Shopping Cart Table

Bootstrap Dark/Light Switching Header Menu

Feel The Power

Bootstrap Grids: Dynamic Bootstrap Grids with Javascript

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo