How do I prevent long URLs from breaking layout on mobile?

Asked on Aug 08, 2025

1 Answer

To prevent long URLs from breaking the layout on mobile, you can use Bootstrap's utility classes to ensure text wraps appropriately. The `text-wrap` class can be used to handle this situation effectively.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-wrap">
                        Here is a long URL that might break the layout: 
                        <a href="#">https://www.example.com/this-is-a-very-long-url-that-might-break-the-layout-on-mobile-devices</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `text-wrap` class ensures that the text will wrap within its container, preventing overflow issues on smaller screens.
Consider using `text-break` if you want to break long words or URLs at arbitrary points to fit the container.
Always test on different screen sizes to ensure the layout behaves as expected.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions