I'm currently working on a layout using Bootstrap and I could use some guidance to achieve the desired outcome.
Essentially, what I am trying to accomplish is having resizable elements on the screen. When there's only one element, it should take up the entire space. However, when there are multiple items, they should resize equally as shown in the images below:
https://i.sstatic.net/1Vj01.png
https://i.sstatic.net/pzkrI.png
So far, this is the HTML code that I have:
<body>
<div class="container-fluid nopadding">
<header class="container-fluid header">
<span>MINI RADICAL KART</span>
<section class="floating-buttons-box">
<a class="btn-floating green-gradient play"><img src="assets/imgs/play_button.png" width="12"/></a>
<a class="btn-floating black-gradient add"><img src="assets/imgs/plus_button.png" width="20"/></a>
</section>
</header>
<div class="container-fluid">
<div id="clock" class="col-md-5 timer">
<h2>Kart 01</h2>
<h1 class="time">04:32</h1>
<div class="buttons">
<img src="assets/imgs/pause_button.png" class="stop-button"/>
<img src="assets/imgs/single_play_button.png" class="play-button"/>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Countdown JavaScript -->
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
var fiveSeconds = new Date().getTime() + 5000;
$('#clock').countdown(fiveSeconds, {elapse: true})
.on('update.countdown', function(event) {
$(".time").text(event.strftime('%M:%S'));
if (event.elapsed) {
$(".time").removeClass("green");
$(".time").addClass("red");
} else {
$(".time").removeClass("red");
$(".time").addClass("green");
}
});
$('.stop-button').click(function() {
$('div#clock').countdown('pause');
});
$('.play-button').click(function() {
$('div#clock').countdown('resume');
});
</script>
</body>
Any help would be appreciated. Thank you!