Aligning h1 and input fields in bootstrap

user_14138987 0
Viewed 41

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

<div class="row mb-5">
            <div class="col h1 text-white text-start text-center text-md-start text-lg-start">Welcome<input class="form-control no-border font-size" 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

current output

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

bootstrap-5 css html
2 Answers

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

<div class="row mb-5">
  <div class="col-auto h1 text-white text-start text-center text-md-start text-lg-start">
    Welcome
  </div>
  <div class="col">
    <input class="form-control no-border font-size" 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.

user_102420470

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

<div class="row mb-5">
  <div class="col h1 text-white text-start text-center text-md-start text-lg-start d-inline">Welcome
      <input class="form-control no-border font-size" type="text" placeholder="EnterName">
  </div>
</div>

Also there are some examples of horizontals forms on bootsrap

user_195601750
Related