title: Ionic responsive grid doesn't work
body: <p>I created a responsive grid in Ionic which doesn't work properly. The Grid is not responsive. So it isn't automatically adjusted on different screen size and set no linebreak if I add many Buttons or delete these to the/from the system. Either they merge into each other or all the buttons are in a column below the each other on small screens. How can i solve this?</p>
  
  <p>I add or delete all the buttons in a JSON-File. From there I parse the Buttons in to the system.</p>
  
  <p><strong>JSON:</strong> 7 Buttons</p>
  
  <pre><code>[
    {
      "_comment": "Games",
      "type": "button",
      "id": "entertainmentButton",
      "icon": "ion-film-marker",
      "name": "Game and entertainment",
      "topage": "servicePage.html",
      "color": "white",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "backgroundcolor": "#0066FF",
      "font-size": "26px"
    },
    {
      "_comment": "Logo",
      "type": "button",
      "id": "MainPageLogo",
      "icon": "",
      "image": "../img/icon/logo_moenchsweiler.png",
      "name": "second link",
      "topage": "",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "color": "",
      "backgroundcolor": "",
      "font-size": ""
    },
    {
      "_comment": "Logo",
      "type": "button",
      "id": "MainPageLogo",
      "icon": "",
      "image": "../img/icon/logo_moenchsweiler.png",
      "name": "second link",
      "topage": "",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "color": "",
      "backgroundcolor": "",
      "font-size": ""
    },
    {
      "_comment": "Logo",
      "type": "button",
      "id": "MainPageLogo",
      "icon": "",
      "image": "../img/icon/logo_moenchsweiler.png",
      "name": "second link",
      "topage": "",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "color": "",
      "backgroundcolor": "",
      "font-size": ""
    },
    {
      "_comment": "Logo",
      "type": "button",
      "id": "MainPageLogo",
      "icon": "",
      "image": "../img/icon/logo_moenchsweiler.png",
      "name": "second link",
      "topage": "",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "color": "",
      "backgroundcolor": "",
      "font-size": ""
    },
    {
      "_comment": "Logo",
      "type": "button",
      "id": "MainPageLogo",
      "icon": "",
      "image": "../img/icon/logo_moenchsweiler.png",
      "name": "second link",
      "topage": "",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "color": "",
      "backgroundcolor": "",
      "font-size": ""
    },
    {
      "_comment": "Logo",
      "type": "button",
      "id": "MainPageLogo",
      "icon": "",
      "image": "../img/icon/logo_moenchsweiler.png",
      "name": "second link",
      "topage": "",
      "function": "OpenLink()",
      "controller": "OpenLinkCtrl",
      "color": "",
      "backgroundcolor": "",
      "font-size": ""
    }
  ]
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var myApp = angular.module('starter', []);
  myApp.config(['$sceDelegateProvider', function($sceDelegateProvider) {
      $sceDelegateProvider.resourceUrlWhitelist([
          'self',
          ''
      ]);
  }]);
  
  myApp.controller('generateHTMLCtrl', function ($scope, $http, $compile, $interpolate, $templateCache) {    
      $http.get('myjsonfile.json').success(function (data) {      
          for(var i in data){            
              var interpolated = $interpolate($templateCache.get("tpl").trim())(data[i]);            
              angular.element(document.querySelector("#loadhere")).append($compile(interpolated)($scope));            
          }               
      });
  });
  
  myApp.controller("OpenLinkCtrl", function ($scope) {    
          $scope.OpenLink = function () {
             alert("Link open");
          }    
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;body ng-app="starter" class="padding" style="text-align: center"&gt;
     &lt;div class="row responsive-md" ng-controller="generateHTMLCtrl" id="loadhere"&gt;&lt;/div&gt;
     &lt;script type="text/ng-template" id="tpl"&gt;
        &lt;div class="col"&gt;
           &lt;a style="color:{{color}}; background-color:{{backgroundcolor}} " id="{{id}}" class="{{type}}" href="{{topage}}" ng-controller="{{controller}}" ng-click="{{function}}"&gt; &lt;i class="{{icon}}"&gt;&lt;br&gt;&lt;/i&gt;{{name}}&lt;/a&gt;
        &lt;/div&gt;
     &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>What do I need to modify in HTMl-code that the Grid is responsive?</strong></p>
  
  <p><strong>Edit:</strong></p>
  
  <p>It should look like here, e.g:</p>
  
  <pre><code>&lt;div class="row responsive-sm"&gt;
              &lt;div class="col"&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
                  &lt;button style="width: 100px; height: 100px"&gt;Test&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This code displays the buttons as follows:</p>
  
  <p>on large screen size:</p>
  
  <p><a href="https://i.stack.imgur.com/A4FTQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A4FTQ.png" alt="enter image description here"></a></p>
  
  <p>bit smaller:</p>
  
  <p><a href="https://i.stack.imgur.com/lWnRJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lWnRJ.png" alt="enter image description here"></a></p>
  
  <p>very small:</p>
  
  <p><a href="https://i.stack.imgur.com/7S5Kw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7S5Kw.png" alt="enter image description here"></a></p>
  
  <p><strong>Edited:</strong></p>
  
  <p><strong>The solution:</strong></p>
  
  <pre><code>&lt;div ng-controller="generateHTMLCtrl" id="loadhere"&gt;
              &lt;script type="text/ng-template" id="tpl"&gt;
                  &lt;a style="color:{{color}}; background-color:{{backgroundcolor}};"
                     id="{{id}}" class="{{type}}" href="{{topage}}"
                     ng-controller="{{controller}}" ng-click="{{function}}"&gt;
                      &lt;i class="{{icon}}"&gt;&lt;br&gt;&lt;/i&gt;{{name}}
                  &lt;/a&gt;
              &lt;/script&gt;
          &lt;/div&gt;
  </code></pre>