Aligning a large checkbox to the left in Bootstrap 4 styling

Bootstrap 4.

<div class="form-group">
    <label asp-for="Enabled" class="control-label"></label>
    <input asp-for="Enabled" class="form-control" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
</div>

I have designed a form where I want the checkbox to be positioned under the label "Enabled" instead of being centered like other full-width controls. You can view the form image here.

When I set the checkbox width to "auto," it aligns properly but displays a smaller checkbox, which is not the desired effect. You can see the difference in size in this image.

So my question is, how can I achieve a large, left-aligned checkbox on my form?

cssbootstrap-4

Answer №1

After conducting a thorough search for a solution to the same issue, I was unsatisfied with the responses I found. Therefore, I took it upon myself to conduct further research and eventually discovered a suitable solution. By simply adding the class "col-sm-1" to the input tag, the problem was resolved.

<div class="col-8">
   <input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
   <span asp-validation-for="IsUrgent" class="text-danger" />
</div>

Answer №2

If you are not happy with the class name, you can use this alternative method

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none; /* if you want check inside box then remove this line*/
  appearance: none; /* if you want check inside box then remove this line*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <label asp-for="Enabled" class="control-label">Enabled</label>
    <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
  </div>
</form>

Answer №3

One way to improve the appearance is to specify a height and width for the checkbox. 

.checkbox-large {
  width: 25px !important;
  height: 25px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <label asp-for="Enabled" class="control-label">Enabled</label>
    <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
  </div>
</form>

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

The menu shifts position or overlaps next to the current active menu option

It would be helpful to take a look at the URL provided (http://ymm.valse.com.my/) in order to understand my question better. Upon clicking on any menu item, I noticed that the menu next to the active tab overlaps. I believe the issue lies in the width pro ...

jqueryhtmlcss

Tips for enhancing your HTML email template with borders:

I designed an email template using the email template editor and incorporated nested table tags for each mail element. As I created a table to contain all these elements and attempted to add borders to the tags, I encountered a space between the top and bo ...

htmlcsshtml-tablehtml-emailemail-templates

Switching background images on click with a smooth transition

I'm in the process of creating a website and I want to be able to change background images with ease when clicked, like using fade in or fade out effects. The onclick functionality is already implemented with jQuery, but I'm having trouble incor ...

jqueryhtmlcssfadeineasing

What exactly is the role of the @altfontfamily variable in Bootstrap?

Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...

cssvariablestwitter-bootstrap

Ensure that only one menu with a specific class is open at any given time

My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achi ...

javascriptjqueryhtmlcss

Disable list-group-item-action clicking

I'm looking to maintain the list-group-item-action hover effect that changes the background color while eliminating the click effect that activates it. Is there a way to achieve this? I've already removed the href="#" from the If I remove list-g ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Bizarrely rapid transitions from standard to hovering appearance in CSS

After creating a custom styled button with a hover effect, I noticed an issue where if you happen to hover over a specific spot on the button, it quickly switches between its normal and hover states. https://i.sstatic.net/uPq1F.gif This is my code: but ...

htmlcss

Navigational strip within the grid

My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...

cssag-grid

Adding static files to your HTML page with node.js

This is not a question about using express.static() In my application, I have multiple pages that share the same JS and CSS dependencies. Instead of adding <script> or <link> tags to every single page, I'm looking for a way to include the ...

javascriptphphtmlcssnode.js

How to align content in the center horizontally and vertically using HTML and CSS

I'm having trouble centering my content both vertically and horizontally on the page. Can anyone provide assistance? Thank you. <style type = "text/css"> #loginMenu { border:5px solid green; padding:10px 10px 10px 10px; background-color:#FF9; ...

htmlcssformat

What is the best way to align a div of variable size in a container of variable size using CSS?

My website features a 3-level structure that consists of a "workingArea" and an "imageContainer" within it, containing an image. <div class="workingArea"> <div class="imageContainer"> <img class="theImage" /> </div> </div> ...

cssweb-applicationscentering

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

javascriptcssfeature-detection

The Slide Out Menu functioned properly in HTML, but it seems to be malfunctioning when implemented in PHP

I recently implemented a slide-in and out menu with a hamburger icon to open it and an X icon to close it. The functionality was perfect until I integrated it into PHP and WordPress. Initially, I placed the script in the header section before the meta tags ...

javascriptphphtmlcsswordpress

Adjust the size of a div by clicking a button using Javascript

<script type="text/javascript"> var btn = document.getElementById("btn"); var panel = document.getElementById("panel"); var btn2 = document.getElementById("btn2"); function expandPanel() { btn.style.display="none"; panel.style="overflow:hidd ...

javascriptphphtmlcss

Image floating gracefully in the top corner of the screen

Check out this Picture I am trying to create a floating image similar to the one in the top left corner of the navigation bar. After searching for some code to achieve this, I came across the following: <html> <head></head> <bod ...

htmlcss

Grayscale to color image slider using JQuery, HTML, and CSS

Seeking assistance from the talented individuals here. Currently in the process of constructing a website for a client, and one of the key components on the index page is an image slider/fader that showcases a series of images. The client has requested a u ...

htmljquery-uicss

Levitating with Cascading Style Sheets

Looking for some assistance to troubleshoot my code. I am trying to make the hover color apply only to the navigation bar and not affect the pictures. I attempted to solve this by specifying .a.main-nav:hover { ...}, but it ended up removing the hover effe ...

htmlcsshover

Utilizing conditionals for CSS minification with C# Regular Expressions

Hi there, I'm currently developing an application using C# in Visual Studio that focuses on minifying CSS code. Recently, I encountered a specific piece of code that removes all prefixes for the # ID selector. strCSS = Regex.Replace(strCSS, @"[a-zA-Z ...

c#.netcssregex

Can we leverage Angular service styles in scss?

I am working on a change-color.service.ts file that contains the following code snippet: public defaultStyles = { firstDesignBackgroundColor: '#a31329', firstDesignFontColor: '#ffffff', secondDesignBackgroundColor: '#d1 ...

cssangulartypescriptsass