Angular Workshop - Xerius

Angular Workshop - Xerius

/* style.css */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  width: 32%;
}

UserPanel - html

<h3>Panel View</h3>
<div class="flex-grid">
  <div class="col">
    <div class="panel panel-default">
      <div class="panel-heading">John Doo</div>
      <div class="panel-body">
        <img src="http://api.randomuser.me/portraits/lego/2.jpg" width="100%">
        <table class="table">
            <tbody>
                <tr>
                    <td><strong>Company:</strong></td>
                    <td>Euricom</td>
                </tr>
                <tr>
                    <td><strong>Email:</strong></td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td><strong>Age:</strong></td>
                    <td>54</td>
                </tr>
                <tr>
                    <td><strong>Street:</strong></td>
                    <td>Langeleemstraat 21</td>
                </tr>
                <tr>
                    <td><strong>City:</strong></td>
                    <td>Antwerp</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

UserTable

<div>
  <h3>Table View</h3>
  <table class="table">
    <thead>
      <tr>
        <th>First</th>
        <th>Last</th>
        <th>Email</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doo</td>
        <td>[email protected]</td>
        <td>54</td>
      </tr>
    </tbody>
  </table>
</div>