Why are these rows appearing on the same line? (Bootstrap) - html

Question

I don't understand why the three different rows are appearing on the same line. Don't rows usually appear on different lines? I even tried setting a fixed height for the rows and/or columns.
Here is the fiddle: https://jsfiddle.net/qvuo4bqw/
<div class="container-fluid">
<div id="bubble">
<div class="row">
<div class="col-md-12">
<h3 id="question">Question Here</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<li>Disagree</li>
<label class="disagree" id="disagree-btn" val="0"></label>
<label class="disagree" val="0.5"></label>
<label id="neutral" val="1"></label>
<label class="agree" val="2"></label>
<label class="agree" id="agree-btn" val="3"></label>
<li>Agree</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-warning" id="back-btn">Back</button>
<button class="btn btn-primary" id="next-btn">Next</button>
</div>
</div>
<br><br>
</div>
.container-fluid {
padding-top: 5%;
display: flex;
justify-content: center;
align-items: center;
}
#bubble {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 100%;
height: 800px;
width: 800px;
border-color: black;
border-style: solid;
border-width: 5px;
background: linear-gradient(0deg, #AA3939 0%, #55AA55 0%);
color: white;
}
.row {
height: 150px;
}
ul>label {
width: 50px;
height: 50px;
border-radius: 100%;
border-style: solid;
cursor: pointer;
text-align: center;
}
.agree {
border-color: #226666;
}
.disagree {
border-color: #AA6C39;
}
#disagree-btn, #agree-btn {
height: 60px;
width: 60px;
}
#next-btn, #back-btn {
height: 50px;
width: 100px;
}
#neutral {
height: 40px;
width: 40px;
border-color: gray;
}

Answer 1

I don't understand why the three different rows are appearing on the same line.
Because your elements are in a flex container (#bubble has display: flex).
And two initial settings of a flex container are flex-direction: row and flex-wrap: nowrap, meaning child elements will align horizontally in a single line and not wrap.
If you want the children of #bubble to appear on different rows, here are a few options you can start with:
Switch to flex-direction: column, or
Enable flex-wrap: wrap, or
Switch to display: block

Answer 2

You are repeating the class = "row"
Try this instead:
<div class="container-fluid">
<div id="bubble">
<div class="row">
<div class="col-md-12">
<h3 id="question">Question Here</h3>
</div>
<div class="col-md-12">
<ul class="list-inline">
<li>Disagree</li>
<label class="disagree" id="disagree-btn" val="0"></label>
<label class="disagree" val="0.5"></label>
<label id="neutral" val="1"></label>
<label class="agree" val="2"></label>
<label class="agree" id="agree-btn" val="3"></label>
<li>Agree</li>
</ul>
</div>
<div class="col-md-12">
<button class="btn btn-warning" id="back-btn">Back</button>
<button class="btn btn-primary" id="next-btn">Next</button>
</div>
</div>
<br><br>
</div>

Answer 3

Well you have a couple issues, A) you have the .list-inline>li set to display: inline-block. So that's why there inline. B) Another issue I saw was that you have only 1 li inside your ul, everything else is labels. Which would probably make it appear inline to. If you want the labels not inside of an li element, then put them inside of a div of another li, either way this is not correct HTML formatting.