Displaying Bootstrap columns of 3 and 9 in separate lines

I need to create a radio form with a question and three answers. The form should be inline, with the question taking up three columns and the answers div spanning nine columns. However, when I set the column widths to 3 and 9 respectively, the line breaks and the question does not appear on the same line as the answers.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bca6bea6b8">[email protected]</a>/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-dark text-light">
    <form>
        <div class="form-group form-check-inline form-row border border-danger">
            <div class="col-3 border border-danger">This is the first multiple choice question</div>
            <div class="col-9 form-check-inline border rounded-pill border-danger">
                <div class="form-check col">
                    <label class="form-check-label" for="q1a1">
                        <input class="form-check-input active" type="radio" id="q1a1" name="q1" value="a1"
                               checked="checked">
                        Answer one text which is a single line
                    </label>
                </div>
                <div class="form-check col">
                    <input class="form-check-input" type="radio" id="q1a2" name="q1" value="a2">
                    <label class="form-check-label" for="q1a2">Answer two</label>
                </div>
                <div class="form-check col">
                    <input class="form-check-input" type="radio" id="q1a3" name="q1" value="a3">
                    <label class="form-check-label" for="q1a3">Answer three</label>
                </div>
            </div>
        </div>
    </form>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4b544b4b5e491551487b0a150a0d150a">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394d574f5749">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384 YQ4JLhjyBLPDQt //I STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
        crossorigin="anonymous"></script>
</body>
</html>

Can someone help explain why the second div ends up on a new line even though the total columns add up to only 12?

htmlcssbootstrap-4

Answer №1

To fix the issue, make sure to eliminate the form-check-inline class from both the form-group and the col-9. Additionally, insert .row inside the .col-9

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcfce7e0e7e1f2e3d3a7bda5bda3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid bg-dark text-light">
  <form>
    <div class="form-group form-row border border-danger">
      <div class="col-3 border border-danger">This is the first multiple choice question</div>
      <div class="col-9 border rounded-pill border-danger">
        <div class="row">
          <div class="form-check col">
            <label class="form-check-label" for="q1a1">
          <input class="form-check-input active" type="radio" id="q1a1" name="q1" value="a1" checked="checked"> Answer one text with is line
          </label>
          </div>
          <div class="form-check col">
            <input class="form-check-input" type="radio" id="q1a2" name="q1" value="a2">
            <label class="form-check-label" for="q1a2">Answer two</label>
          </div>
          <div class="form-check col">
            <input class="form-check-input" type="radio" id="q1a3" name="q1" value="a3">
            <label class="form-check-label" for="q1a3">Answer three</label>
          </div>
        </div>
      </div>
    </div>
  </form>
</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

Is it possible to nest a parsys within another parsys in this context?

On my webpage, I have a paragraph system (parsys) with a component that contains two inner paragraph systems. When I try to add a rich text component to each of these inner paragraph systems, the components overlap and become uneditable. Is it possible t ...

javahtmlcsscontent-management-systemaem

Is it possible to vertically and flexibly center a <div> over an <img>?

Check out this HTML: <div class="float"> <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /> <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /> <img class="left" src="mattWaterRun.jpg" ...

htmlcss

Navigating absolute URLs in a localhost environment can be managed effectively by following

Ensuring that paths to pages and images are consistently accurate regardless of file hierarchy is important for my PHP website. However, I find it challenging to determine the most efficient and sustainable approach to achieving this. Currently, I am usin ...

phphtmllocalhostabsolute-path

What is the best way to add hyphens between words in PHP code?

Here is the code snippet and the desired output: ('nice apple'),(' nice yellow banana'),(' good berry ') To achieve the desired output: ('nice-apple'),(' nice-yellow-banana'),(' good-berry ') ...

phpjqueryhtml

Problem with toggler button

I've hit a roadblock with my project, particularly in the navbar area. Being a complete beginner, I'd appreciate an explanation in simple terms. The specific issue I'm facing is that on mobile-sized screens, the Toggler button is present but ...

bootstrap-4navbar

Creating a cohesive design by ensuring buttons match the appearance of other elements, and vice versa

During the process of building a website, I encountered a challenge in making buttons work seamlessly with other elements to ensure uniformity in appearance. This issue often arises in menus, where some buttons are functional while others are simply li ...

htmlcss

Viewing saved information prior to saving - JavaScript

I'm looking for a solution to allow users to preview captured records before they are inserted. Any suggestions on how to achieve this? HTML.html <form id="view" method="POST" class="formular"> <label>Name</label> ...

javascripthtmlphonegap

__str__ method not displaying the string properly

I'm currently developing a Django application and I'm working on displaying the first and last names of the user upon login. This is a snippet of my model - class Admins(models.Model): user = models.OneToOneField(User, on_delete=models.CASCA ...

pythonhtmldjangodjango-modelsdjango-views

Discovering hidden elements using Overflow:hidden

I need help figuring out how to display the cropped part of my text without using scroll bars in css. For example: td { overflow: hidden; } The hidden content is important, but the table property is fixed. table { table-layout: fixed; } I want the ...

css

utilizing symbols from a vector graphic icon库

There are countless icon images to be found on the internet. Recently, I came across this particular set and now I'm stumped on how to actually utilize them. Despite my efforts to find tutorials online, I have come up short in finding any helpful reso ...

htmlcssvectoricons

Is there a way to make a text area move along with the mouse cursor?

I have been working on my first website and everything is running smoothly so far. However, I have a new idea that I am struggling to implement. Some of the pages on my site feature a video player with buttons to select different videos. When a viewer hove ...

javascriptjqueryhtmlcss

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

Ways to Resolve Issues with WordPress Update and Publish Failures

It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...

phphtmlcsssqlwordpress

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

htmlcss

Guide to positioning the layout inflater on the right side

I am facing an issue with the layout inflater where the inflated layout appears in the center of the page instead of the intended right corner placement. I have attempted to modify the gravity to right, but it did not resolve the problem. Below is a snipp ...

androidhtmlcssandroid-layout

Interact with Datatable by clicking on the table cell or any links within the cell

When I am working with the datatable, I want to be able to determine whether a click inside the table was made on a link or a cell. <td> Here is some text - <a href="mylink.html">mylink</a> </td> Here is how I initialize my da ...

javascriptjqueryhtmldatatable

Tips for creating a condensed header

As a newcomer to HTML, I am facing challenges in creating a simple header similar to the one displayed on this website or the example in the image below. Below is the snippet of HTML that I have attempted: <header class="header"> <div ...

javascripthtmlcss

What is the best way to escape a jQuery event if a different HTML select element does not have any option selected?

When trying to exit from a checkbox's change event if a specific select element has not had an option selected, I encountered an issue. Initially, I checked the select element's value with no selection using the following code at the beginning of ...

javascriptjqueryhtmlhtml-selectonchange

Chipped bricks (possibly a vintage piece)

Although I thought the setup was straightforward, it seems like I am missing something... Here is the HTML structure with a simple fixed-width 2-column layout: <div class="container_12"> <div class="grid_masonry"> ... </div> <d ...

javascriptjqueryhtmlcssmasonry

Exploring the grid system within the framework of Bootstrap's Model

Having some trouble with the grid system. I created this label and text box but I want them to be together. How can I make that happen? I've tried but it's not working. view image here This is the code I'm using: <div class= ...

asp.net-mvcbootstrap-4