title: Bootstrap - dynamic size of items
body: <p>I'm building a screen using Bootstrap and I don't know the correct way to reach the expected result.</p>
  
  <p>Basically, what I need is have resizable items in the screen, when it has only one item, this item fills the entire space and when there are multiple items, resize them equally, like the images below.</p>
  
  <p><a href="https://i.stack.imgur.com/1Vj01.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Vj01.png" alt="Multiple items"></a> </p>
  
  <p><a href="https://i.stack.imgur.com/pzkrI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pzkrI.png" alt="Single item"></a></p>
  
  <p>The HTML that I have so far:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container-fluid nopadding"&gt;
      &lt;header class="container-fluid header"&gt;
        &lt;span&gt;MINI RADICAL KART&lt;/span&gt;
        &lt;section class="floating-buttons-box"&gt;
          &lt;a class="btn-floating green-gradient play"&gt;&lt;img src="assets/imgs/play_button.png" width="12"/&gt;&lt;/a&gt;
          &lt;a class="btn-floating black-gradient add"&gt;&lt;img src="assets/imgs/plus_button.png" width="20"/&gt;&lt;/a&gt;
        &lt;/section&gt;
      &lt;/header&gt;
  
      &lt;div class="container-fluid"&gt;
        &lt;div id="clock" class="col-md-5 timer"&gt;
          &lt;h2&gt;Kart 01&lt;/h2&gt;
          &lt;h1 class="time"&gt;04:32&lt;/h1&gt;
          &lt;div class="buttons"&gt;
            &lt;img src="assets/imgs/pause_button.png" class="stop-button"/&gt;
            &lt;img src="assets/imgs/single_play_button.png" class="play-button"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  
    &lt;!-- SCRIPTS --&gt;
    &lt;!-- JQuery --&gt;
    &lt;script type="text/javascript" src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
    &lt;!-- Bootstrap tooltips --&gt;
    &lt;script type="text/javascript" src="js/popper.min.js"&gt;&lt;/script&gt;
    &lt;!-- Bootstrap core JavaScript --&gt;
    &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- MDB core JavaScript --&gt;
    &lt;script type="text/javascript" src="js/mdb.min.js"&gt;&lt;/script&gt;
    &lt;!-- Countdown JavaScript --&gt;
    &lt;script type="text/javascript" src="js/jquery.countdown.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      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');    
      });
    &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks.</p>