Xtreme admin Template - The Ultimate Multipurpose admin template

#### Card with Image

For the code click on above code icon

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

                                    <!-- Card -->
                                    <div class="card">
                                        <img class="card-img-top img-responsive" src="../../assets/images/big/img1.jpg" alt="Card image cap">
                                        <div class="card-body">
                                            <h4 class="card-title">Card title</h4>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                            <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                                        </div>
                                    </div>
                                    <!-- Card -->

#### Content types

The building block of a card is the `.card` `.card-body` Use it whenever you need a padded section within a card.

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

                             <div class="card">
                                <div class="card-body collapse show">
                                    <h4 class="card-title">Special title treatment</h4>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                </div>
                            </div>

#### Titles, text, and links

Card titles are used by adding `.card-title` & `.card-subtitle` for subtitle of card.

#### Card title

##### Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Card title</h4>
                                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    <a href="javascript:void(0)" class="card-link">Card link</a>
                                    <a href="javascript:void(0)" class="card-link">Another link</a>
                                </div>
                            </div>

#### Header and footer

Add an optional header and/or footer within a card.

Featured

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                            <!-- Card -->
                            <div class="card">
                                <div class="card-header">
                                    Featured
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">Special title treatment</h4>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                            <!-- Card -->

#### Header and footer

Add an optional header and/or footer within a card.

Featured

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                            <!-- Card -->
                            <div class="card text-center">
                                <div class="card-header">
                                    Featured
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">Special title treatment</h4>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="javascript:void(0)" class="btn btn-info">Go somewhere</a>
                                </div>
                                <div class="card-footer text-muted">
                                    2 days ago
                                </div>
                            </div>
                            <!-- Card -->

#### Size Using grid markup

Using the grid, wrap cards in columns and rows as needed.`.col-1 to .col-12`

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                            <div class="card">
                                <div class="card-body">
                                    <h3 class="card-title">Special title treatment</h3>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="javascript:void(0)" class="btn btn-success">Go somewhere</a>
                                </div>
                            </div>

#### Text alignment

You can quickly change the text alignment`.text-center .text-right`.

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="card-title">Special title treatment</h4>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <a href="javascript:void(0)" class="btn btn-info">Go somewhere</a>
                                        </div>
                                    </div>

                                    <div class="card text-center">
                                        <div class="card-body">
                                            <h4 class="card-title">Special title treatment</h4>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                                        </div>
                                    </div>

                                    <div class="card text-right">
                                        <div class="card-body">
                                            <h4 class="card-title">Special title treatment</h4>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                        </div>
                                    </div>

#### Using utilities

Using the utility, you can give direct width class to card like`.w-25, w-50, w-75, w-100`

### This card has width of 75%

With supporting text below as a natural lead-in to additional content.

Go somewhere

### This card has width of 50%

With supporting text below as a natural lead-in to additional content.

Go somewhere

                            <div class="card w-75">
                                <div class="card-body">
                                    <h3 class="card-title">This card has width of 75%</h3>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="javascript:void(0)" class="btn btn-danger">Go somewhere</a>
                                </div>
                            </div>
                            <div class="card w-50">
                                <div class="card-body">
                                    <h3 class="card-title">This card has width of 50%</h3>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>

#### Size Using grid markup

Using the grid, wrap cards in columns and rows as needed.`.col-1 to .col-12`

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                    <div class="card text-center">
                                        <div class="card-header">
                                            <ul class="nav nav-tabs card-header-tabs">
                                                <li class="nav-item">
                                                    <a class="nav-link active" href="javascript:void(0)">Active</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="javascript:void(0)">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="card-body">
                                            <h4 class="card-title">Special title treatment</h4>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                        </div>
                                    </div>

                                    <div class="card text-center">
                                        <div class="card-header">
                                            <ul class="nav nav-pills card-header-pills">
                                                <li class="nav-item">
                                                    <a class="nav-link active" href="javascript:void(0)">Active</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="javascript:void(0)">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="card-body">
                                            <h4 class="card-title">Special title treatment</h4>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <a href="javascript:void(0)" class="btn btn-info">Go somewhere</a>
                                        </div>
                                        </div>
                                    </div>

#### Card styles

Cards include various options for customizing their backgrounds, borders, and color.`.card-primary info, warning, danger`

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                        <div class="card text-white bg-dark">
                                            <div class="card-header">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                                            </div>
                                        </div>

                                        <div class="card text-white bg-info">
                                            <div class="card-header">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-dark">Go somewhere</a>
                                            </div>
                                        </div>

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                        <div class="card text-white bg-primary">
                                            <div class="card-header">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-dark">Go somewhere</a>
                                            </div>
                                        </div>

                                        <div class="card text-white bg-danger">
                                            <div class="card-header">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-dark">Go somewhere</a>
                                            </div>
                                        </div>

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                        <div class="card text-white bg-warning">
                                            <div class="card-header">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-dark">Go somewhere</a>
                                            </div>
                                        </div>

                                        <div class="card text-white bg-success">
                                            <div class="card-header">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-dark">Go somewhere</a>
                                            </div>
                                        </div>

#### Card styles

Cards include various options for customizing their backgrounds, borders, and color.`.card-primary info, warning, danger`

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                        <div class="card border-dark">
                                            <div class="card-header bg-dark">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                                            </div>
                                        </div>

                                        <div class="card border-info">
                                            <div class="card-header bg-info">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                            </div>
                                        </div>

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                        <div class="card border-primary">
                                            <div class="card-header bg-primary">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                            </div>
                                        </div>

                                         <div class="card border-danger">
                                            <div class="card-header bg-danger">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                            </div>
                                        </div>

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card Title

### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                        <div class="card border-warning">
                                            <div class="card-header bg-warning">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                            </div>
                                        </div>

                                        <div class="card border-success">
                                            <div class="card-header bg-success">
                                                <h4 class="m-b-0 text-white">Card Title</h4></div>
                                            <div class="card-body">
                                                <h3 class="card-title">Special title treatment</h3>
                                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
                                            </div>
                                        </div>

#### Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns.

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

#### Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

                                    <div class="card-group">
                                        <div class="card">
                                            <img class="card-img-top img-responsive" src="../../assets/images/big/img1.jpg" alt="Card image cap">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title</h4>
                                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <img class="card-img-top img-responsive" src="../../assets/images/big/img2.jpg" alt="Card image cap">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title</h4>
                                                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <img class="card-img-top img-responsive" src="../../assets/images/big/img3.jpg" alt="Card image cap">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title</h4>
                                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div>
                                        </div>
                                    </div>

#### Card With action

With action elements.

Title

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

                                    <div class="card">
                                        <div class="card-header">
                                            Title
                                            <div class="card-actions">
                                                <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                                                <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                                                <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="card-body collapse show">
                                            <h4 class="card-title">Special title treatment</h4>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                        </div>
                                    </div>

#### Card with Deck

Use card groups to render cards as a single, attached element with equal width and height columns.

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

#### Card title

This card has supporting text below as a natural.

Last updated 3 mins ago

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. supporting text below as a natural lead-in to additional content

Last updated 3 mins ago

                                    <div class="card">
                                        <img class="card-img-top img-responsive" src="../../assets/images/big/img1.jpg" alt="Card image cap">
                                        <div class="card-body">
                                            <h4 class="card-title">Card title</h4>
                                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                        </div>
                                    </div>

#### Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in `card-columns`

#### Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

#### Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

#### Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

                                    <div class="card-columns">
                                        <div class="card">
                                            <img class="card-img-top img-fluid" src="../../assets/images/big/img6.jpg" alt="Card image cap">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title that wraps to a new line</h4>
                                                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                            </div>
                                        </div>
                                        <div class="card p-3">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>
                                                <small class="text-muted">
                                          Someone famous in <cite title="Source Title">Source Title</cite>
                                        </small>
                                            </footer>
                                        </div>
                                        <div class="card">
                                            <img class="card-img-top img-fluid" src="../../assets/images/big/img5.jpg" alt="Card image cap">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title</h4>
                                                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div>
                                        </div>
                                        <div class="card bg-primary p-3 text-center text-white">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                                            <footer>
                                                <small>
                                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                                </small>
                                            </footer>
                                        </div>
                                        <div class="card text-center">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title</h4>
                                                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <img class="card-img img-fluid" src="../../assets/images/big/img4.jpg" alt="Card image">
                                        </div>
                                        <div class="card p-3 text-right">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>
                                                <small class="text-muted">
                                          Someone famous in <cite title="Source Title">Source Title</cite>
                                        </small>
                                            </footer>
                                        </div>
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="card-title">Card title</h4>
                                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div>
                                        </div>
                                    </div>

##### Layout Settings

Dark Theme
Fixed Sidebar
Fixed Header
Boxed Layout

##### Logo Backgrounds

##### Navbar Backgrounds

##### Sidebar Backgrounds

- ##### Pavan kumar

  Just see the my admin! 9:30 AM

  ##### Sonu Nigam

  I've sung a song! See you at 9:10 AM

  ##### Arijit Sinh

  I am a singer! 9:08 AM

  ##### Nirav Joshi

  Just see the my admin! 9:02 AM

  ##### Sunil Joshi

  Just see the my admin! 9:02 AM

  ##### Akshay Kumar

  Just see the my admin! 9:02 AM

  ##### Pavan kumar

  Just see the my admin! 9:02 AM

  ##### Varun Dhavan

  Just see the my admin! 9:02 AM

###### Activity Timeline

Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger
Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger