Create an inline form in rows and columns
P粉904191507
P粉904191507 2024-03-29 16:34:14
0
1
373

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?

P粉904191507
P粉904191507

reply all(1)
P粉662361740

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">
One of two columns
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template