Q:

I have to create dynamic divs on button click using bootstrap3

As seen in the above pic i need to add the div as shown above when user clicks on the Add button. The difficulty here is i need to do it using bootstrap i.e. all the div's should rearrange based on the resolution i.e. for 1920x900, 1280x600, 980x1280, 800x1280, 768x1024, 360x640.
Do let me know how i can do this. Any help is appreciated.

A:

Click here to learn about Bootstrap's grid system. Basically we say that the max width is 12, so if you want 4 containers with equal width you just divide 12 by 4 which is 3. Therefore col-xs-3 col-sm-3 col-md-3 is the classes we wanna add to each div. 
I have made a quick example of how this could work.

$('#add').click(function(){
    $('.container .row').append('<div class="col-xs-3 col-sm-3 col-md-3">Div 1</div><div class="col-xs-3 col-sm-3 col-md-3">Div 2</div><div class="col-xs-3 col-sm-3 col-md-3">Div 3</div><div class="col-xs-3 col-sm-3 col-md-3">Div 4</div>');
});
.col-md-3{
    height: 100px;
    background-color:rgb(230,230,230);
    text-align:center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id="add" class="btn btn-primary">Click me!</button>

<div class="container">
    <div class="row">
    </div>
</div>

