Align items vertically within Bootstrap columns

Looking for a quick solution. Refer to the image below, where I am struggling to align the toggle switch horizontally alongside the bootstrap buttons. My suspicion is that it may be related to the CSS of this customized toggle switch. Despite trying various methods within the code on the razor page, nothing seems to work. Thanks.

Razor Page Code:

 <div class="container" style="margin-top: 2em">
<div class="row align-items-center">
    <div class="col-sm">
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
    </div>
    <div class="col-sm">
        <button type="button" class="btn btn-secondary">
            Button
            <i class="fas fa-play"></i>
        </button>
    </div>
    <div class="col-sm">
        <button type="button" class="btn btn-secondary">
            Button
            <i class="fas fa-play"></i>
        </button>
    </div>
</div>

Custom CSS for Toggle Switch

.onoffswitch {
position: relative;
width: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}

.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 20px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
    }

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 5px;
    background-color: #383B40;
    color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 5px;
    background-color: #383B40;
    color: #999999;
    text-align: right;
}

.onoffswitch-switch {
display: block;
width: 30px;
margin: 0px;
background: #FF0000;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #00FF00;
}

Answer №1

Enhance your toggle functionality by incorporating these two classes from the latest version of bootstrap 4

class="d-flex align-items-center"

To learn more about these classes, visit the official documentation

Next, update your .onoffswitch-label code snippet from

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}

to

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
margin: 0;
}

Answer №2

If you're looking to achieve this effect, consider using a CSS hack like the one shown below:

HTML:
<div id="wrapper">
  <div id="content">Your content here</div>
</div>

CSS:
#wrapper {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
}

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

OO Design for CSS Style Elements

I'm curious about the most effective way to implement objective-oriented CSS for quick and clean reuse of components. Scenario 1: HTML: <button class="button button-submit">Submit</button> CSS: .button { /* basic styles */ } .button ...

Basic Tallying Code in JavaScript

Hi, I am currently working on creating a basic counter using HTML / CSS and Javascript. Unfortunately, my Javascript code is not functioning correctly, even after trying various solutions found online. I attempted to include "async" but it appears that my ...

Angular components are not inheriting the Bootstrap row class as expected

Within my codebase, there are numerous controls declared in the following manner. <div class="row"> <div class="col-sm-12"> <div>Caption</div> <input type="text" class="form-control"> </div> </div> In ...

Ways to categorize items using JQuery based on their hierarchical structure

I am looking to organize the following HTML content: <h2>State the Issue  </h2> <h3>Provide information about your objective</h3> <h3>Share any error messages received</h3> <h2>Outline Your Attempts  ...

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

I am encountering an issue with a Bootstrap 5 table that has the class table-striped. When a user clicks on a row, I have implemented some jQuery code to toggle the class text-success on the row for highlighting/unhighlighting purposes. The highlighting f ...

Winning opportunities created by using credits in the slot machine

**Greetings, I have created a slot machine using JavaScript, but I am looking to enhance the player's chances based on their credits. Can anyone guide me on how to achieve this? Essentially, I want the player's odds to increase proportionally wit ...

Having difficulty comprehending the syntax of Linear Gradients

Seeking assistance on understanding how background images and linear gradients function together. Currently, I am only seeing a solid color instead of the intended image. Can someone please explain how this code is supposed to work? background-image:lin ...

Enhancing CSS with Additional Properties

As a web developer, I recently had the opportunity to explore the new LOGIN PAGE preview of GMAIL and was very impressed with the Sign In button's UI. After examining the Page's CSS, I discovered some interesting properties, such as: **backgroun ...

Tips for switching the background image in React while a page is loading?

Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

What advantages do constant variables offer when selecting DOM elements?

What is the significance of declaring variables as constant when selecting elements from the DOM? Many developers and tutorials often use const form = document.querySelector('form'); ...

Learn the technique of coding HTML within inline JavaScript, along with implementing CSS inline styling

I'm looking for a way to incorporate HTML within inline JavaScript, along with CSS inline styles. Can someone provide guidance on how to achieve this? For example, something like the following code snippet: <p><span style="color: #00ff00;"&g ...

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

Is the latest version of three.js not compatible with Blender models?

In the past, I would export blender models to use them with three.js, starting from version r47. However, after updating to the latest release, r49, it seems that the same code that used to display the model in the browser no longer works. Should I rever ...

How can I open a PDF file on the frontend using the Django framework?

I am attempting to extract content from a PDF file using the Django framework. Here is what I have tried so far: def upload(request): try: if request.method == 'POST': if request.FILES['document'].name.split ...

Detecting a click on the background div in Angular without capturing clicks on child divs

Over at ollynural.github.io, I've been working on creating a pop-up div in the portfolio page that provides additional information about the project you select. To close the pop-up, I have implemented an ng-click feature so that clicking on the main p ...

Bootstrap encountered an issue with altering header information

I've been trying to set up a notification system that plays a sound every time someone makes a new post. I'm working with Bootstrap 4 and I've tried inserting JavaScript into the functions page, but no matter how many times I call the ' ...

displaying li tag depending on the index value within angularjs

I have an HTML structure similar to the following: <div class="main"> <ul> <li ng-repeat='save in saves'> <h3>{{save.name}}</h3> <div > <ul> ...

Error: Unable to retrieve current location using 'Geolocation' in React

import "./App.css"; import { useState, useEffect } from "react"; function App() { const [lat, setLat] = useState(null); const [long, setLong] = useState(null); const [data, setData] = useState(null); const [error, setError] = u ...