<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Columns - Gridmanager Demos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="../dist/css/jquery.gridmanager.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script src="../dist/js/jquery.gridmanager.js"></script>
</head>
<body>
<div class="container">
<div id="mycanvas">
<div class='row'><div class='column col-md-12'><p><img alt='' src='http://placekitten.com/1600/300' class='img-responsive'></p></div></div><div class='row'><div class='column col-md-6'><h1>asdasda</h1><p><strong>Lorem ipsum dolor sit amet, </strong>consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.</p></div><div class='column col-md-6'><h2>ASADASD</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.</p></div></div><div class='row'><div class='column col-md-4'><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-4'><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-4'><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div></div><div class='row'><div class='column col-md-3'><p><img src='http://placekitten.com/300/300/' class='img-responsive'></p><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-3'><p><img src='http://placekitten.com/400/400/' class='img-responsive'></p><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-3'><p><img src='http://placekitten.com/400/400/' class='img-responsive'></p><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-3'><p><img src='http://placekitten.com/300/300/' class='img-responsive'></p><p>Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div></div><div class='row'><div class='column col-md-2'><p> Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-2'><p> Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-2'><p> Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-2'><p> Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-2'><p> Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div><div class='column col-md-2'><p> Ut eu dui lectus. Duis faucibus eu augue ut placerat.</p></div></div>
</div>
</div>
<!--================== JS ================-->
<script>
$(document).ready(function(){
$("#mycanvas").gridmanager({
debug : 1 ,
controlButtons: [[12], [6,6], [4,8,4], [3,7,1,1], [2,1,2,1,2,1,3], [1,3,1,4,3], [2,8,2], [4,8], [8,4]]
});
});
</script>
</body>
</html>