How can I adjust the height and width of a checkbox input specifically for mobile screens?

Check out this code snippet:

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col-10">
      Hello
      <br>
      Hello
    </div>
    <div class="col-2">
        <input type="checkbox" class="w-100 h-100">
    </div>

  </div>
</div>

JS fiddle

Here is how the checkbox appears on desktop screens: https://i.sstatic.net/zndhj.png

And this is the checkbox on mobile screens: https://i.sstatic.net/xpDQk.png

I'm puzzled by the change in checkbox size on desktop screens. Shouldn't it remain consistent with the sizing I specified using h-100 and w-100 for both mobile and desktop views?

cssbootstrap-4

Answer №1

Utilizing the class = 'w-100 h-100' will enforce the element to occupy 100% of the width and height. If this is not necessary, consider specifying the width and height directly instead of relying on these predefined classes.

Below are the definitions of these classes:

.h-100 {
    height: 100%!important;
}
.w-100 {
    width: 100%!important;
}

Answer №2

We are encountering a couple of issues.

The checkbox is contained within a col-2 element that is becoming narrower in width. The properties height:100% and width:100% are both dependent on the size of the parent container (col-2). Additionally, height:100% will only function properly if the parent container has a specified height, as detailed here and in various other responses.

Furthermore, the col-2 includes padding that is affecting the dimensions of the input element.

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

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

csswebpackcss-loader

display complete map using full height in a bootstrap 4 row

Struggling to get the map in this column to fill the entire height within a Bootstrap4 column. After attempting to add h-100 to the row, scroll bars appeared at the bottom of the map and the bottom 10% of the page went missing. https://i.sstatic.net/epfx ...

htmlcssbootstrap-4

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

jqueryhtmlcssknockout.js

Alignment of Material within Two Adjacent Divisions

I'm having trouble centering the content within two side-by-side divs. It seems like the content in each of these divs is centering towards one another, which is not what I want. I've created a main container and placed two divs inside it. The ...

htmlcss

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

htmlcss

The 'Required' attribute in HTML is malfunctioning

The 'required' attribute is not functioning properly when I try to submit the form. I've searched online for a solution, but none of them have resolved my problem. Take a look at the code snippet below - I've used the required attribute ...

javascripthtmljquerybootstrap-4

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

I'm new to JavaScript and I want to create a rock, paper, scissors game from scratch. My Game Plan: Once the user clicks on an option (rock, paper, scissors), the game will display their score and the computer's score along with the result of t ...

javascriptjqueryhtmlcss

Issues with the navigation and logo design in bootstrap mode

1: How can I adjust the size of the logo and name in my Bootstrap navigation? 2: My navigation menu is not showing up correctly. Can anyone help me troubleshoot? https://i.sstatic.net/0pXya.jpg Navbar: <nav class="navbar navbar-expand-lg py-4 f ...

htmlcsstwitter-bootstrap

The functionality of the Bootstrap grid system has proven to be ineffective

Hello, I am currently using Bootstrap 3 and attempting to configure my template. It seems like I may not have a full grasp on the concept of 'row' in Bootstrap because my template is not behaving as expected. Take a look at this full screen fidd ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Remove the space gap between the header and card in Bootstrap

I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card. Looking at the image provided, it's clear that ...

htmlcssbootstrap-5

How to create HTML buttons with CSS that maintain proper proportions?

How can I ensure that my HTML buttons adjust proportionally to different screen sizes? I've been working on coding an Android app using HTML and CSS, and everything seems to be running smoothly. However, when I share the file with a friend, he compla ...

androidhtmlcssandroid-layoutmobile

Using JavaScript Functions to Resize Buttons and Change function on Click

I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...

javascripthtmljquerycss

How can we utilize CSS floats to achieve maximum widths?

I currently have 5 divs that I need to structure in a specific way: Each div must have a minimum size of 100px The parent container should display as many divs as possible on the first row, with any remaining divs wrapping to new rows if necessary If the ...

javascripthtmlcsscss-float

Create a stylish design with Bootstrap 3.0 featuring a full-width color background and compact columns perfectly centered on the

As I ventured into creating a business theme with stripes, akin to the one developed by W3Schools and accessible here, I encountered a particular challenge. The layout consisted of horizontal sections with varying background colors. My main concern was th ...

htmlcsstwitter-bootstrap

Firefox is not compatible with CSS animation

I am facing an issue with a select box in "multiple" mode that fetches its data asynchronously. While waiting for the data to load, I want to display a spinner inside the select box. Interestingly, the code works perfectly fine on Chrome, Chromium, and Edg ...

csscross-browsercss-animations

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

androidjqueryhtmlcsscheckbox

HTML5 CSS and Rails theme

I am currently utilizing a free HTML5 template found at this URL: Despite my efforts, I am unable to successfully implement the background images from the main.js file (bg01.jpg, bg02.jpg, bg03.jpg). How should I correctly reference these image files wit ...

cssruby-on-railshtml

The html input box's ability to handle overflow situations

Currently, I am working on creating a form that allows users to update data. <dl> <dt>Medical Needs:</dt> <dd class="med_needs" style="height:60px;overflow:auto"> <input type = "text" id="med_needs"name ="med_nee ...

htmlcss

CSS descendant selector add style excluding child elements

My issue involves two divs each containing a table. When I apply the CSS class "table" to the first div, the second table in the div is impacted as well. .tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { background-color:red; width:25px; } ...

htmlcss

Is it feasible to apply Bootstrap 4 Columns float style similar to Bootstrap 3?

After starting development with Bootstrap 4, I encountered a common problem related to the difference between using the Bootstrap 3 column system and the new Bootstrap 4 flex system. In Bootstrap 3, we could easily insert multiple columns inside a row and ...

css-floatmultiple-columnsbootstrap-4dynamic-columns