JS, Placeholder Image using Unsplash

by von

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
    </div>
    <div class="row">
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
    </div>
    <div class="row">
        <div class="col-3">col-3</div>
        <div class="col-3">col-3</div>
        <div class="col-3">col-3</div>
        <div class="col-3">col-3</div>
    </div>
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    </div>
    <div class="row">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>
    <div class="row">
        <div class="col-12">col-12</div>
    </div>
</div>

CSS

.container>.row>div {
    height: 100px;
    padding: 0;
    outline: 1px dotted lightblue;
    text-align: center;
    background: silver;
}

JavaScript

$("[class*='col-']").each(function() {
    var width = $(this).width();
    var height = $(this).height();

    $(this).html('<img src="https://source.unsplash.com/random/' + width + 'x' + height + '">');
});

function randNum(min, max) {
    Math.floor(Math.random() * max) + min;
}