Question 363094 in Html Question posted in
Some basic documentation can be found here.

Html – Formatting of a sentence with text box on one line

I have the following Bootstrap row on my page:

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

Tags:

2

Answers


  1. 0

    <input> is already an inline element. Why not simply put it all in the same column without breaking the sentence into weird columns?

    You don’t need a special class for full-width elements.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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, <input type="text" size="10" asp-for="FullName" class="form-control input-lg" />, hereby acknowledge that I understand my responsibility as an:
  </div>
</div>
    Login or Signup to reply.
  2. 0

    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.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search