I have been attempting to utilize the form-check-inline feature from Bootstrap Forms without success, as it seems to be stacking checkboxes vertically instead of inline:
https://i.sstatic.net/paLTC.png
This is the code snippet I am working with:
<h1>Create Patient</h1>
<hr />
<form>
<!-- #region General Data -->
<div class="form-group">
<label>First and Last Name</label>
<input type="text" class="form-control" id="namesAndSurnames" placeholder="First and Last Name">
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="date" class="form-control" id="birthDate">
</div>
<div class="form-group">
<label>ID Number</label>
<input type="number" class="form-control" id="ci" placeholder="Identification Number">
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" id="address" placeholder="Address">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="Phone Number">
</div>
<div class="form-group">
<label>Medical Society</label>
<input type="text" class="form-control" id="medicSociety" placeholder="Medical Society">
</div>
<div class="form-group">
<label>Mobile Emergency Contact</label>
<input type="text" class="form-control" id="mobileEmergency" placeholder="Mobile Emergency Contact">
</div>
<div class="form-group">
<label>Occupation</label>
<input type="text" class="form-control" id="occupation" placeholder="Occupation">
</div>
<div class="form-group">
<label>Observations</label>
<input type="text" class="form-control" id="observations" placeholder="Observations">
</div>
<!--#endregion -->
<!-- #region Medical History -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="diabetes" value="diabetes">
<label class="form-check-label">Diabetes</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="heartProblems" value="heartProblems">
<label class="form-check-label">Heart Problems</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="hypertension" value="hypertension">
<label class="form-check-label">Hypertension</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="metallicProsthesis" value="metallicProsthesis">
<label class="form-check-label">Metallic Prostheses</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="pacemaker" value="pacemaker">
<label class="form-check-label">Pacemaker</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="pregnancies" value="pregnancies">
<label class="form-check-label">Pregnancies</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="surgeries" value="surgeries">
<label class="form-check-label">Surgeries</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="allergies" value="allergies">
<label class="form-check-label">Allergies</label>
</div>
<div class="form-group">
<label>Description of Allergies</label>
<input type="text" class="form-control" id="allergiesDescription" placeholder="Describe Patient's Allergies">
</div>
<!--#endregion -->
<button type="submit" class="btn btn-primary pull-right">Save</button>
</form>
In addition to utilizing Bootstrap forms, my project involves integrating with Electron framework, but I believe this issue is unrelated (it shouldn't cause any trouble). All aforementioned HTML elements are rendered using the w3-include-html, although this should not impact the layout either... here is the body section:
<body>
<div class="container">
<div id="includerDiv" w3-include-html="mainWindow.html"></div>
<script>w3.includeHTML();</script>
<hr />
<footer>
<p>
©
<script>document.write(new Date().getFullYear())</script> - Beaspa - Version 1.0
</p>
</footer>
</div>
</body>