My very first question here is quite simple. I have a script that creates rows with dynamic content by appending 4 boxes (columns) in one row and then appending the row to the container. After completing this process, it appends the container to the main container. However, I noticed that on a 4K display, the columns are taking up 100% width of the row, similar to how they appear on a mobile device.
This is the output generated by my script:
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="magazin-widget">
<div class="container">
<div class="row">
<div class="col-md-3">Dynamic Box 1</div>
<div class="col-md-3">Dynamic Box 2</div>
<div class="col-md-3">Dynamic Box 3</div>
<div class="col-md-3">Dynamic Box 4</div>
</div>
<div class="row">
<div class="col-md-3">Dynamic Box 5</div>
<div class="col-md-3">Dynamic Box 6</div>
<div class="col-md-3">Dynamic Box 7</div>
<div class="col-md-3">Dynamic Box 8</div>
</div>
</div>
</div>I'm unable to identify any errors in this markup... Could it be an issue with Bootstrap? As far as I know, it should look like this: http://getbootstrap.com/css/#grid-example-basic
Edit:
The console only logs the following messages:
JQMIGRATE: Migrate is installed, version 1.4.1
[cycle2] --c2 init--
Output Produced: