→ Anonymous
→ Toggle switches

Toggle switches

This bootstrap css example is contributed by Anonymous, on 28-Apr-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Switch

Tags: Toggle

Author Anonymous

1.7k

v.5.3

Fork Fullscreen

<div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
        <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
        <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
    </div>
</div>

More Examples

Bootstrap 5 Login Modal

Author:
Anonymous

1 year ago

10.7k

v.5.3
Login form with social login buttons

Author:
Juan Martinez

1 year ago

5.9k

v.5.3
Get In Touch Form Example
Contact us form

Author:
Anonymous

9 months ago

1.4k

v.5.3
Gallery #1

Author:
java stories story

5 days ago

134

v.5.3
Music speakers status

Author:
Jonathan

3 months ago

488

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

10 months ago

2.8k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

1 year ago

6.4k

v.5.3
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

1 year ago

1.5k

v.5.3
Responsive footer using HTML 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. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

11 months ago

5.3k

v.4.6
Pricing cards

Author:
Kemaya m

1 year ago

1.6k

v.4.6
Copy Code Section
Code block with working copy option

Author:
Kemaya m

1 year ago

1.9k

v.5.3
contact us

Author:
java stories story

6 days ago

171

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent