Bootstrap columns not aligning in the same row

Question

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>

Answer 1

From the Bootstrap documentation:

• Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.

• Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.

• Content should be placed within columns, and only columns may be immediate children of rows.

In other words, div class='row' needs to be inside div class='container' in your code.

.sports-container {
  background-color: whitesmoke;
  margin-top: 20px;
}

<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
  crossorigin="anonymous">

<div class="container sports-container col-md-12">
  <div class="row">
    <div class="col-md-4"><a class="btn btn-outline-info">Baseball</a></div>
    <div class="col-md-4"><a class="btn btn-outline-info">Hockey</a></div>
    <div class="col-md-4"><a class="btn btn-outline-info">Tennis</a></div>
  </div>
</div>