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

Asked on Aug 08, 2025

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.