→ Ankit khedkar
→ Credit cards bootstrap 5

Credit cards bootstrap 5

credit cards design made with Bootstrap 5

This bootstrap css example is contributed by Ankit khedkar, on 20-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is copy

Tags: Other Clone

Author Ankit khedkar

2.9k

v.5.3

Fork Fullscreen

<div class="container mt-5">
    <h1 class="mb-4">Credit Card Designs</h1>
    <div class="row">
        
        <div class="col-md-4 mb-4">
            <div class="credit-card bg-primary text-white p-4 d-flex flex-column justify-content-between">
                <div class="d-flex justify-content-between align-items-center">
                    <h4>Classic Card</h4>
                    <i class="fab fa-cc-visa fa-2x"></i>
                </div>
                <div class="card-number my-3">
                    **** **** **** 1234
                </div>
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="card-holder">John Doe</div>
                        <div>Valid Thru: 12/25</div>
                    </div>
                    <img src="https://www.svgrepo.com/show/362035/visa-3.svg" alt="Chip" width="40">
                </div>
            </div>
        </div>

<div class="col-md-4 mb-4">
            <div class="credit-card bg-warning text-dark p-4 d-flex flex-column justify-content-between">
                <div class="d-flex justify-content-between align-items-center">
                    <h4>Gold Card</h4>
                    <i class="fab fa-cc-mastercard fa-2x"></i>
                </div>
                <div class="card-number my-3">
                    **** **** **** 5678
                </div>
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="card-holder">Jane Smith</div>
                        <div>Valid Thru: 06/24</div>
                    </div>
                    <img src="https://www.svgrepo.com/show/362035/visa-3.svg" alt="Chip" width="40">
                </div>
            </div>
        </div>

<div class="col-md-4 mb-4">
            <div class="credit-card bg-dark text-white p-4 d-flex flex-column justify-content-between">
                <div class="d-flex justify-content-between align-items-center">
                    <h4>Platinum Card</h4>
                    <i class="fab fa-cc-amex fa-2x"></i>
                </div>
                <div class="card-number my-3">
                    **** **** **** 9012
                </div>
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="card-holder">Robert Johnson</div>
                        <div>Valid Thru: 09/26</div>
                    </div>
                    <img src="https://www.svgrepo.com/show/362035/visa-3.svg" alt="Chip" width="40">
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

1 year ago

1.5k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

1 year ago

1k

v.4.6
Parallax effect with image background

Author:
Anonymous

1 year ago

2.2k

v.4.6
Bootstrap 5 chat template

Author:
Andreas Müller

1 year ago

2.7k

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

11 months ago

2.4k

v.5.3
Background image with bootstrap 4
Bootstrap 4 background image

Author:
Anonymous

1 year ago

1.4k

v.4.6
Changelog page template

Author:
Asmath

11 months ago

3.2k

v.5.3
Responsive video container

Author:
Anonymous

1 year ago

1.2k

v.4.6
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

1 year ago

8.6k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

1 year ago

6.8k

v.5.3
Privacy policy template with boostrap 5

Author:
Anonymous

11 months ago

3k

v.5.3
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

1 year ago

2.1k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent