title: How to paginate the bootstrap cards in asp.net mvc
body: <p>Good morning, I tell you, I am working on a shopping site with Bootstrap 4 as much as possible, which I want to show the products in this way, I leave an example: <a href="https://mdbootstrap.com/snippets/jquery/ascensus/135508" rel="nofollow noreferrer">https://mdbootstrap.com/snippets/jquery/ascensus/135508</a></p>
  <p>In order to replicate the above example I have done the following: I have this main view in which I have created a container and within it I render a partial view</p>
  <pre><code>@model Entidades.ViewModel.eTiendaOnlineViewModel
      &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-sm-12&quot;&gt;
          &lt;div id=&quot;inam&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
              &lt;div class=&quot;carousel-inner&quot;&gt;
                  @{
                      Html.RenderPartial(&quot;vpprueba&quot;, Model.productosmasvendidos);
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;a href=&quot;#inam&quot; class=&quot;carousel-control-prev&quot; data-slide=&quot;prev&quot;&gt;
      &lt;span class=&quot;carousel-control-prev-icon&quot;&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a href=&quot;#inam&quot; class=&quot;carousel-control-next&quot; data-slide=&quot;next&quot;&gt;
      &lt;span class=&quot;carousel-control-next-icon&quot;&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In this partial view I have what would become the carousel as such and calling the attributes of my model to show them, nothing could go wrong, however, when the iteration is performed, it renders them vertically and not horizontally. I would like to add some kind of pagination if possible.</p>
  <pre><code>@model List&lt;Entidades.ViewModel.eProductosViewModel&gt;
  @{
  if (Model != null)
  {
      foreach (var producto in Model)
      {
          &lt;div class=&quot;col-sm-12 col-lg-4&quot;&gt;
              &lt;div class=&quot;card&quot; style=&quot;width: 300px;margin: auto;&quot;&gt;
  
                  &lt;img src=&quot;@Url.Content(@producto.imagen1)&quot; class=&quot;card-img-top&quot;&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
                      &lt;h4 class=&quot;card-title&quot;&gt;@producto.descripcion_corta&lt;/h4&gt;
                      &lt;p class=&quot;card-text&quot;&gt;@producto.preciopublico&lt;/p&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;btn&quot; onclick=&quot;showaddtocart(@producto.cod_producto)&quot;&gt;&lt;i class=&quot;fas fa-shopping-cart&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      }
  }
  </code></pre>
  <p>}</p>
  <p>My controller is:</p>
  <pre><code>using Entidades.ViewModel;
  using System.Web.Mvc;
  namespace TiendaOnline.Controllers{
  public class tiendaController : Controller{
  // GET: store
      public ActionResult index()
      {
      //entity general
          eTiendaOnlineViewModel onlinestore = new eTiendaOnlineViewModel();
      
      eClaseProductoViewModel clase1 = new eClaseProductoViewModel()
          {
              cod_clase_producto = &quot;0001&quot;,
              descripcion = &quot;CLASE NO. 1&quot;,
              imagen = &quot;~/Content/images/alacena.jpg&quot;
          };
  
          onlinestore.clasesproducto.Add(clase1);
  
          eClaseProductoViewModel clase2 = new eClaseProductoViewModel()
          {
              cod_clase_producto = &quot;0002&quot;,
              descripcion = &quot;CLASE NO. 2&quot;,
              imagen = &quot;~/Content/images/Farmacia.jpg&quot;
          };
  
          onlinestore.clasesproducto.Add(clase2);
  
          eClaseProductoViewModel clase3 = new eClaseProductoViewModel()
          {
              cod_clase_producto = &quot;0003&quot;,
              descripcion = &quot;CLASE NO. 3&quot;,
              imagen = &quot;~/Content/images/pescado.jpg&quot;
          };
  
          onlinestore.clasesproducto.Add(clase3);
          return View(onlinestore);
      }
  </code></pre>
  <p>If someone can give me a light in advance I appreciate it, waiting for your comments, greetings.</p>