Bootstrap 5 useful snippets

These snippets  are very helpful in setting up a simple UI fast:

Navbar

	
<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
   </div>
</nav>
    

Login Page

<div class="card center-screen">
   <div class="card-header">
      Title
   </div>
   <div class="card-body">
      <form>
         <div class="form-floating mb-3">
            <input type='text' class="form-control" id='username' placeholder='username' /> 
            <label for='username'>Username</label> 
         </div>
         <div class="form-floating mb-3"> 
            <input type='password' class="form-control" id='password' placeholder='password'  /> 
            <label for='password'>Password</label> 
         </div>
         <div class="d-flex flex-row justify-content-center"> 
            <button class="btn btn-success btn-block">Login</button> 
         </div>
         <div class="alert alert-danger">Could not login</div>
      </form>
   </div>
</div>

Sidebar

<div class="d-flex flex-column flex-shrink-0 p-3 bg-light mt-1" style="width: 280px; min-height: 600px;"
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<span class="fs-4">Menu</span>
</a>
<hr/>
<ul class="nav nav-pills flex-column mb-auto">
   <li class="nav-item">
      <a href="/dashboard/users" class='nav-link active' aria-current="page">
      Users
      </a>
   </li>
   <li>
      <a href="/dashboard/customers" class='nav-link link-dark' aria-current="page">
      Customers
      </a>
   </li>
</ul>
</div>

Bootstrap 5 inline form

<form class="row g-3">
            <div class="col-2 align-self-center">
                <label class="form-label">Id</label>
            </div>
            <div class="col-4">
                <input type="text" class="form-control" placeholder="123123">
            </div>
            <div class="col-2 align-self-center">
                <label class="form-label">Company</label>
            </div>
            <div class="col-4">
                <input type="text" class="form-control" placeholder="My company">
            </div>
            <div class="col-2 align-self-center">
                <label class="form-label">Name</label>
            </div>
            <div class="col-4">
                <input type="text" class="form-control" placeholder="My Name">
            </div>
</form>

Bootstrap 5 flex layout of a search bar with filters

<div class="card">
     <div class="card-body d-flex flex-row flex-wrap gap-3">
         <label class="col-form-label" for='invoiceId'>Invoice Id</label> 
         <div>
            <input type='search' class="form-control" id='invoiceId'/>    
         </div>
         <label class="col-form-label" for='fromDate'>From Date</label> 
         <div>
            <input type='date' class="form-control" id='fromDate'/>
         </div>
         <label class="col-form-label" for='toDate'>To Date</label> 
         <div>
            <input type='date' class="form-control" id='toDate'/>
         </div>
         <div class="col-form-label">Read State</div>
         <div>
            <select class="form-select" id="readState" defaultValue="all">
               <option value="all">All</option>
               <option value="read">Read</option>
               <option value="unread">Unread</option>
            </select>
         </div>
         <div>
             <button class="btn btn-success">Search</button>
         </div>
     </div>
</div>