JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<div ng-app="app">
<div class="container">
<div bootstrap-columns>
<div>Column1</div>
<div>Column2</div>
</div>
<div bootstrap-columns>
<div>Column1</div>
<div>Column2</div>
<div>Column3</div>
</div>
<div bootstrap-columns>
<div>Column1</div>
<div>Column2</div>
<div></div>
</div>
<div bootstrap-columns>
<div>Column1</div>
<div>Column2</div>
<div>Column3</div>
<div>Column4</div>
<div>Column5</div>
<div>Column6</div>
</div>
</div>
</div>
CSS
.row div {
border: solid 1px black;
}
JavaScript
var app = angular.module('app',[]);
app.directive('bootstrapColumns', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (!element.hasClass('row'))
element.addClass('row');
scope.$watch(function() {
var elems = element[0].childNodes;
var count =0;
angular.forEach(elems, function(e) {
if (e.tagName == 'DIV' && angular.element(e).text() != '')
++count;
});
return count;
},
function(cols) {
var colNum = 12 / cols;
var cssClass = 'col-xs-' + colNum;
var elems = element[0].childNodes;
angular.forEach(elems, function(e) {
if (e.tagName == 'DIV') {
var div = angular.element(e);
if (div.text() != '' && !div.hasClass(cssClass))
div.addClass(cssClass);
}
});
});
}
}
});