I have the following Bootstrap row on my page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group row">
<div class="col-sm-6">
I, <input type="text" asp-for="FullName" class="form-control input-lg" />,
</div>
<div class="col-sm-6">
hereby acknowledge that I understand my responsibility as an:
</div>
</div>
Whenever I run the code, I see that the text box becomes lower than "I,".
I tried to limit the size of the text box and also tried to put "I," in another col, but then the text box becomes very far apart from "I,". This is the code that I tried:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group row">
<div class="col-sm-2">
I,
</div>
<div class="col-sm-4">
<input type="text" size="10" asp-for="FullName" class="form-control input-lg" />,
</div>
<div class="col-sm-6">
hereby acknowledge that I understand my responsibility as an:
</div>
</div>
I just want to keep "I, box and then "hereby acknowledge that I understand my responsibility" on one line.
The inline form option doesn't help here. Neither do columns, which are rarely going to space things properly.
We instead need to force inline display and auto width on the input, both of which are configured differently by default on mobile.
I left it all in a column as I assume you'll need this for your overall layout. It's not necessary that the sentence be in any container, though.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12 mt-3">
I, <input class="form-control d-inline w-auto input-lg" type="text" asp-for="FullName" />, hereby acknowledge that I understand my responsibility as an:
</div>
</div>
</div>