<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top Offcanvas</button>
<div class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1" aria-labelledby="offcanvasTopLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas Top</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <form class="row g-3">
     <div class="col-md-4">
       <label class="form-label" for="validationDefault03">First name</label>
       <input class="form-control" id="validationDefault03" type="text" value="Mark" required="">
     </div>
     <div class="col-md-4">
       <label class="form-label" for="validationDefault02">Last name</label>
       <input class="form-control" id="validationDefault02" type="text" value="Otto" required="">
     </div>
     <div class="col-md-4">
       <label class="form-label" for="validationDefaultUsername1">Username</label>
       <div class="input-group"><span class="input-group-text" id="inputGroupPrepend2">@</span>
         <input class="form-control" id="validationDefaultUsername1" type="text" aria-describedby="inputGroupPrepend2" required="">
       </div>
     </div>
     <div class="col-md-6">
       <label class="form-label" for="validationDefaultCity">City</label>
       <input class="form-control" id="validationDefaultCity" type="text" required="">
     </div>
     <div class="col-md-3">
       <label class="form-label" for="validationCountry">Country</label>
       <select class="form-select" id="validationCountry" required="">
         <option selected="" disabled="" value="">Choose...</option>
         <option>US </option>
         <option>UK </option>
         <option>Africa</option>
       </select>
     </div>
     <div class="col-md-3">
       <label class="form-label" for="validationZip">Zip</label>
       <input class="form-control" id="validationZip" type="text" required="">
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition4" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition4">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right Offcanvas</button>
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1" aria-labelledby="offcanvasRightLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas End</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <form class="row g-3">
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlInput1">Email</label>
       <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com">
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput2">Select Project</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">Select your projects</option>
         <option value="1">Project1</option>
         <option value="2">Project2</option>
         <option value="3">Project3</option>
       </select>
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">How many projects do you make?</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
       </select>
     </div>
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlTextarea1">External Notes</label>
       <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition5" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition5">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>
<button class="btn btn-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom Offcanvas</button>
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1" aria-labelledby="offcanvasBottomLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas Bottom</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <form class="row g-3">
     <div class="col-md-4">
       <label class="form-label" for="validationFirstName">First name</label>
       <input class="form-control" id="validationFirstName" type="text" value="Mark" required="">
     </div>
     <div class="col-md-4">
       <label class="form-label" for="validationDefault0">Last name</label>
       <input class="form-control" id="validationDefault0" type="text" value="Otto" required="">
     </div>
     <div class="col-md-4">
       <label class="form-label" for="validationDefaultUsername">Username</label>
       <div class="input-group"><span class="input-group-text" id="inputGroupPrepend3">@</span>
         <input class="form-control" id="validationDefaultUsername" type="text" aria-describedby="inputGroupPrepend3" required="">
       </div>
     </div>
     <div class="col-md-6">
       <label class="form-label" for="validationCity1">City</label>
       <input class="form-control" id="validationCity1" type="text" required="">
     </div>
     <div class="col-md-3">
       <label class="form-label" for="validationDefault04">Country</label>
       <select class="form-select" id="validationDefault04" required="">
         <option selected="" disabled="" value="">Choose...</option>
         <option>US </option>
         <option>UK </option>
         <option>Africa</option>
       </select>
     </div>
     <div class="col-md-3">
       <label class="form-label" for="validationDefault05">Zip</label>
       <input class="form-control" id="validationDefault05" type="text" required="">
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition6" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition6">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">Left Offcanvas</button>
<div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1" aria-labelledby="offcanvasLeftLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasLeftLabel">Offcanvas Start</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <form class="row g-3">
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlEmail">Email</label>
       <input class="form-control" id="exampleFormControlEmail" type="email" placeholder="name@example.com">
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput2">Select Project</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">Select your projects</option>
         <option value="1">Project1</option>
         <option value="2">Project2</option>
         <option value="3">Project3</option>
       </select>
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">How many projects do you make?</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
       </select>
     </div>
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlTextarea2">External Notes</label>
       <textarea class="form-control" id="exampleFormControlTextarea2" rows="4"></textarea>
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>

<button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable Body Scrolling</button>
<div class="offcanvas offcanvas-start" id="offcanvasScrolling" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas Body Scrolling</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <h6>Wed Designer</h6>
   <p>For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.</p>
   <form class="row g-3">
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlInput2">Email</label>
       <input class="form-control" id="exampleFormControlInput2" type="email" placeholder="name@example.com">
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput2">Select Project</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">Select your projects</option>
         <option value="1">Project1</option>
         <option value="2">Project2</option>
         <option value="3">Project3</option>
       </select>
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">How many projects do you make?</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
       </select>
     </div>
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlTextarea3">External Notes</label>
       <textarea class="form-control" id="exampleFormControlTextarea3" rows="4"></textarea>
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition1" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition1">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>
<button class="btn btn-warning" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable Both Scrolling & Backdrop</button>
<div class="offcanvas offcanvas-start" id="offcanvasWithBothOptions" data-bs-scroll="true" tabindex="-1" aria-labelledby="offcanvasWithBothOptionsLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with Scrolling</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <h6>Wed Designer</h6>
   <p>For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.</p>
   <form class="row g-3">
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlInput3">Email</label>
       <input class="form-control" id="exampleFormControlInput3" type="email" placeholder="name@example.com">
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput2">Select Project</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">Select your projects</option>
         <option value="1">Project1</option>
         <option value="2">Project2</option>
         <option value="3">Project3</option>
       </select>
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">How many projects do you make?</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
       </select>
     </div>
     <div class="col-12"> 
       <label class="form-label" for="externalNotes">External Notes</label>
       <textarea class="form-control" id="externalNotes" rows="4"></textarea>
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition2" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition2">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>
<button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Toggle Static Offcanvas</button>
<div class="offcanvas offcanvas-start" id="staticBackdrop" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="staticBackdropLabel">Static Offcanvas</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
   <h6>Wed Designer</h6>
   <p>For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience.</p>
   <form class="row g-3">
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlInput4">Email</label>
       <input class="form-control" id="exampleFormControlInput4" type="email" placeholder="name@example.com">
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput2">Select Project</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">Select your projects</option>
         <option value="1">Project1</option>
         <option value="2">Project2</option>
         <option value="3">Project3</option>
       </select>
     </div>
     <div class="col-12">
       <label class="form-label" for="exampleFormControlInput3">Project Counts</label>
       <select class="form-select" aria-label="Default select example">
         <option selected="">How many projects do you make?</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
       </select>
     </div>
     <div class="col-12"> 
       <label class="form-label" for="exampleFormControlTextarea4">External Notes</label>
       <textarea class="form-control" id="exampleFormControlTextarea4" rows="4"></textarea>
     </div>
     <div class="col-12">
       <div class="form-check checkbox-checked">
         <input class="form-check-input" id="termsCondition3" type="checkbox" value="" required="">
         <label class="form-check-label" for="termsCondition3">Agree to terms and conditions</label>
       </div>
     </div>
     <div class="col-12">
       <button class="btn btn-light me-2" type="submit" data-bs-dismiss="offcanvas" aria-label="Close">Cancel</button>
       <button class="btn btn-primary" type="submit">Submit</button>
     </div>
   </form>
 </div>
</div>