Bootstrap 5 Forms

Example 1: Bootstrap 5 block-level form

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example 2: Bootstrap 5 inline form

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Striped Rows - The .table-striped class adds zebra-stripes to a table.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped"> 
        ...
    </table>
</div> 

Striped Column - The .table-striped-columns class adds zebra-stripes to a table columns.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped-columns"> 
        ...
    </table>
</div> 

<table class="table table-dark table-striped"></table>
<table class="table table-success table-striped"></table>
<table class="table table-primary table-striped"></table>

Hover Rows - The .table-hover class adds a hover effect (grey background color) on table row.

<table class="table table-hover"></table>

Add .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered"></table>
<table class="table table-bordered border-primary"></table>
<table class="table table-borderless"></table>

The .table-sm class makes a table more compact by cutting cell padding in half.

<table class="table table-sm"> </table>

Responsive tables allow tables to be scrolled horizontally. Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>