angular - How to display Bootstrap cards inline dynamically

Question

thanks in advance for the help. I am using Angular to pull in data and style it with Bootstrap.

Currently, the cards are showing on top of each other. But, how would one display the cards horizontally inline?

Here's my code:

 <div class="card-deck text-center">
        <div class="card box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ forecast.value.date | date: 'MMMM d, y'}}</h4>
        </div>
    <div class="card-body">
        <ul class="list-unstyled mt-3 mb-4">
            <li><img src="{{ forecast.value.hourly[0].weather_icons }}"></li>
            <li>Average Temprature: {{ forecast.value.avgtemp }}&deg;F</li>
            <li>Precipitation: {{ forecast.value.hourly[0].precip }}"</li>
            <li>Summary: {{ forecast.value.hourly[0].weather_descriptions }}</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
        </div>
    </div>
    </div>
    </div>

Here's how's it is showing:

Here's what I am looking for:

question from:https://stackoverflow.com/questions/65928052/how-to-display-bootstrap-cards-inline-dynamically

Answer 1

Just define some col-* classes inside a row.

https://getbootstrap.com/docs/4.0/layout/grid/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-deck text-center row">
  <div class="card box-shadow col-sm">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">{{ forecast.value.date | date: 'MMMM d, y'}}</h4>
    </div>
    <div class="card-body">
      <ul class="list-unstyled mt-3 mb-4">
        <li><img src="{{ forecast.value.hourly[0].weather_icons }}"></li>
        <li>Average Temprature: {{ forecast.value.avgtemp }}&deg;F</li>
        <li>Precipitation: {{ forecast.value.hourly[0].precip }}"</li>
        <li>Summary: {{ forecast.value.hourly[0].weather_descriptions }}</li>
      </ul>
      <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
    </div>
  </div>
  <div class="card box-shadow col-sm">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">{{ forecast.value.date | date: 'MMMM d, y'}}</h4>
    </div>
    <div class="card-body">
      <ul class="list-unstyled mt-3 mb-4">
        <li><img src="{{ forecast.value.hourly[0].weather_icons }}"></li>
        <li>Average Temprature: {{ forecast.value.avgtemp }}&deg;F</li>
        <li>Precipitation: {{ forecast.value.hourly[0].precip }}"</li>
        <li>Summary: {{ forecast.value.hourly[0].weather_descriptions }}</li>
      </ul>
      <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
    </div>
  </div>
</div>