Are there any CSS styles / bootstrap classes to get the following html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class=" border-left border-right border-bottom" style="width: 105px;">
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">07:00 - 08:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">08:00 - 09:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">09:00 - 10:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">10:00 - 11:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">11:00 - 12:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">12:00 - 13:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">13:00 - 14:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">14:00 - 15:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">15:00 - 16:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">16:00 - 17:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">17:00 - 18:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">18:00 - 19:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">19:00 - 20:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">20:00 - 21:00</div>
</div>
</div>
<div class="col border-right border-bottom">
<div class="row">
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 45px;
margin-left: 2px
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">08:00-10:00</div>
<div class="small">Test 3 lorem ipsum sole dore1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 67px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">08:30-10:30</div>
<div class="small">A B1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 67px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">08:30-10:30</div>
<div class="small">V1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 135px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">10:00-12:00</div>
<div class="small">test1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 135px;
margin-top: 180px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">11:00-14:00</div>
<div class="small">ABC1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 270px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">13:00-15:00</div>
<div class="small">asdasa1 </div>
</div>
</div>
<div class="row">
<div class="col text-center overflow-hidden rounded" style="height: 45px;
margin-top: 0px;
margin-left: 2px
;
margin-right: 2px;
border:solid;
border-color:#573FBE;">
<div style="font-size: 7px;">15:00-16:00</div>
<div class="small">volle breite </div>
</div>
</div>
</div>
<div class="col border-right border-bottom">
</div>
</div>https://jsfiddle.net/fgdur7k5/3/
to look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class=" border-left border-right border-bottom" style="width: 105px;">
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">07:00 - 08:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">08:00 - 09:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">09:00 - 10:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">10:00 - 11:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">11:00 - 12:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">12:00 - 13:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">13:00 - 14:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">14:00 - 15:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">15:00 - 16:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">16:00 - 17:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">17:00 - 18:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">18:00 - 19:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">19:00 - 20:00</div>
</div>
<div class="row" style="height: 45px; align-content:center">
<div class="col text-center">20:00 - 21:00</div>
</div>
</div>
<div class="col border-right border-bottom">
<div class="row">
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 45px;
margin-left: 2px;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">08:00-10:00</div>
<div class="small">Test 3 lorem ipsum sole dore1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 67px;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">08:30-10:30</div>
<div class="small">A B1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 67px;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">08:30-10:30</div>
<div class="small">V1 </div>
</div>
</div>
<div class="row" style="margin-top:-23px;">
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-left: 2px;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">10:00-12:00</div>
<div class="small">test1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 135px;
margin-top: 45px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">11:00-14:00</div>
<div class="small">ABC1 </div>
</div>
<div class="col text-center overflow-hidden rounded" style="height: 90px;
margin-top: 135px;
;
margin-right: 2px;
border:solid;
border-color:#000000;">
<div style="font-size: 7px;">13:00-15:00</div>
<div class="small">asdasa1 </div>
</div>
</div>
<div class="row">
<div class="col text-center overflow-hidden rounded" style="height: 45px;
margin-top: 0px;
margin-left: 2px
;
margin-right: 2px;
border:solid;
border-color:#573FBE;">
<div style="font-size: 7px;">15:00-16:00</div>
<div class="small">volle breite </div>
</div>
</div>
</div>
<div class="col border-right border-bottom">
</div>
</div>https://jsfiddle.net/fgdur7k5/23/
without needing to sort the col elements?
Basically I want all the cols to be as far left as possible, as long as they dont overlap anything else...
