Bootstrap 4 Grid System col class taking different width? - html

Question

I have one div that is a row and inside a few more rows with two col classes each. But what is strange is the first two col-3 classes take different width than the next two col-3 classes which makes the element un-aligned one on top of another. The code is bellow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3 w-100">
<h5 class="text-center w-100">Color Legend</h5>
<div class="row">
<div class="col-3 w-100">
<i class="far fa-circle circle px-2"></i>
</div>
<div class="col-9 w-100">
<p>Not visited topic</p>
</div>
</div>
<div class="row">
<div class="col-3 w-100">
<i class="far fa-circle circle px-2" style="color:#016fc9;"></i>
</div>
<div class="col-9">
<p>Visted topic</p>
</div>
</div>
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#00bfa5"></i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>successfully</strong> answered.</p>
</div>
</div>
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#f44336"></i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>failed</strong> after visting.</p>
</div>
</div>
</div>
Here is a screen of the result
https://i.stack.imgur.com/LRgqd.png

Answer 1

You are breaking the .row > .col hierarchy. Meaning col should have .row as a parent and vice versa. In your case, you have .row as parent and child, which is why you had to give .w-100. Please try the below code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3">
<div class="col-12">
<h5 class="text-center">Color Legend</h5>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2">I</i>
</div>
<div class="col-9">
<p>Not visited topic</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#016fc9;">I</i>
</div>
<div class="col-9">
<p>Visted topic</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#00bfa5">I</i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>successfully</strong> answered.</p>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-3">
<i class="far fa-circle circle px-2" style="color:#f44336">I</i>
</div>
<div class="col-9">
<p>Visted topic, pop-up question <strong>failed</strong> after visting.</p>
</div>
</div>
</div>
</div>