.form-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

fieldset {
  flex: 1 1 auto;
  min-width: 25%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="post">
  <div >
    <fieldset >
      <legend >Subject Name</legend>
      <input type="text"  style="box-shadow: none" name="name" placeholder="Subject Name">
    </fieldset>
    <fieldset >
      <legend >Author</legend>
      <input type="text"  style="box-shadow: none" name="author" placeholder="Subject Name">
    </fieldset>
    <fieldset >
      <legend >For Grade</legend>
      <select name="for" id=""  style="box-shadow: none">

        <option value="">
          Test
        </option>

      </select>

    </fieldset>
  </div>
  <button type="submit" >Add</button>
</form>

this is my view. I want to place add button at the bottom of this page. mt-auto doesn't work, I have tried position fixed-but it doesn't make responsive

CodePudding user response：

Add to css code:

button{
position:absolute;
bottom:0;}

CodePudding user response：

On every Bootstrap page you must start with a foundation and build with certain BS classes. The following is a skeleton of the working example:

<!--PATTERN: -----------------------------------------.container-->
<form class='container'>
  <!--.tall is a custom class see example-->
  <!------------------------------------------------.row-->
  <section >
    <!--------------------------------------------.col-->
    <fieldset > </fieldset>
    <!--------------------------------------------.col-->  
    <fieldset > </fieldset>
    <!--------------------------------------------.col-->
    <fieldset > </fieldset>
  </section>

  <!------------------------------------------------.row-->
  <section class='row'>
    <!--------------------------------------------.col-->
    <button >Add</button>
  </section>

</form>

The most basic BS pattern is:

• .container wraps around everything
• .row is directly under .container and is like a table row stretching edge to edge of .container.
• .col is directly under .row. Each sibling of .col should be another .col and they will sit next to each other just like table cells do.
• content should go in each .col

.tall {
  min-height: 90vh;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<form class='container' action="" method="post">
  <section >
    <fieldset >
      <legend >Subject Name</legend>
      <input type="text"  style="box-shadow: none" name="name" placeholder="Subject Name">
    </fieldset>
    <fieldset >
      <legend >Author</legend>
      <input type="text"  style="box-shadow: none" name="author" placeholder="Subject Name">
    </fieldset>
    <fieldset >
      <legend >For Grade</legend>
      <select name="for" id=""  style="box-shadow: none">

        <option value="">
          Test
        </option>

      </select>

    </fieldset>
  </section>
  <section class='row'>
  <button type="submit" >Add</button>
  </section>
</form>