Boostrap dynamic size

by Telmo Rodrigues

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<H1>RESIZE ME</H1>

<div id="change"></div>

JavaScript

function BootstrapCalCss(size) {


  var colSize = Math.ceil(12 / (size || 1));

  var $windowSize = $(window).width();


  if ($windowSize >= 992) {
    return 'col-md-' + colSize;
  } else if ($windowSize >= 768) {
    return 'col-sm-' + colSize;
  } else if ($windowSize >= 1200) {
    return 'col-lg-' + colSize;
  } else {
    return 'col-xs-12';
  }


}


$(function() {
  $(window).resize(function() {
    $("#change").addClass(BootstrapCalCss(3));
    $("#change").text(BootstrapCalCss(3));

  });
});