Bootstrap 5 Copy Link Example

Uncategorized / Leave a Comment

Bootstrap 5 Responsive Copy Link Example. In this Bootstrap Copy Link, you can see we have used buttons and input tags. We also use the Bootstrap Tooltip on the Copy Link Button.

Note: Import the script below to enable the bootstrap tooltip into the project.

HTML

<div>
    <div>
        <h1>Copy Link</h1>
        <p>Bootstrap Copy link</p>
    </div>
    <div>
        <div>
            <h3>Left align copy link</h3>
            <div>
                <div>
                    <div>
                        <button
                                data-bs-toggle="tooltip" data-bs-placement="bottom" title="copy to clipboard">
                            COPY
                        </button>
                        <input type="text" value="Hello@gmail.com">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <h3>Right align copy link</h3>
            <div>
                <div>
                    <div>
                        <input type="text" value="Hello@gmail.com">
                        <button
                                data-bs-toggle="tooltip" data-bs-placement="bottom" title="copy to clipboard">
                            COPY
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <h3>Copy link with Icon</h3>
            <div>
                <div>
                    <div>
                        <input type="text" value="Hello@gmail.com">
                        <button
                                data-bs-toggle="tooltip" data-bs-placement="bottom" title="copy to clipboard">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                      d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Must Read