title: Modal Grid not displaying properly, maybe because ::before and ::after
body: <p>I am trying to do a simple modal in C# &amp; ASP.NET MVC; I added 2 text boxes in a col-6 layout so they would be side by side I tried quiet a few different techniques and the only way I got it to work was if I did a table with a row and 2 cols in the row but they don’t came out the exact same size. So I'm trying to do the col-6 with bootstrap grid so they will be the same. In my Dev tools I see ::before and ::after maybe this has something to do with messing up the layout.</p>
  
  <p>Here the 2 text boxes are in block layout 1 on top of each other</p>
  
  <pre><code>&lt;div class="container-fluid mx-auto"&gt;
      &lt;div class="row d-inline"&gt;
          &lt;div class="col-6 d-inline"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(x =&gt; x.PartVM.PartNumber, htmlAttributes: new { @class = "control-label" })
                  &lt;div class=""&gt;
                      @Html.TextBoxFor(x =&gt; x.PartVM.PartNumber, new { @class = "form-control", @readonly = "readonly" })
                      @Html.ValidationMessageFor(x =&gt; x.PartVM.PartNumber, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-6 d-inline"&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(x =&gt; x.PartVM.DateEntered, htmlAttributes: new { @class = "control-label" })
                  &lt;div class=""&gt;
                      @Html.TextBoxFor(x =&gt; x.PartVM.DateEntered, new { @class = "form-control", @readonly = "readonly" })
                      @Html.ValidationMessageFor(x =&gt; x.PartVM.DateEntered, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I use the bootstrap grid so they come out the same size and on the same row?</p>