<div >
  <h1>Example Horizontal Form Bootstrap</h1>
</div>
<div ></div>
<div >
  <form >
    <div >
      <label for="inputEmail3" >Enter your Email here........! Hello </label>
      <div >
        <input type="email"  id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div >
      <label for="inputPassword3" >Enter your Email here........! Hello</label>
      <div >
        <input type="password"  id="inputPassword3" placeholder="Password">
      </div>
    </div>
  </form>

I want to place the "text and textbox" in one line. At present, I am getting text in multiple lines beside the textbox like below.

CodePudding user response：

Remove col-sm-2 class from the label tag. Append the d-flex after form-group.

<div >
  <h1>Example Horizontal Form Bootstrap</h1>
</div>
<div ></div>
<div >
  <form >
    <div >
      <label for="inputEmail3" 
        >Enter your Email here........! Hello
      </label>
      <div >
        <input
          type="email"
          
          id="inputEmail3"
          placeholder="Email"
        />
      </div>
    </div>
    <div >
      <label for="inputPassword3" 
        >Enter your Email here........! Hello</label
      >
      <div >
        <input
          type="password"
          
          id="inputPassword3"
          placeholder="Password"
        />
      </div>
    </div>
  </form>
</div>

CodePudding user response：

You have a couple of options.

Option 1: Reduce the label text and/or increase the column allocated to it. Example

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

<div >
  <div >
    <div >
      <form>
        <div >
          <label for="inputEmail3" >Email</label>
          <div >
            <input type="email"  id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div >
          <label for="inputPassword3" >Password</label>
          <div >
            <input type="password"  id="inputPassword3" placeholder="Password">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Option 2: You can use text-truncate class to truncate any overflow text. Example

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

<div >
  <div >
    <div >
      <form>
        <div >
          <label for="inputEmail3" >Enter your Email here........! Hello</label>
          <div >
            <input type="email"  id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div >
          <label for="inputPassword3" >Enter your Password here........! Hello</label>
          <div >
            <input type="password"  id="inputPassword3" placeholder="Password">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>