Sort widgets on screen with CSS

Question

I’m replicating some buttons with the "ng-repeat" with angular, but I’m having trouble sorting these buttons in the way I want. I want 4 buttons shown on the lower left and 4 buttons on the lower right. I can not use the Cup because it would disturb another time.

Html code:

.btf {
        color: white;
        font-weight: bold;
        font-size: 20px;
        float: left;
        width: 50%;
        height: 79px;
        background-color: #2E5491;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
    <div class="page-header" id="principal">
        <div class="divpai">
            <span class="divbutton" ng-repeat="menuItem in teste  = data.alexa.item | filter:  menuSel ">
                <button id="btf1" ng-repeat="menu in menuItem.children.child" ng-click="selecionaMenu(menu['@attributes'].id)" class="btf">{{menu['@attributes'].id | label : mapaLabels}}</button>
            </span>
        </div>
    </div>
</div>

Answer 1

I believe that using the grid system Bootstrap would solve your problem.

<div class="row">
    <!-- Primeira linha com 4 botões -->
    <div class="col-md-3">
        <!-- Botão -->
    </div>
</div>

<div class="row">
    <!-- Segunda linha com 4 botões -->
    <div class="col-md-3">
        <!-- Botão -->
    </div>
</div>

Adapt this code to your need and so should solve your problems.