"Utilizing Bootstrap's form-check feature places the checkbox alongside the text

While attempting to create a checkbox using the Bootstrap form-check class, I encountered an issue with my code. Here is the snippet:

<form>
  <div class="form-section">
    <div>Title</div>
    <div class="form-check">
      <input id="checkbox1" class="form-check-input" type="checkbox">
      <label class="form-check-label" for="checkbox1">
        VS-57KM-Z9M1-WC6B-SRXL
      </label>
    </div>
  </div>
  <button class="btn btn-success w-100" type="submit">Confirm</button>
</form>

The styling for the .form-section class looks like this:

.form-section {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 120px;
  margin: 10px;
  text-align: left;
}

Unfortunately, upon loading the page, this is the result...

https://i.sstatic.net/19SC5.png

An intriguing observation is that this issue only occurs on Windows, while on Mac everything functions correctly. Both systems are running Google Chrome. Any assistance would be greatly appreciated. Thank you!

htmlcssbootstrap-4

Answer №1

It looks like your code is functioning correctly. I recommend performing a hard reload on your browser and checking the output again. If you are still encountering issues, it's possible that your code may be misplaced on Windows or there could be other styles overriding it.

  .form-section {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 120px;
  margin: 10px;
  text-align: left;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
</head>
<body>

 <form>
  <div class="form-section">
    <div>Title</div>
    <div class="form-check">
      <input id="checkbox1" class="form-check-input" type="checkbox">
      <label class="form-check-label" for="checkbox1">
        VS-57KM-Z9M1-WC6B-SRXL
      </label>
    </div>
  </div>
  <button class="btn btn-success w-100" type="submit">Confirm</button>
</form>

</body>

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

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

Exploring HTML for a specific value using Swift

My journey into learning Swift and Xcode began with a simple project. I decided to work on a project that involved finding a specific value on a website. After successfully retrieving the HTML code, my next step is to isolate and extract the exact value I ...

htmlswiftxcodeparsing

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...

csshtmllayout

The HTML document is having trouble establishing a connection with socketio

I currently hold an HTML file within my local file system, presented as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of a Minimal Working File</title> ...

javascripthtmlnode.jswebsocketsocket.io

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...

javascriptc#cssblazormudblazor

Is there a CSS Grid that supports IE6+ with percentage-based layouts?

Seeking a sleek CSS grid system that is percentage-based with 12 columns and works well on IE6+ as well as all modern browsers. Support for nested columns would be a bonus but not mandatory. Many grids out there lack compatibility with IE6 or are based sol ...

cssinternet-explorer-6percentagegrid-layout

Utilizing jQuery for asynchronous image uploading

Just started learning jQuery and I'm having trouble uploading a jpg image file using the ajax method. It seems like it's not working properly. Can anyone guide me through this process? HTML <form action="" method="POST" enctype="multipart/fo ...

javascriptphpjqueryajaxhtml

The issue with Angular 2's Parameterised router link component not fully refreshing

I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this: <ul id="demo23" class="collapse"> <li> <a [routerLink]="['image-gallery','Picasso ...

javascriptjquerycssangularfrontend

What is the process of dynamically altering the content inside a td element?

Is there a way to dynamically change the content of a td based on the state of a checkbox? If the checkbox is unchecked, the td should remain plain, but if checked, I want the text to have a specific style: b style="font-family:Tahoma;font-size:8pt;color: ...

c#asp.nethtml

I am struggling to retrieve the text from a link element within a hover dropdown

Having trouble clicking on a dropdown menu item that appears on hover? Here is the HTML code of the website I am currently testing: <div id="header-nav" class="skip-content"> <nav id="nav"> <ol cl ...

javahtmlseleniumselenium-chromedriverwebdriver

Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the ...

htmlcsswidthoverlapinput-field

Changing the identification of elements

I noticed that when I open object X and Y, they have the same fields, tabs, and checkboxes. However, I am confused as to why the IDs of the checkboxes and other elements are different. Can you explain what gwt-uid(number) means? Please take a look at the a ...

htmlseleniumgwtautomationpycharm

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

phpjavascripthtmlcss

Photos inside a flexbox do not resize correctly

When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case. Regardless of the CSS styles applied, I am unable to maintain the o ...

htmlcss

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

phpjqueryhtmlajaxsubmit

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

htmlcssangulartypescriptbootstrap-4

Struggling to properly set up the hamburger and close icons

When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...

htmlcss

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

The radio button that disables other inputs only functions correctly for a single element when using Query Selector, but does not work with Query

I have attempted to develop a form section that is disabled when the user selects option A and enabled when they choose option B. document.getElementById('delivery').onclick = function() { var disabled = document.querySelectorAll(".dis ...

javascripthtml

A Guide on Integrating a Javascript Reference into HTML while Displaying a PHP Object

Our website relies heavily on PHP modules to generate objects that are essential for constructing our web pages. Some of the key modules we have include: Anchor (ahref) Button CheckBox ComboBox DateTime Email Label Note Password Phone RadioButton RichTe ...

javascriptphpjqueryhtml