Having issues with implementing the Bootstrap form-check-inline feature

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>
                &copy;
                <script>document.write(new Date().getFullYear())</script> - Beaspa - Version 1.0
            </p>
        </footer>
    </div>
</body>

Answer №1

Swap out form-check form-check-inline for checkbox-inline and watch as it seamlessly aligns horizontally:

 <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="diabetes" value="diabetes">
            <label class="form-check-label">Diabetes</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="heartProblems" value="heartProblems">
            <label class="form-check-label">Cardiac Problems</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="hypertension" value="hypertension">
            <label class="form-check-label">Hypertension</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="metallicProsthesis" value="metallicProsthesis">
            <label class="form-check-label">Metal Prosthetics</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="pacemaker" value="pacemaker">
            <label class="form-check-label">Pacemaker</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="pregnancies" value="pregnancies">
            <label class="form-check-label">Pregnancies</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="surgeries" value="surgeries">
            <label class="form-check-label">Surgeries</label>
        </div>
        <div class="checkbox-inline">
            <input type="checkbox" class="form-check-input" id="allergies" value="allergies">
            <label class="form-check-label">Allergies</label>
        </div>

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

Shopify revamping the design of the collections

Looking to enhance the layout of a collection page by moving from a single column to having at least three items per row. The current layout can be viewed here Proposed new layout example shown here 1: Below is a snippet of the code I believe needs adj ...

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

Creating a string of DIV elements with PHP and mySQL - is it possible?

I am in the process of creating a well-formatted product list using data from an SQL database. The goal is to have my website display a store layout with small boxes containing brief information about each product that, when clicked, will open up detailed ...

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Looking for help with a jQuery script as I am a beginner in using jQuery. jQuery(document).ready(function ($) { $(".sub-menu").hide(); $(".current_page_item .sub-menu").slideDown(200);; $("li.menu-item").click(function () { if ($('.sub-menu&apos ...

Ways to pinpoint a particular division and switch its class on and off?

Consider this scenario, where a menu is presented: function toggleHiddenContent(tabClass) { let t = document.querySelectorAll(tabClass); for(var i = 0; i<t.length; i++) { t[i].classList.toggle="visible-class"; } } .hidden-conten ...

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

What is the process for adding an image to a scene using menu options?

I'm looking for assistance in loading an image into a scene upon clicking a menu option. Any guidance would be greatly appreciated. Please let me know if more information is required. Here's the method I've tried, which involves testing a v ...

Angular's Motion Module

Incorporating Angular-5 into my project has introduced a plethora of animations on various pages. While the utilization of jQuery provides a straightforward approach for adding and removing classes to DOM elements, it is frequently advised against using jQ ...

Utilizing JavaFX 2 with a touch of CSS styling

Currently, I am practicing JavaFX 2.0 and working on creating an XYChart with 2 line series while also customizing colors, strokes, etc. through a CSS file. In order to guide me through this process, I decided to refer to the following link: http://docs. ...

Generating an SQL query that produces interactive buttons that users can click with the goal of potentially altering the contents of a DIV element

I'm having some trouble explaining this, but here it goes.. My home.php file looks like this: <body> <div id='leftColumn'> <?php include ('includes/roomQuery.php') </div> ...

What is the best way to maintain a Photo's Aspect Ratio using just HTML and CSS?

Although I've been a bit slow to get on board with Responsive Design, I finally understand how it works. However, there's one specific issue that has stumped me - something I don't recall ever encountering in my 10 years of website developme ...

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

Could you explain the distinction between Node.bind() and Template Binding?

Currently, I am exploring the documentation for Google Polymer and have come across two types of data binding - Node.bind() and Template Binding. Can someone please explain the distinction between Node.bind() and Template Binding to me? ...

Is it possible to securely share login details on the internet?

I'm currently brainstorming different ways to securely display FTP, database, and hosting information for website projects on my project management site. One potential solution I'm considering is encrypting the passwords and developing an applica ...

How to conceal hyperlink underline with css

This is some HTML Code I'm working with <a href="test.html"> <div class=" menubox mcolor1"> <h3>go to test page</h3> </div> </a> Here's the corresponding CSS: .menubox { height: 150px; width: 100%; ...

I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue pers ...

The performance of the Ajax Jquery remove function leaves something to be desired

My table has items with a delete button for each row. To achieve this, I created the following Ajax function: $(document).ready(function() { $(".destroy-device").click(function(e) { e.preventDefault(); var id = $(this).attr("data-id"); $.aj ...

Is there a way to prevent this JavaScript code from deleting the initial row of my table?

Looking at the code provided, it's evident that creating and deleting new rows is a straightforward process. However, there seems to be an issue where the default/origin/first row (A-T) gets deleted along with the rest of the rows. The main requiremen ...

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine: https://i.stack.imgur.com/x9lio.png However, in IE it appears differently: Your code: HTML: & ...

`Erase content from a field once text is typed into a different field`

I have a Currency Converter with two input fields and a button. I enter the amount to be converted in the first field, and the result of the conversion appears in the second field. My question is: How can I automatically clear the second field when I type ...