@extends('layouts.simple.master') @section('title', 'Offcanvas') @section('css') @endsection @section('main_content')

Offcanvas

  2. Ui Kits
  3. Offcanvas
Initial Offcanvas

Use the buttons below to show and hide an offcanvas element via javascript that toggles the show class on an element with the offcanvas class. You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.

Link with href
Main Offcanvas Title
Web Design

We build specialized websites for companies, list them on digital directories, and set up a sales funnel to boost ROI.

Content Marketing

Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives.

PPC

Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them.

UX Designer

The capacity to comprehend and experience other people's feelings is known as empathy. A positive consumer experience is prioritized by UX. The finest UX designers spend time studying individuals and their tendencies because of this. Designers may produce goods that genuinely engage and excite customers by having a thorough understanding of the end consumers.

<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Button with data-bs-target</button>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Link with href</a>
<div class="offcanvas offcanvas-start" id="offcanvasExample" tabindex="-1" aria-labelledby="offcanvasExampleLabel">
 <div class="offcanvas-header pb-0">
   <h5 class="offcanvas-title" id="offcanvasExampleLabel">Main Offcanvas Title</h5>
   <button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body custom-scrollbar">
   <div class="large-modal-header"><i data-feather="chevrons-right"></i>
     <h6>Web Design </h6>
   </div>
   <p class="modal-padding-space">We build specialized websites for companies, list them on digital directories, and set up a sales funnel to boost ROI.</p>
   <div class="large-modal-header"><i data-feather="chevrons-right"></i>
     <h6>Content Marketing </h6>
   </div>
   <p class="modal-padding-space">Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives.</p>
   <div class="large-modal-header"><i data-feather="chevrons-right"></i>
     <h6>PPC </h6>
   </div>
   <p class="modal-padding-space">Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them.</p>
   <div class="large-modal-header"><i data-feather="chevrons-right"></i>
     <h6>UX Designer </h6>
   </div>
   <p class="modal-padding-space">The capacity to comprehend and experience other people's feelings is known as empathy. A positive consumer experience is prioritized by UX. The finest UX designers spend time studying individuals and their tendencies because of this. Designers may produce goods that genuinely engage and excite customers by having a thorough understanding of the end consumers.</p>
 </div>
</div>
Offcanvas Directions

Use Offcanvas-* [top/end/bottom/start] class allows you to modify the offcanvas direction.

Offcanvas Top
@
Offcanvas End
Offcanvas Bottom
@
Offcanvas Start
<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 custom-input custom-scrollbar">
   <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 custom-input custom-scrollbar">
   <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 custom-input custom-scrollbar">
   <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 custom-input custom-scrollbar">
   <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>
Offcanvas Variations

Use data-bs-scroll attribute to enable <body> scrolling class and clicking outside of the offcanvas will not cause it to close if the backdrop is static.

Offcanvas Body Scrolling
Wed Designer

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.

Backdrop with Scrolling
Wed Designer

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.

Static Offcanvas
Wed Designer

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.

<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 custom-input">
   <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 custom-input">
   <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 custom-input">
   <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>
@endsection @section('scripts') @endsection