Create Dynamic Grid System in Bootstrap

Hi all, In order to enhance the look of grid system on your website with bootstrap framework, I will share how to create a dynamic grid system. Simply by javascript and jquery will shorten and ease create dynamic grid system.

Create dynamic grid system with bootstrap and adminLTE

In my case, i use adminLTE template to build dynamic grid in bootstrap. AdminLTE is great and free admin control panel or dashboard based on bootstrap v3 which has been downloaded more than 80000. Visit adminLTE official website for more information and download the templates.

Initial requirement :

You can use AdminLTE template or just bootstrap framework

Create Dynamic Grid System in Bootstrap

<html>
    <head>
        <meta charset="UTF-8">
        <title>Dynamic Grid system</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="../font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="skin-black">
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <aside class="right-side">
                <section class="content">
                <div class="box box-warning" >
                      <div class="box-body">
                       <div class="row" id="notifyme_url" style="display: none"></div>
                      		<h4>Dynamic Grid System</h4>
                                  <div class="form-group">
                                    <input type="text" class="form-control" id="input_url" placeholder="Input you value and press enter">
                                  </div>
                      </div>
                      <div class="box-body" id="tampilurl">

                      </div>
                </div>
                </section>
            </aside>
        </div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
		<script language="javascript">
		function delete_url(buttonid)
		{
				document.getElementById('notifyme_url').innerHTML='<div class="col-xs-8 col-md-4"><h4>Delete grid</h4></div>';
				var idku=buttonid;
				$('div#'+idku+' div').remove();
				document.getElementById("input_url").value='';
				document.getElementById("input_url").focus();

			$( "#notifyme_url" ).show( "slow" );
			setTimeout(function(){$( "#notifyme_url" ).hide( "slow" ); },4000);
			return false
		}
		function makeid()
		{
			var text = "";
			var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

			for( var i=0; i < 5; i++ )
				text += possible.charAt(Math.floor(Math.random() * possible.length));

			return text;
		}
		$('#input_url').bind("enterKey",function(e){
			 tambah_url();
		});
		$('#input_url').keyup(function(e){
		if(e.keyCode == 13)
		{
		  $(this).trigger("enterKey");
		}
		});
		function tambah_url()
		{
			var randomku= makeid();
			var buttonid= 'buttonid'+randomku;
			document.getElementById('notifyme_url').innerHTML='<div class="col-xs-8 col-md-4"><h4>Successfully add grid</h4></div>';
			var url=document.getElementById("input_url").value;
			var evt="'"+url+"'";
			var btnid="'"+buttonid+"'";
			document.getElementById("tampilurl").innerHTML += '<div class="form-group" id="'+buttonid+'" ><div class="row" ><div class="col-md-5"><pre>'+url+'</pre></div><div class="col-md-2"><button type="button" onClick="delete_url('+btnid+')" class="btn btn-primary">Delete</button></div></div></div>';
			document.getElementById("input_url").value='';
			document.getElementById("input_url").focus();
			$( "#notifyme_url" ).show( "slow" );
			setTimeout(function(){$( "#notifyme_url" ).hide( "slow" ); },3000);
			return false
		}
		</script>
    </body>
</html>

You can combine it with data from sql, using the bootstrap allows us to build a web-based mobile app, any question ? please leave comment below or visit my another bootstrap tutorial here.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: