What is causing the bootstrap switch to not align horizontally with the other elements within the div?

Here is the code snippet that I am working with:

.global-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.header {
  width: 1024px;
  background-color: purple;
  padding: 7px;
  margin: 0;
}

div {
  overflow: hidden;
  white-space: nowrap;
}

.contents svg {
  height: 25px;
  width: 25px;
  vertical-align: middle;
}

.contents .title {
  color: white;
  margin: 0;
  font-size: 16px;
  vertical-align: middle;
  margin-left: 15px;
}

.contents .switch {
  align-content: right;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="global-wrap">
  <div class="header">
    <div class="contents">
      <div class="form-inline">
        <div class="form-group">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                    </svg>
          <span class="title">Title</span>
          <span class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                        <label class="form-check-label" for="flexSwitchCheckDefault">Text</label>
                    </span>
        </div>
      </div>
    </div>
  </div>
</div>

I'm facing an issue where the bootstrap switch doesn't align properly with the hamburger icon and the title text. What could be causing this alignment problem and how can I ensure that the switch appears on the same line, aligned to the right?

htmlcssbootstrap-5

Answer №1

When utilizing the .form-check class, it is set to display as a block by default, causing it to move to its own line in regular flow.

To achieve an inline form check layout, simply incorporate the .form-check-inline class alongside the .form-check class.

For more information, visit https://getbootstrap.com/docs/5.0/forms/checks-radios/#inline

<span class="form-check form-check-inline ...">
  ...
</span>

Answer №2

To properly align the switch to the right, you must include the d-inline-flex class within the form-check class. Additionally, add the position-absolute class to the form-check class and the position-relative class to its parent element. Lastly, insert the following CSS code:

.form-check.form-switch {
  right: 0px;
}

Refer to the code snippet below for a visual representation:

.global-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.header {
  width: 1024px;
  background-color: purple;
  padding: 7px;
  margin: 0;
}

div {
  overflow: hidden;
  white-space: nowrap;
}

.contents svg {
  height: 25px;
  width: 25px;
  vertical-align: middle;
}

.contents .title {
  color: white;
  margin: 0;
  font-size: 16px;
  vertical-align: middle;
  margin-left: 15px;
}

.contents .switch {
  align-content: right;
}

.form-check.form-switch {
  right: 0px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b455b47">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="global-wrap">
  <div class="header">
    <div class="contents">
      <div class="form-inline">
        <div class="form-group d-flex align-items-center position-relative">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                    </svg>
          <span class="title">Title</span>
          <span class="form-check form-switch d-inline-flex position-absolute">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                        <label class="form-check-label" for="flexSwitchCheckDefault">Text</label>
                    </span>
        </div>
      </div>
    </div>
  </div>
</div>

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

Hide CSS3 webkit-scrollbar automatically when it's not in use

I need help with customizing scrollbars. How can I hide the scrollbar when it is not needed due to short content? Below is the code snippet I have been working on: .myscroll::-webkit-scrollbar { width: 15px; } .myscroll::-webkit-scrollbar-track ...

csswebkit

Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start. The content of the CSS file is: body { background:#00FF00; } In addition, here is my configurat ...

htmlcssgoogle-app-engine

When it comes to Shopify Schema, the section settings are functional within the <style> tag, whereas the block settings do not seem to have the same

While working on updating a section with multiple blocks, I encountered an unusual issue. My goal was to incorporate a new block into an existing section. The schema has been set up correctly, and everything is functioning as anticipated. However, the prob ...

cssshopifyschemablocksections

Tips for positioning the calendar icon inside the input field using Angular Material

Just beginning my journey with Angular Material and currently focusing on building a datepicker. I am looking to reposition the icon from outside of the input field to inside. After trying out various Material themes, none seem to have this specific style. ...

htmlcssangulardatepickerangular-material

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

Load and execute a dynamically created script in JavaScript at the same time

I am exploring the option to load and evaluate a script from a third-party synchronously. Here is an example that currently works well: <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfe ...

javascripthtml

Reorganize containers without relying on bootstrap styling

Is there a method to rearrange the order of two divs without using the bootstrap library? <div class='parent'> <div class='child-1'>Abc..</div> <div class='child-2'>Xyz..</div> </div> I ...

jqueryhtmlcssflexbox

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

Interactive Audio Progress Bar in HTML5

Hello, I am trying to create a simple HTML 5 player with controls for play and pause. However, I am having trouble implementing a progress bar that interacts with the music time. I found an example of an interactive progress bar here: http://jsfiddle.net/ ...

jqueryhtmlaudio

Personalizing Web Push Alerts (Google Chrome)

I successfully implemented a web push notification for Google Chrome using Google Project and Service Worker. One thing I'm curious about is how to customize or style the push notification. The plain message box doesn't quite cut it for me – I ...

javascripthtmlcssgoogle-chromepush-notification

The simple method of adjusting text opacity using CSS hover doesn't function as expected

I attempted to create divs in which hovering over one side would cause the opposite text to disappear. The functionality works flawlessly when hovering over the left text, as the right text disappears as intended. However, it is not working in the reverse ...

htmlcsstexthoveropacity

The mouseenter event in jQuery is failing to trigger

I'm encountering an issue with the mouseenter event on a div section of my webpage. I am attempting to alter the background color of this div when the mouse enters, but it seems to be disregarded. This is the basic HTML code: <div id="services" c ...

javascriptjquerycsshtml

The LESS file could not be located. Attempted to find -

My directory structure is as follows: C:. └───static ├───custom_stuff │ presets.css │ presets.less │ └───index index.less However, I'm encountering an issue where index.less c ...

cssless

Getting an 'undefined function' error while calling PHP in two separate includes?

My website template consists of four PHP files: - functions.php (contains main functions for the website) - index.php (main template file to bring other documents together) - header.php (website header) - footer.php (website footer - this is where ...

phphtml

Parsing text files with Highcharts

As a beginner in JavaScript and HighCharts, I am facing a simple problem that has me completely lost. My goal is to generate a scatter chart with three lines by reading data from a text file formatted like this: x y1 y2 y3 1.02 1.00 6.70 ...

javascriptjqueryhtmlajaxhighcharts

HTML videos with Automatic Looping and Autoplay Features

I have attempted to change the settings to true and adjust the order in the hopes that it would resolve the issue. Unfortunately, the videos are still not autoplaying and looping. Although I believe the videos are muted, I have also explicitly muted them ...

htmlloopsvideoautoplay

Tips for customizing text field appearance in Safari and Chrome

I haven't had a chance to test it on IE yet. My goal is to create a unique style for the background image and text box shape, along with borders, for the search bar on my website, [dead site]. If you check it out on Firefox or Opera and see the sear ...

htmlcssformsbrowsercross-browser

Utilizing grid for styling headings and paragraphs with h3, h4, and p tags

Looking for help with aligning posts in columns? Here's the code and display challenge: <div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Repr ...

css

Position the colored div on the left side of the page

Here is the CSS I am currently using... <style type="text/css"> .widediv{width:1366px;margin-left:auto;margin-right:auto} </style> This CSS code helps me create my webpage : <body><div class="widedivv"> <!-- Content go ...

javascripthtmlcss

What about CSS block elements that have a width relative to their parent container

My goal is to create a layout where each h3 and p element is wrapped in a box. The current issue I'm facing is that the blocks extend to full width due to h3 and p being block level elements. The desired outcome is for the width of the boxes to adjus ...

cssblock