Layout

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

Forms

HTML
<div class="mb-3">  <div class="form-group">    <label for="formGroupExampleInput" class="form-label">Example label</label>    <div class="form-control-wrap">      <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">    </div>  </div></div><div class="mb-3">  <div class="form-group">    <label for="formGroupExampleInput2" class="form-label">Another label</label>    <div class="form-control-wrap">      <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">    </div>  </div></div>

Form grid

More complex forms can be built using our grid classes.

HTML
<div class="row g-gs">  <div class="col-md-6">    <div class="form-control-wrap">      <input type="text" class="form-control" placeholder="First name" aria-label="First name">    </div>  </div>  <div class="col-md-6">    <div class="form-control-wrap">      <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">    </div>  </div></div>

Gutters

.g-* classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width.
Note: .g-* classes only work with .row.

More complex layouts can also be created with the grid system.

HTML
<div class="row g-4">  <div class="col-md-6">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="Custom column padding" aria-label="First name">    </div>  </div>  <div class="col-md-6">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="Custom column padding" aria-label="Last name">    </div>  </div>  <div class="col-md-6">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="Custom column padding" aria-label="First name">    </div>  </div>  <div class="col-md-6">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="Custom column padding" aria-label="Last name">    </div>  </div></div>

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your labels as well so they’re vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.

Radios
HTML
<form>    <div class="row mb-3">      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>      <div class="col-sm-10">        <div class="form-control-wrap">          <input type="email" class="form-control" id="inputEmail3">        </div>      </div>    </div>    <div class="row mb-3">      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>      <div class="col-sm-10">        <div class="form-control-wrap">            <input type="password" class="form-control" id="inputPassword3">        </div>      </div>    </div>    <fieldset class="row mb-3">      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>      <div class="col-sm-10">        <div class="form-check">          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>          <label class="form-check-label" for="gridRadios1">            First radio          </label>        </div>        <div class="form-check">          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">          <label class="form-check-label" for="gridRadios2">            Second radio          </label>        </div>        <div class="form-check disabled">          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>          <label class="form-check-label" for="gridRadios3">            Third disabled radio          </label>        </div>      </div>    </fieldset>    <div class="row mb-3">      <div class="col-sm-10 offset-sm-2">        <div class="form-check">          <input class="form-check-input" type="checkbox" id="gridCheck1">          <label class="form-check-label" for="gridCheck1">            Example checkbox          </label>        </div>      </div>    </div>    <button type="submit" class="btn btn-primary">Sign in</button></form>

Horizontal form label sizing

Be sure to use .col-form-label-sm or .col-form-label-lg to your label or legend to correctly follow the size of .form-control-lg and .form-control-sm.

HTML
<div class="row mb-3">  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>  <div class="col-sm-10">    <div class="form-control-wrap">        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">    </div>  </div></div>

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row.

HTML
<div class="row g-3">  <div class="col-sm-7">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="City" aria-label="City">    </div>  </div>  <div class="col-sm">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="State" aria-label="State">        </div>  </div>  <div class="col-sm">    <div class="form-control-wrap">        <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">     </div>  </div></div>

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

@
HTML
<form class="row gy-2 gx-3 align-items-center">  <div class="col-auto">    <div class="form-group">      <label class="visually-hidden" for="autoSizingInput">Name</label>      <div class="form-control-wrap">        <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">      </div>    </div>  </div>  <div class="col-auto">    <div class="form-group">      <label class="visually-hidden" for="autoSizingInputGroup">Username</label>      <div class="form-control-wrap">        <div class="input-group">          <div class="input-group-text">@</div>          <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">        </div>      </div>    </div>  </div>  <div class="col-auto">    <div class="form-group">      <label class="visually-hidden" for="autoSizingSelect">Preference</label>      <div class="form-control-wrap">        <select class="form-select" id="autoSizingSelect">          <option selected>Choose...</option>          <option value="1">One</option>          <option value="2">Two</option>          <option value="3">Three</option>        </select>      </div>    </div>  </div>  <div class="col-auto">    <div class="form-check">      <input class="form-check-input" type="checkbox" id="autoSizingCheck">      <label class="form-check-label" for="autoSizingCheck">        Remember me      </label>    </div>  </div>  <div class="col-auto">    <button type="submit" class="btn btn-primary">Submit</button>  </div></form>
© 2022 Nioboard. Template by Softnio
Recent Notification