What’s wrong with this non-responsive paging using boostrap 4 in Laravel?

Asked

Viewed 279 times

2

I’m using Laravel to make a system, along with the framework Bootstrap. And I’m using the paging feature. However, I’m having trouble making the pagination numbers responsive. Both are not configured for the table, and are going beyond the corners. Below is the example.

paginaçãoDesconfigurada

I’m trying to center or let some pagination numbers juxtapose. But every time I resize to Cellular mode (mobile), your disfigurement occurs. Below is the code of what I am using in Laravel.

            <nav class="nav d-flex justify-content-center">
                <ul class="pagination p-4 pagination-sm flex-wrap">
                    {{ $prospect->appends($data)->links() }}
                </ul>                    
            </nav>

I also added the code here, next to the table I’m using. Just looking at my bootply, it is understood that there is no problem, but using the pagination of Laravel, it happens different in front-end.

I’m wondering if Laravel’s paging might actually interfere with front-end or is it just a basic misuse of boostrap 4.

How can I be fixing this problem?

laravel twitter-bootstrap laravel-5 responsive-layout paging

1 answer

2


You put the classes of flex in the wrong place! They have to be in the ul and not in the div

        <nav class="nav ">
            <ul class="pagination p-4 pagination-sm d-flex justify-content-center flex-wrap">
                {{ $prospect->appends($data)->links() }}
            </ul>                    
        </nav>

Follow an example, note that the classes of flex are in the ul, not in the div:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<nav class="nav w-50" >
    <ul class="pagination p-4 pagination-sm d-flex justify-content-center flex-wrap">
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
        <li class="btn btn-primary m-1">1</li>
    </ul>                    
</nav>

  • I don’t know what can differentiate, but would it be necessary to post the rest of the code with the table together? Here with me it didn’t work that way. Like, it’s not just in the center, only if you put the Justify-content-center on the Nav. And it’s still past the table size.

  • @Arthurabitante as the code you posted in the question the most that can help you is this... If you can update the question and put the table as it is rendered in the browser, type opens in the browser, give a Ctrl+U and take the table already renders. Ai tests to see how she looks insolently on a blank page. This will help you see if the mistake is in her or if it’s something else that’s on the page that’s getting in the way. But only with your question code can’t help more than that :/

  • I have just edited the question, the code is here, https://www.bootply.com/Ne9SYj0yN7. it seems that I have to extend the question to Laravel. Because something in Laravel’s paging is interfering too.

  • @Arthurabitante then it should be this pq even in the environment that you’ve assembled works right http://prntscr.com/peigfv Check if Laravel is putting inline styles in your HTML tag, give an inspected element after rendered to see if it identifies something

Browser other questions tagged laravel twitter-bootstrap laravel-5 responsive-layout paging

You are not signed in. Login or sign up in order to post.