CODEWITHSUNDEEP
htmlcssbootstrap-4
Chris Doyle
Chris Doyle

Reputation: 11992

Bootstrap columns of 3 + 9 not on same line

I am definining a radio form where there will be a question and 3 answers, the form is inline and essentially the question should be 3 cols and the answers div should be 9 cols. However when I use 3 and 9 the line breaks and the questions don't appear on the same line as the answer

<!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/[email protected]/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 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>
    </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/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
        crossorigin="anonymous"></script>
</body>
</html>

Why does the second div end up on a new line when the total columns is only 12?

Upvotes: 1

Views: 576

Answers (1)

dippas
dippas

Reputation: 60563

You need to remove form-check-inline class both in form-group and in col-9 and add .row inside .col-9

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions