MaterialPro Admin Template by WrapPixel

CAROUSEL

Previous Next

ACCORDION

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

CONTACT US

Enter Name

Enter Email address

Enter Message
List style

Toasts

THIS MONTH

$58,356

LAST MONTH

$48,356

Basic Toast

                                                        
                                                         <div class="bg-light p-3">
                                                            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-header">
                                                                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                                                                <strong class="me-auto">Bootstrap</strong>
                                                                <small>11 mins ago</small>
                                                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                              </div>
                                                              <div class="toast-body">
                                                                Hello, world! This is a toast message.
                                                              </div>
                                                            </div>
                                                        </div>

Hello, world! This is a toast message.

Translucent toast

                                                        
                                                          <div class="bg-light p-3">
                                                            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-header">
                                                                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                                                                <strong class="me-auto">Bootstrap</strong>
                                                                <small class="text-muted">11 mins ago</small>
                                                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                              </div>
                                                              <div class="toast-body">
                                                                Hello, world! This is a toast message.
                                                              </div>
                                                            </div>
                                                        </div>

Hello, world! This is a toast message.

Stacking toast

                                                        
                                                         <div class="bg-light p-3">
                                                            <div class="toast-container">
                                                              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                                                <div class="toast-header">
                                                                  <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                                                                  <strong class="me-auto">Bootstrap</strong>
                                                                  <small class="text-muted">just now</small>
                                                                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                                </div>
                                                                <div class="toast-body">
                                                                  See? Just like this.
                                                                </div>
                                                              </div>

                                                              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                                                <div class="toast-header">
                                                                  <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
                                                                  <strong class="me-auto">Bootstrap</strong>
                                                                  <small class="text-muted">2 seconds ago</small>
                                                                  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                                </div>
                                                                <div class="toast-body">
                                                                  Heads up, toasts will stack automatically
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

See? Just like this.

Heads up, toasts will stack automatically

Custom content

                                                        
                                                         <div class="bg-light p-3">
                                                            <div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                Hello, world! This is a toast message.
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <!-- 2 -->
                                                            <div class="toast mt-3" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                Hello, world! This is a toast message.
                                                                <div class="mt-2 pt-2 border-top">
                                                                  <button type="button" class="btn btn-light-info text-info font-weight-medium btn-sm">Take action</button>
                                                                  <button type="button" class="btn btn-light-danger text-danger font-weight-medium btn-sm" data-bs-dismiss="toast">Close</button>
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>

Hello, world! This is a toast message.

Solid Color schemes

                                                        
                                                          <div class="bg-light p-3">
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                        </div>

Hello, world! This is a toast message.

Light Color schemes

                                                        
                                                          <div class="bg-light p-3">
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-info font-weight-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-primary font-weight-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-danger font-weight-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-warning font-weight-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                            <div class="toast mb-2 d-flex align-items-center text-white bg-light-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                                              <div class="toast-body">
                                                                <div class="d-flex align-items-center text-success font-weight-medium">
                                                                    <i data-feather="info" class="fill-white feather-sm me-2"></i> Hello, world! This is a toast message.
                                                                </div>
                                                              </div>
                                                              <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
                                                            </div>
                                                        </div>

Hello, world! This is a toast message.

Placement

                                                        
                                                         <div class="bg-light p-3">
                                                            <form>
                                                              <div class="form-group mb-3">
                                                                <label for="selectToastPlacement">Toast placement</label>
                                                                <select class="form-select mt-2" id="selectToastPlacement">
                                                                  <option value="" selected>Select a position...</option>
                                                                  <option value="top-0 start-0">Top left</option>
                                                                  <option value="top-0 start-50 translate-middle-x">Top center</option>
                                                                  <option value="top-0 end-0">Top right</option>
                                                                  <option value="top-50 start-0 translate-middle-y">Middle left</option>
                                                                  <option value="top-50 start-50 translate-middle">Middle center</option>
                                                                  <option value="top-50 end-0 translate-middle-y">Middle right</option>
                                                                  <option value="bottom-0 start-0">Bottom left</option>
                                                                  <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
                                                                  <option value="bottom-0 end-0">Bottom right</option>
                                                                </select>
                                                              </div>
                                                            </form>
                                                            <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts" style="height: 250px;">
                                                              <div class="toast-container position-absolute p-3" id="toastPlacement">
                                                                <div class="toast">
                                                                  <div class="toast-header">
                                                                    <i data-feather="bar-chart-2" class="fill-white text-info feather-sm me-2"></i>
                                                                    <strong class="me-auto">Bootstrap</strong>
                                                                    <small>11 mins ago</small>
                                                                  </div>
                                                                  <div class="toast-body">
                                                                    Hello, world! This is a toast message.
                                                                  </div>
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>

Toast placement

Hello, world! This is a toast message.

Toasts

THIS MONTH

$58,356

LAST MONTH

$48,356

Basic Toast

Translucent toast

Stacking toast

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Custom content

Solid Color schemes

Light Color schemes

Placement

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

Accordion Item #1

Accordion Item #2

Accordion Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Toasts

THIS MONTH

$58,356

LAST MONTH

$48,356

Basic Toast

Translucent toast

Stacking toast

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Custom content

Solid Color schemes

Light Color schemes

Placement

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan