Create an inline form in rows and columns

Question

I'm trying to learn bootstrap grids and would like to create a row with two columns: one wide and one not so wide. In the left column I want to place an inline form, and in the right narrower column I will place another form with buttons. I copied the Bootstrap example with a row of 2 columns, then copied the Bootstrap inline form code and pasted it into one of the columns, but when I run the code it is not inline. This is my code so far:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="MyContainer">
  <div class="row">
    <div class="col-6">
      <form class="form-inline">
        <label class="sr-only" for="inlineFormInputName2">Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

        <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
        <div class="input-group mb-2 mr-sm-2">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
        </div>

        <div class="form-check mb-2 mr-sm-2">
          <input class="form-check-input" type="checkbox" id="inlineFormCheck">
          <label class="form-check-label" for="inlineFormCheck">
              Remember me
            </label>
        </div>

        <button type="submit" class="btn btn-primary mb-2">Submit</button>
      </form>
    </div>
    <div class="col-6">
      One of two columns
    </div>
  </div>
</div>

The form controls are not inline, but stacked one on top of the other.

Can anyone see where I'm going wrong?

Answer 1

You are using classes from an older version of Bootstrap, but you are using Bootstrap 5.1. I made some changes: First, it is .visually-hidden, not .sr-only anymore. Second, .form-inline is no longer supported, so I changed the class to row and added the .col-3 class to the form's children . I also changed the classes of both columns, as you said you wanted one to be wider than the other. I don't know which resources of Bootstrap you use, but I recommend you to refer to the Official Documentation.

[email protected]/dist/css/bootstrap.min.css">

  

    

      

        

          Name
          
        

        

          Username
          
        

        

          
          
            Remember me
          
        

        Submit
      
    
    

      One of two columns