limit foreach prints inside div layer

How can I limit the impressions of the foreach ?.

I need only 7 rows horizontal to print. is there any way to do it with css or pagination?

Image the problem: https://i.imgur.com/LwhA42z.png

right now print infinity, the design is deformed

 <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-table-two">

                <div class="widget-heading">
                    <h5 class="">Turnos Recientes</h5>
                </div>

                <div class="widget-content">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                          
                                <tr>
                                    <th><div class="th-content">Cliente</div></th>
                                    <th><div class="th-content">Servicio</div></th>
                                    <th><div class="th-content mr-3">Horario</div></th>
                                    <th><div class="th-content ml-3">Asistencia</div></th>
                                    <th><div class="th-content mr-3">Estado</div></th>
                                </tr>
                        
                            </thead>
                            <tbody>
                            @foreach ($servicios as $servicio)
                                <tr>
                                <td><div class="td-content customer-name"></div></td>
                                    <td><div class="td-content product-brand"></div></td>
                                    <td><div class="td-content ml-2"></div></td>
                                    <td><div class="td-content"> 
                                    @if($servicio->asistencia == 'on')
                                    Sí
                                    @elseif($servicio->asistencia == null)
                                    No
                                    @endif
                                
                </div></td>
                                    <td><div class="td-content">
                                    @if($servicio->c_confirma == 'on')
                                    <span class="badge outline-badge-primary">Confirmado</span>
                                    @elseif($servicio->c_confirma == null)
                                    <span class="badge outline-badge-danger">Sin Confirmar</span>
                                    @endif
                                    </span></div></td>
                                </tr>
                                @endforeach
                             
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3r8ByP8
via IFTTT

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

5 Free Black and White Social Media Icons Sets with CSS and HTML

صورة
Hi! In this article I've come up with 5 modern sets of black and white social media icons using pure css3 and html code. As social media plays major role in creating brand awareness, one cannot overlook the importance of implementing social sharing buttons in their websites. And this article is going to help you with five different styles of social icons to use in your websites. Moreover these icons are built without using images which will improve your website's loading speed too. Like my earlier tutorials on pure css social media icons , this post too will use font awesome library. Font Awesome is a scalable vector font library and its icons can be easily customized using css to fit with the rest of your website's theme. It is originally developed for bootstrap but works great with all the other frameworks and even with plain html. Load Font Awesome Library in HTML File To use these css social media icons you need font awesome library. Use this line of code in...
قراءة المزيد

How to Create Treeview with Bootstrap and jQuery

صورة
Hi! Today let's see about creating treeview using bootstrap and jquery . A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap. And I found out a good library called 'Bootstrap Treeview' . It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons , checkboxes and filters etc. Building Treeview with Bootstrap: Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries, Bootstrap CSS jQuery Bootstrap Treeview These libraries are available in the cdn, so you can load them directly on your projects without down...
قراءة المزيد

How to Change Apache and MySQL Port Number in XAMPP Localhost

صورة
Hi! I'm going to show you how to change the apache and mysql port number in xampp localhost . In case you wonder why you should change the port number of a web server, here is the answer. It's not unlikely for you to run multiple PHP versions on a same machine or to run IIS or JBoss simultaneously with Apache. When you start a web server, it occupies the default HTTP port '80'. If you try to run the second one, it will fail since the port is already occupied. So unless you change the port for the latter, you can't run more than one web server at once. Below we will see the ways to change the port no. for apache and mysql. To Change Apache Port Number: Stop Apache server and exit XAMPP control panel if it is already running. First you must change the HTTP port. Go to [path-to-xampp-folder]/apache/conf folder and open http.conf file. The default port for Apache is '80'. Unless you have changed it, this is the port number you must replace. Now look f...
قراءة المزيد