Tips for customizing the appearance of various classes in Bootstrap 4

I am struggling to personalize the Bootstrap switch due to the middle toggler limitation.

For customization purposes, I aim to increase the width and height of the switch to ensure visibility across various resolutions. My approach involves utilizing classes such as 

custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl
alongside the existing *-sm, *-md, *-lg, *-xl classes.

Although my project employs SCSS, I am open to CSS solutions as well.

I attempted to modify the entire code for the Bootstrap switch, only to find that it deviated significantly from its original appearance.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
  <label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>

javascriptcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

Looking to customize the size of the bootstrap switch? You can easily achieve this by using classes like *-sm, *-md, *-lg, *-xl. With some SCSS magic, I was able to create styles for all resolutions with just one @mixin.

For Bootstrap 4, you can use classes like 

custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl
. Check out the SCSS and CSS snippets below:

SCSS: https://codepen.io/nisharg/pen/VwLbYvv

CSS: https://codepen.io/nisharg/pen/mdJmywW

LIVE SNIPPET (CSS)

...Code snippets here...

And if you're working with Bootstrap 5, simply switch to classes like 

form-switch-sm, form-switch-md, form-switch-lg, form-switch-xl
. Here are the SCSS and CSS links:

SCSS: https://codepen.io/nisharg/pen/gOPLOYY

CSS: https://codepen.io/nisharg/pen/ExPNxYE

LIVE SNIPPET (CSS)

...More code snippets here...

Answer №2

.custom-control.material-switch {
  --color: #26a69a;
  padding-left: 0;
}

.custom-control.material-switch .material-switch-control-input {
  display: none;
}

.custom-control.material-switch .material-switch-control-input:checked~.material-switch-control-indicator::after {
  background-color: var(--color);
  left: 17px;
}

.custom-control.material-switch .material-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 16px;
  background: #ddd;
  border-radius: 16px;
  transition: 0.3s;
}

.custom-control.material-switch .material-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: 0.3s;
  top: -1px;
  left: -1px;
  background: #fdfdfd;
  box-shadow: 0 2px 10px #aaa;
}

.custom-control.ios-switch {
  --color: #4cd964;
  padding-left: 0;
}

.custom-control.ios-switch .ios-switch-control-input {
  display: none;
}

.custom-control.ios-switch .ios-switch-control-input:active~.ios-switch-control-indicator::after {
  width: 20px;
}

.custom-control.ios-switch .ios-switch-control-input:checked~.ios-switch-control-indicator {
  border: 10px solid var(--color);
}

.custom-control.ios-switch .ios-switch-control-input:checked~.ios-switch-control-indicator::after {
  top: -8px;
  left: 4px;
}

.custom-control.ios-switch .ios-switch-control-input:checked:active~.ios-switch-control-indicator::after {
  left: 0px;
}

.custom-control.ios-switch .ios-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ddd;
}

.custom-control.ios-switch .ios-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  transition: 0.3s;
  top: 0px;
  left: 0px;
  background: #fff;
  box-shadow: 0 0 2px #aaa, 0 2px 5px #999;
}

.custom-control.border-switch {
  --color: #4cd964;
  padding-left: 0;
}

.custom-control.border-switch .border-switch-control-input {
  display: none;
}

.custom-control.border-switch .border-switch-control-input:checked~.border-switch-control-indicator {
  border-color: var(--color);
}

.custom-control.border-switch .border-switch-control-input:checked~.border-switch-control-indicator::after {
  left: 14px;
  background-color: var(--color);
}

.custom-control.border-switch .border-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ccc;
}

.custom-control.border-switch .border-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  left: 2px;
  background: #ccc;
}

.custom-control.teleport-switch {
  --color: #4cd964;
  padding-left: 0;
}

.custom-control.teleport-switch .teleport-switch-control-input {
  display: none;
}

.custom-control.teleport-switch .teleport-switch-control-input:checked~.teleport-switch-control-indicator {
  border-color: var(--color);
}

.custom-control.teleport-switch .teleport-switch-control-input:checked~.teleport-switch-control-indicator::after {
  left: -14px;
}

.custom-control.teleport-switch .teleport-switch-control-input:checked~.teleport-switch-control-indicator::before {
  right: 2px;
  background-color: var(--color);
}

.custom-control.teleport-switch .teleport-switch-control-indicator {
  display: inline-block;
  position: relative;
  margin: 0 10px;
  top: 4px;
  width: 32px;
  height: 20px;
  background: #fff;
  border-radius: 16px;
  transition: 0.3s;
  border: 2px solid #ccc;
  overflow: hidden;
}

.custom-control.teleport-switch .teleport-switch-control-indicator::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  left: 2px;
  background: #ccc;
}

.custom-control.teleport-switch .teleport-switch-control-indicator::before {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.3s;
  top: 2px;
  right: -14px;
  background: #ccc;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-controls-stacked d-block my-3">
  <div class="row">
    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control material-switch">

<input type="checkbox" class="material-switch-control-input">
<span class="material-switch-control-indicator"></span>

</label>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control ios-switch">

<input type="checkbox" class="ios-switch-control-input">
<span class="ios-switch-control-indicator"></span>

</label>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control border-switch">

<input type="checkbox" class="border-switch-control-input">
<span class="border-switch-control-indicator"></span>

</label>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="card">
        <div class="card-body">
          <label class="custom-control teleport-switch">

<input type="checkbox" class="teleport-switch-control-input">
<span class="teleport-switch-control-indicator"></span>

</label>
        </div>
      </div>
    </div>


  </div>



</div>
Give this one a shot if you're okay with it being slightly lengthy...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the concept behind the event processing loop in Node.js?

Currently, I am reviewing a gist that outlines a file walk algorithm in JavaScript // ES6 version using asynchronous iterators, compatible with node v10.0+ const fs = require("fs"); const path = require("path"); async function* walk(d ...

javascriptnode.js

Adjusting an SVG image element in real-time based on information retrieved from a mySQL database

Seeking to dynamically alter an SVG element based on data retrieved from a MySQL database. Imagine an SVG illustration in Adobe Illustrator featuring a table (rectangle) with 4 chairs (circles) around it. The goal is to represent each chair as a 'pe ...

javascriptphpjquerymysqlsvg

Express.js experiencing difficulty integrating with Share.js

When it comes to Server-Side code, var express = require('express'); //Web Framework var app = express(); var http = require('http').Server(app); //HTTP server module var connect = require('connect'), sharejs = require(&a ...

javascriptnode.jsexpressshare.js

Is there a way to retrieve data from both JSON and a file simultaneously?

I'm trying to use JavaScript fetch API to upload a photo message with text to Discord webhook. How can I upload both my JSON data and file? var discordWebHookBody = new FormData() discordWebHookBody.append("map", map) discordWebHookBody.appe ...

javascriptnode.jsdiscordwebhooks

Resetting a radio button inside a Vue component

I have implemented a Vue component for creating a dropdown select input. Below is the code for the component: export default { name:"dropdown", template:` <div class="select"> <ul> <li><label><inp ...

javascriptvue.js

What is the best way to expand a div in a downward direction exclusively?

My task involves a parent div containing a centered child div. My goal is to have the child div grow downwards only upon clicking it, not in both directions. Initial state of the two divs: https://i.sstatic.net/cWYyV.png Outcome after clicking on div 2: ...

javascripthtmlcss

Title Frame and Interactive Sidebar Content

Hello, I am a newcomer in the world of WordPress website design and I have been struggling with a minor CSS issue on my site (www.dimjaa.org) for the past couple of days. Despite my efforts, I have been unable to find a solution on my own. I am reaching ou ...

csswordpress

I can't seem to get my code to work more than once

My code seems to be working only once. This is the HTML code snippet I am using: <span id="0" class="add-title">add title</span> And here is my JavaScript code: jQuery(document).ready(function($) { var iTitlesArray = []; $(document ...

javascriptjquery

Tips for triggering animations on nested content when the parent slide is animated and enters the viewport without relying on traditional scrolling methods

I would like to implement a JavaScript solution that will animate the content of a nested DIV within a parent slide when the parent slide comes into view. Currently, the content in the nested DIV only animates when a scroll command is triggered after the ...

javascriptjqueryhtmlcssanimation

Is there a way to transform an array of strings into an object?

I am currently working on displaying an array using ng-grid and I am encountering some issues. Here is the link to the code: http://plnkr.co/edit/G33IlPCNAdh1jmNTtVNO?p=preview It seems that ng-grid requires a JSON object instead of an array for the field ...

javascriptarraysangularjsng-grid

Ways to examine a JavaScript Bound Function

Can a JavaScript bound function be inspected somehow? I need to be able to return a bound function from a function, and when unit testing, I'd like to verify the bound function's target, boundThis, and boundArgs. These properties seem to be inte ...

javascript

Presentation for a div's background image with the use of jQuery

My header contains a large div with text contents and boxes, along with a background image. Now I want to create a slideshow for this div's background. Does anyone know how to make a slideshow for a div's background image? I've searched ex ...

javascriptjqueryhtmlbackgroundslideshow

Why am I unable to access a list item's fields in my Bootstrap 4 project using Thymeleaf within the scope ("Neither BindingResult nor plain target object...")?

After creating a modal in my Bootstrap 4 view, I encountered an error. ERROR 328 --- [nio-8080-exec-5] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing ...

javaspring-bootbootstrap-4thymeleaf

Can you explain the functionality of this Angular JS code snippet?

How is it possible that the following code snippet works in Angular JS? var app = angular.module('store',[]); (function(){ app.controller('StoreController',function(){ this.blabla = student; }); })(); var student = ...

javascriptangularjsdebugginghoisting

Issue with custom checkbox styling not responding to label hover and click functionality

I recently found a creative way to design custom styled checkboxes using pure CSS. The only downside is that you have to click on the box (actually, the label) itself to check it. If you're familiar with placing the input inside the label, then you kn ...

javascriptjqueryhtmlcss

jQuery enables the updating of field values while maintaining the cursor's position within the text

Currently, I am in the process of developing a jQuery plugin for a custom application of mine. One of the functionalities that I am working on involves slugifying a specific field. Below is the code snippet that I have implemented for this purpose: $site ...

javascriptjquery

How can you determine if an ASP (classic) session has expired in IIS 7.5 without having to refresh the session?

I am currently working on an ASP classic application that is running on IIS 7.5. My goal is to display a popup overlay on the user's window if their session has timed out without any interaction with the machine. For example, if the user walks away an ...

javascriptajaxsessionasp-classiciis-7.5

Creating a seamless REST API using Node.js and the Tedious library: A comprehensive guide

I am facing an issue with retrieving SQL data in my Express API. The page is continuously loading and showing a blank screen, however I can see the SQL data response in the console. Here is my index.js code : var Connection = require("tedious"). ...

javascriptnode.jsexpressnpm

Revalidation of paths in NextJS 13 is functioning properly for newly created comments, however, it is not working as

I'm encountering an issue with the implementation of revalidatePath() in my CommentForm and PostForm components. Despite both components having a similar structure and functionality, only the CommentForm component is able to utilize revalidatePath() c ...

javascriptreactjsnext.js

Discover the world of Google Chrome Apps with the power of chrome.storage.local

While building an application, I encountered a perplexing issue that I need help with: The task involves reading a JSON file and storing its content in localStorage using chrome.storage.local in a Chrome app. Here is a snippet from the JSON file: { "s ...

javascriptjsongoogle-chrome-app