I have bootstrap 4.5 installed in a laravel environment and have included the bootstrap toggle css/js at the top of my page. My buttons work, but look like this out of the box:
in the active state and like this:
in the inactive state.
This is the closest I've been able to come:
but it looks clearly broken without the left side border working.
To get that I added this to my style:
.toggle-handle {
background-color: white;
border: #ccc 1px solid;
}
.toggle-off {
background-color: #e6e6e6;
border: #adadad 1px solid;
}
I've been tinkering with the css trying to get it to look like the demo for more than an hour now and based on previous experience with trying to fix up css/bootstrap issues, it's going to take a lot longer than that for me to figure it out. css is not my forte.
Does anyone know how I can resolve this issue and get it looking like it should? My generated app.css is 14k lines long so I can't easily share that, but the bootstrap section is headed by this:
/**
I have bootstrap 4.5 installed in a laravel environment and have included the bootstrap toggle css/js at the top of my page. My buttons work, but look like this out of the box:
in the active state and like this:
in the inactive state.
This is the closest I've been able to come:
but it looks clearly broken without the left side border working.
To get that I added this to my style: .toggle-handle { background-color: white; border: #ccc 1px solid; } .toggle-off { background-color: #e6e6e6; border: #adadad 1px solid; }
I've been tinkering with the css trying to get it to look like the demo for more than an hour now and based on previous experience with trying to fix up css/bootstrap issues, it's going to take a lot longer than that for me to figure it out. css is not my forte.
Does anyone know how I can resolve this issue and get it looking like it should? My generated app.css is 14k lines long so I can't easily share that, but the bootstrap section is headed by this: /**
*/
Any help or guidance would be appreciated, thank you!