Here’s a comprehensive guide on how to create 15+ Bootstrap Toggle Switch With Text. This tutorial will provide you with the necessary steps and code snippets to implement various toggle switch designs using Bootstrap’s styling and interactive features. Let’s get started!
Step 1: Include Header Assets
Before you begin, it’s essential to include the necessary CSS files in the section of your HTML document. These files provide the basic styling and functionality required for Bootstrap components.
<link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600,700'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
Step 2: Construct the HTML Structure
Now, let’s build the HTML structure for our Bootstrap toggle switches. This structure includes a jumbotron for the title and description, followed by containers and rows for organizing the toggle switches in different sizes and styles.
<div class="jumbotron">
<h1>On/Off Switch</h1>
<p class="lead">Bootstrap Button Toggle</p>
</div>
<div class="container example">
<div class="row">
<div class="col-sm-12">
<h3>Default Color <small>(Brand Primary)</small></h3>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Large</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-lg btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Default</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Small</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-sm btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-sm btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Mini</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-xs btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-xs btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
</div>
<!-- Secondary Color -->
<div class="container example">
<div class="row">
<div class="col-sm-12">
<h3>Secondary Color <small>(Brand Secondary)</small></h3>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Large</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-lg btn-secondary btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-lg btn-secondary btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Default</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-secondary btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-secondary btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Small</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-sm btn-secondary btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-sm btn-secondary btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h6>Mini</h6>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-xs btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
<div class="handle"></div>
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-xs btn-secondary btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="off">
<div class="handle"></div>
</button>
</div>
</div>
</div><!-- /.container -->
Step 3: Add the CSS Styling
To enhance the appearance and functionality of the toggle switches, we’ll use CSS to customize the styling, layout, and transitions. Here’s the CSS code that defines the visual aspects of the toggle switches.
body {
font-family: 'Montserrat', 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;
color: #6b7381;
background: #f2f2f2;
}
.jumbotron {
background: #6b7381;
color: #bdc1c8;
}
.jumbotron h1 {
color: #fff;
}
.example {
margin: 4rem auto;
}
.example > .row {
margin-top: 2rem;
height: 5rem;
vertical-align: middle;
text-align: center;
border: 1px solid rgba(189, 193, 200, 0.5);
}
.example > .row:first-of-type {
border: none;
height: auto;
text-align: left;
}
.example h3 {
font-weight: 400;
}
.example h3 > small {
font-weight: 200;
font-size: 0.75em;
color: #939aa5;
}
.example h6 {
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 3.32px;
text-transform: uppercase;
color: #bdc1c8;
margin: 0;
line-height: 5rem;
}
.example .btn-toggle {
top: 50%;
transform: translateY(-50%);
}
.btn-toggle {
margin: 0 4rem;
padding: 0;
position: relative;
border: none;
height: 1.5rem;
width: 3rem;
border-radius: 1.5rem;
color: #6b7381;
background: #bdc1c8;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
line-height: 1.5rem;
width: 4rem;
text-align: center;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
bottom: 0;
transition: opacity 0.25s;
}
.btn-toggle:before {
content: 'Off';
left: -4rem;
}
.btn-toggle:after {
content: 'On';
right: -4rem;
opacity: 0.5;
}
.btn-toggle > .handle {
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
border-radius: 1.125rem;
background: #fff;
transition: left 0.25s;
}
.btn-toggle.active {
transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
left: 1.6875rem;
transition: left 0.25s;
}
.btn-toggle.active:before {
opacity: 0.5;
}
.btn-toggle.active:after {
opacity: 1;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
line-height: -0.5rem;
color: #fff;
letter-spacing: 0.75px;
left: 0.4125rem;
width: 2.325rem;
}
.btn-toggle.btn-sm:before {
text-align: right;
}
.btn-toggle.btn-sm:after {
text-align: left;
opacity: 0;
}
.btn-toggle.btn-sm.active:before {
opacity: 0;
}
.btn-toggle.btn-sm.active:after {
opacity: 1;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
display: none;
}
.btn-toggle:before,
.btn-toggle:after {
color: #6b7381;
}
.btn-toggle.active {
background-color: #29b5a8;
}
.btn-toggle.btn-lg {
margin: 0 5rem;
padding: 0;
position: relative;
border: none;
height: 2.5rem;
width: 5rem;
border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
line-height: 2.5rem;
width: 5rem;
text-align: center;
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
bottom: 0;
transition: opacity 0.25s;
}
.btn-toggle.btn-lg:before {
content: 'Off';
left: -5rem;
}
.btn-toggle.btn-lg:after {
content: 'On';
right: -5rem;
opacity: 0.5;
}
.btn-toggle.btn-lg > .handle {
position: absolute;
top: 0.3125rem;
left: 0.3125rem;
width: 1.875rem;
height: 1.875rem;
border-radius: 1.875rem;
background: #fff;
transition: left 0.25s;
}
.btn-toggle.btn-lg.active {
transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
left: 2.8125rem;
transition: left 0.25s;
}
.btn-toggle.btn-lg.active:before {
opacity: 0.5;
}
.btn-toggle.btn-lg.active:after {
opacity: 1;
}
.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
line-height: 0.5rem;
color: #fff;
letter-spacing: 0.75px;
left: 0.6875rem;
width: 3.875rem;
}
.btn-toggle.btn-lg.btn-sm:before {
text-align: right;
}
.btn-toggle.btn-lg.btn-sm:after {
text-align: left;
opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:before {
opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:after {
opacity: 1;
}
.btn-toggle.btn-lg.btn-xs:before,
.btn-toggle.btn-lg.btn-xs:after {
display: none;
}
.btn-toggle.btn-sm {
margin: 0 0.5rem;
padding: 0;
position: relative;
border: none;
height: 1.5rem;
width: 3rem;
border-radius: 1.5rem;
}
.btn-toggle.btn-sm:focus,
.btn-toggle.btn-sm.focus,
.btn-toggle.btn-sm:focus.active,
.btn-toggle.btn-sm.focus.active {
outline: none;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
line-height: 1.5rem;
width: 0.5rem;
text-align: center;
font-weight: 600;
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
bottom: 0;
transition: opacity 0.25s;
}
.btn-toggle.btn-sm:before {
content: 'Off';
left: -0.5rem;
}
.btn-toggle.btn-sm:after {
content: 'On';
right: -0.5rem;
opacity: 0.5;
}
.btn-toggle.btn-sm > .handle {
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
border-radius: 1.125rem;
background: #fff;
transition: left 0.25s;
}
.btn-toggle.btn-sm.active {
transition: background-color 0.25s;
}
.btn-toggle.btn-sm.active > .handle {
left: 1.6875rem;
transition: left 0.25s;
}
.btn-toggle.btn-sm.active:before {
opacity: 0.5;
}
.btn-toggle.btn-sm.active:after {
opacity: 1;
}
.btn-toggle.btn-sm.btn-sm:before,
.btn-toggle.btn-sm.btn-sm:after {
line-height: -0.5rem;
color: #fff;
letter-spacing: 0.75px;
left: 0.4125rem;
width: 2.325rem;
}
.btn-toggle.btn-sm.btn-sm:before {
text-align: right;
}
.btn-toggle.btn-sm.btn-sm:after {
text-align: left;
opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:before {
opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:after {
opacity: 1;
}
.btn-toggle.btn-sm.btn-xs:before,
.btn-toggle.btn-sm.btn-xs:after {
display: none;
}
.btn-toggle.btn-xs {
margin: 0 0;
padding: 0;
position: relative;
border: none;
height: 1rem;
width: 2rem;
border-radius: 1rem;
}
.btn-toggle.btn-xs:focus,
.btn-toggle.btn-xs.focus,
.btn-toggle.btn-xs:focus.active,
.btn-toggle.btn-xs.focus.active {
outline: none;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
line-height: 1rem;
width: 0;
text-align: center;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
bottom: 0;
transition: opacity 0.25s;
}
.btn-toggle.btn-xs:before {
content: 'Off';
left: 0;
}
.btn-toggle.btn-xs:after {
content: 'On';
right: 0;
opacity: 0.5;
}
.btn-toggle.btn-xs > .handle {
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 0.75rem;
background: #fff;
transition: left 0.25s;
}
.btn-toggle.btn-xs.active {
transition: background-color 0.25s;
}
.btn-toggle.btn-xs.active > .handle {
left: 1.125rem;
transition: left 0.25s;
}
.btn-toggle.btn-xs.active:before {
opacity: 0.5;
}
.btn-toggle.btn-xs.active:after {
opacity: 1;
}
.btn-toggle.btn-xs.btn-sm:before,
.btn-toggle.btn-xs.btn-sm:after {
line-height: -1rem;
color: #fff;
letter-spacing: 0.75px;
left: 0.275rem;
width: 1.55rem;
}
.btn-toggle.btn-xs.btn-sm:before {
text-align: right;
}
.btn-toggle.btn-xs.btn-sm:after {
text-align: left;
opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:before {
opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:after {
opacity: 1;
}
.btn-toggle.btn-xs.btn-xs:before,
.btn-toggle.btn-xs.btn-xs:after {
display: none;
}
.btn-toggle.btn-secondary {
color: #6b7381;
background: #bdc1c8;
}
.btn-toggle.btn-secondary:before,
.btn-toggle.btn-secondary:after {
color: #6b7381;
}
.btn-toggle.btn-secondary.active {
background-color: #ff8300;
}
With these steps, you should now have a functional and visually appealing set of Bootstrap toggle switches with text labels. Feel free to experiment with different color schemes, sizes, and text variations to suit your specific design requirements. In conclusion, you’ve successfully learned how to create 15+ Bootstrap Toggle Switch With Text, giving your projects an interactive and polished touch.
