How can I make the Bootstrap 4 checkbox/switch control smaller using the -sm class?

When using BS4, it is possible to add a custom switch/checkbox to a form. However, the small (-sm) modification does not seem to work. I have included a code sample and an image for reference.

https://i.sstatic.net/8bhKz.png

My goal is to make the switch as small in height as the input field itself. I have not been able to find a "custom-control-sm" class or anything similar, and using form-control-sm does not produce the desired result.

<div class="input-group input-group-sm">
 <span class="input-group-prepend">
  <span class="input-group-text">
   <i class="fa fa-table"></i>
  </span>
 </span>
 <span class="input-group-prepend">
  <span class="input-group-text">
   <span class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input form-control-sm" aria-autocomplete="none" autocomplete="off" id="DefineAttributes" name="DefineAttributes" title="Define the attributes" value="true">
    <label class="custom-control-label form-control-sm" for="DefineAttributes"></label>
   </span>
  </span>
 </span>
 <input type="text" class="form-control" aria-autocomplete="none" autocomplete="off" id="Attributes" name="Attributes" placeholder="Attributes ..." value="something">
 <span class="input-group-append">
  <a class="btn btn-sm btn-outline-primary " title="Select attributes" href="#">Select</a>
 </span>
</div>
cssformsbootstrap-4

Answer №1

Here are the necessary adjustments that needed to be made:

  1. Include p-0 in the 
    <span class="input-group-text">
    tag (specifically for the checkbox).
  2. Add "style=height: 0;" to the 
    <input type="checkbox" ...
    & 
    <label class="custom-control-label ...
    to eliminate any height of the invisible element.
  3. Fine-tune the position of the resulting slider by adjusting custom margins on the 
    <span class="custom-control custom-switch">
    , such as: 
    "style="margin-left: 24px; margin-right: -12px;"

By making these changes, the slider should appear correctly in the sm size.

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

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

csshtml

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

Place the border image underneath the div element

I successfully added a border image to the right side of my div, but now I want it to extend slightly below the div. Is there a way to increase the height of the border image? Or should I just float the image next to the div and how would I go about doing ...

htmlcssborder

Tips for creating a div that slides from the right side to the left side

I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px. Here is the HTML code: <a id="loginPanel"&g ...

javascriptjquerycss

The menu will expand to full width, with each list item evenly sharing the width to achieve full coverage

I am currently facing an issue with my horizontal menu on my website. I want the menu to stretch across the full width of the site, but I can't seem to get it right. Here is the code for my menu: <nav> <ul id="menu" class="menu"> &l ...

htmllistcssresponsive-design

If the text is too wide for the parent div width, wrap it in a child div

<div class='jfmfs-friend' id='123'> <input type='checkbox'/> <img src='id.jpg'/> <div class='friend-name'>Himanshu Yadav</div> </div> I am looking to modify the st ...

htmlcss

How to Keep Images Within Table Borders From Overlapping?

I am in the process of experimenting with creating a newsletter and have developed a template. I am very new to design and have created a table of album releases that is not fitting within the border I established. How can I resolve this issue? The code s ...

htmlcssresponsive-design

Elements with fixed positions in CSS overlapping one another

Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images: <a href="#" class="button" id="home"><im ...

css

How can triple nested quotes be utilized within Django templates?

Currently, I am attempting to utilize inline CSS and load an image as a background in a Django template. My goal is to include three quotes, however, I am unsure of the correct way to achieve this. Can anyone provide guidance on how to properly modify the ...

htmlcssdjangodjango-templates

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

javascriptphphtmlcssbackground-color

The content at the center of the page is shifting to the right side when the browser is resized

I am currently working on creating a random quote generator at the following link: http://codepen.io/Kestvir/pen/peqjZZ. During the html/css aspect of the project, I have run into an issue with the content inside a transparent background. Whenever I resi ...

htmlcsstwitter-bootstrap

Tips on quickly validating a form using JavaScript

I've set up a form with 3 text inputs and a validation function that triggers on submit. Here's a snippet of the code: <form action="" method="post" onSubmit="return checkForm(this.form)"> and checkForm(): var pattern_name = /^([a-zA-Z ...

javascriptjqueryhtmlforms

Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advanc ...

htmlcss

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

Utilize CSS exclusively on the "Theme Options" page within a Wordpress website

Everything is running smoothly with my current PHP code, which controls the design of my "Theme Options" page under the WP API Appearance menu. However... The issue is that the CSS stylesheet is affecting all other menus in the WP dashboard as well, like ...

phphtmlcsswordpresswordpress-theming

Creating a full width and height slider with a header menu that is responsive to all device screen sizes

Looking to create a full-width slider with a header that adjusts for all screen sizes, especially larger devices. I've been searching online but haven't found a satisfactory solution yet. If anyone has any ideas or tips on how to achieve this, pl ...

jqueryhtmlcssslider

Django authentication ensures secure access for users on

What could be causing the issue with self.request.user.is_authenticated() not functioning correctly in this specific view? class ArticleDetailView(DetailView, CategoryListMixin): model = Article template_name = 'mainapp/article_detail.html&ap ...

pythonhtmlcssdjango

Enhance your table layout with Bootstrap 3 by adjusting textarea size to fill

I am currently in the process of developing a forum and bulletin board software. I am facing some challenges while trying to integrate a reply section into the thread page. You can view what I have implemented so far here. Html: <div class="panel pane ...

jqueryhtmlcsstwitter-bootstrap

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Adequate dynamic object arrangement

In my pursuit using JavaScript, I am striving to fit a group of objects of set sizes into a container with a specified horizontal width, all while preserving their approximate initial order. While whitespace is not a major concern, the goal is to keep it t ...

javascriptcsspackingtetris