Aligning h1 and input fields in bootstrap-CodePudding

i have a row in bootstrap containing a h1 class and input field. This is my code

<div >
            <div >Welcome<input  type="text" placeholder="Enter Name"></div>
        </div>

The desired output i am looking for is "Welcome name" where "Welcome" and "Name" is aligned side by side. However my current output is as shown below

Is there any form of styling that i can do using bootstrap to achieve my desired output?

CodePudding user response：

You can achieve that by using Bootstrap only, the trick is done using the col-auto CSS class like the following

<div >
  <div >
    Welcome
  </div>
  <div >
    <input  type="text" placeholder="Enter Name">
  </div>
</div>

You see in here, the first child of the row represents a col-auto that spans only the required space The Welcome word, and the second child takes the rest space remaining in the row.

CodePudding user response：

Append d-inline on the class of the second div. On welcome div and it should work.

<div >
  <div >Welcome
      <input  type="text" placeholder="EnterName">
  </div>
</div>

Also there are some examples of horizontals forms on bootsrap