Bootstrap columns not aligning in the same row

Trying to render dynamically buttons and place 3 buttons in each row but they appear on the screen all in a separate row?

 <div class="row">
<div class="container sports-container col-md-12">

    @foreach (var sport in Model.Aggregator.SportsRepository.List().Where(x => x.ParentSportId == null))
    {
        <div class="col-md-4">
            <a class="btn btn-outline-info">@sport.Description</a>
        </div>
    }


</div>

<style>
.sports-container {
    background-color: whitesmoke;
    margin-top: 20px;
}
</style>

I would add this as a comment but I do not have enough reputation. Is there a reason why you do:

 <row>
   <container column>
                <column>

instead of

<container>
     <row>
       <column>
           <row>
             <column>