Title: Bootstrap tile-based list
Tags: html;angularjs;twitter-bootstrap;web;tile
Question: I'm making a web app which should list objects gathered from json in a tile-based list (kinda like shopping store), where every tile is a div. What is the best way to do that in Bootstrap ? I'm using Angular and I want to do it with a help from ng-repeat directive. If the number of divs exceed view area, scroll bar should appear.
This is graphical view, how I want it to look like.
What is actually the best way to implement that?
Thanks in advance.


Here is another answer: <div class=container&gt;
<div class="row"&gt;
<div class="col-sm-4" ng-repeat="tile in tiles"&gt;
<div class="panel panel-default"&gt;
<div class="panel-header"&gt;
{{tile.header}}
</div&gt;
<div class="panel-body"&gt;
{{tile.body}}
</div&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
Something like this maybe? I use col-sm-4, that way 3 tiles can be visible in a row. When the screen becomes smaller, then 700-something, it will be layed upon eachother instead.

Here is another answer: Use bootstraps grid system. Put all the divs in a container with .row class and mark the ng-repeated div with .col-sm-4 Add max-width: and overflow: auto to your container so you get the scrolling.

Here is another answer: You can use the regular bootstrap grid system
<div class="row"&gt;
<div class="col-md-4"&gt;.col-md-4</div&gt;
<div class="col-md-4"&gt;.col-md-4</div&gt;
<div class="col-md-4"&gt;.col-md-4</div&gt;
<div class="col-md-4"&gt;.col-md-4</div&gt;
<div class="col-md-4"&gt;.col-md-4</div&gt;
<div class="col-md-4"&gt;.col-md-4</div&gt;
</div&gt;
The width of the page is 12 units, so divs of width 4 will give you 3 columns. If you keep adding divs with a total width of more than 12, it will be placed in diferent rows.
In the example I gave you, you should get exacly 2 rows with 3 elements in each.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:04/08/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><angularjs><twitter-bootstrap><web><tile>', 'Title': 'Bootstrap tile-based list', 'ViewCount': 2016, 'id': 29511847, 'user_AboutMe': '', 'user_AccountId': 5132841.0, 'user_DisplayName': 'visst', 'user_Reputation': 1211.0, 'user_Views': 18.0, 'user_id': 4112444.0}}