Therichpost

Year: 2021

  • Angular 11 Bootstrap 4 Social Network User Profile

    Angular 11 Bootstrap 4 Social Network User Profile

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 11 Bootstrap 4 Social Network User Profile.

    Angular 11 came and if you are new then you must check below two links:

    1. Angular11 Basic Tutorials

    Friends now I proceed onwards and here is the working code snippet for Angular 11 Bootstrap 4 Social Network User Profile Page Working Demo and please use carefully this to avoid the mistakes:

    Angular 11 Bootstrap 4 Social Network User Profile
    Angular 11 Bootstrap 4

    1. Firstly friends we need fresh angular 11 setup and for this we need to run below commands but if you already have angular 11 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

    npm install -g @angular/cli 

ng new angulardashboard //Create new Angular Project

cd angulardashboard // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

     

    2. Now friends, here we need to run below commands into our project terminal to install bootstrap and jquery modules into our angular application:

    npm install --save bootstrap

     

    3. Now friends, here we need to add below  into our angular.json file:

    ...
 "styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             
              
            ],
...

     

    4. Now friends we just need to add below code into src/app/app.component.html file to get final out on the web browser:

    <div class="container">
    <div class="profile-page tx-13">
        <div class="row">
            <div class="col-12 grid-margin">
                <div class="profile-header">
                    <div class="cover">
                        <div class="gray-shade"></div>
                      
                        <div class="cover-body d-flex justify-content-between align-items-center">
                            <div>
                                <img class="profile-pic" src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" alt="profile">
                                <span class="profile-name">Jassa Jas</span>
                            </div>
                            <div class="d-none d-md-block">
                                <button class="btn btn-primary btn-icon-text btn-edit-profile">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit btn-icon-prepend">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                    </svg> Edit profile
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="header-links">
                        <ul class="links d-flex align-items-center mt-3 mt-md-0">
                            <li class="header-link-item d-flex align-items-center active">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-columns mr-1 icon-md">
                                    <path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path>
                                </svg>
                                <a class="pt-1px d-none d-md-block" href="#">Timeline</a>
                            </li>
                            <li class="header-link-item ml-3 pl-3 border-left d-flex align-items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user mr-1 icon-md">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                                <a class="pt-1px d-none d-md-block" href="#">About</a>
                            </li>
                            <li class="header-link-item ml-3 pl-3 border-left d-flex align-items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users mr-1 icon-md">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                <a class="pt-1px d-none d-md-block" href="#">Friends <span class="text-muted tx-12">3,765</span></a>
                            </li>
                            <li class="header-link-item ml-3 pl-3 border-left d-flex align-items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image mr-1 icon-md">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                    <polyline points="21 15 16 10 5 21"></polyline>
                                </svg>
                                <a class="pt-1px d-none d-md-block" href="#">Photos</a>
                            </li>
                            <li class="header-link-item ml-3 pl-3 border-left d-flex align-items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video mr-1 icon-md">
                                    <polygon points="23 7 16 12 23 17 23 7"></polygon>
                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                                </svg>
                                <a class="pt-1px d-none d-md-block" href="#">Videos</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row profile-body">
            <!-- left wrapper start -->
            <div class="d-none d-md-block col-md-4 col-xl-3 left-wrapper">
                <div class="card rounded">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="card-title mb-0">About</h6>
                            <div class="dropdown">
                                <button class="btn p-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal icon-lg text-muted pb-3px">
                                        <circle cx="12" cy="12" r="1"></circle>
                                        <circle cx="19" cy="12" r="1"></circle>
                                        <circle cx="5" cy="12" r="1"></circle>
                                    </svg>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item d-flex align-items-center" href="#">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 icon-sm mr-2">
                                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                        </svg> <span class="">Edit</span></a>
                                    <a class="dropdown-item d-flex align-items-center" href="#">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-branch icon-sm mr-2">
                                            <line x1="6" y1="3" x2="6" y2="15"></line>
                                            <circle cx="18" cy="6" r="3"></circle>
                                            <circle cx="6" cy="18" r="3"></circle>
                                            <path d="M18 9a9 9 0 0 1-9 9"></path>
                                        </svg> <span class="">Update</span></a>
                                    <a class="dropdown-item d-flex align-items-center" href="#">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye icon-sm mr-2">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                            <circle cx="12" cy="12" r="3"></circle>
                                        </svg> <span class="">View all</span></a>
                                </div>
                            </div>
                        </div>
                        <p>Hi! I'm Jassa.</p>
                        <div class="mt-3">
                            <label class="tx-11 font-weight-bold mb-0 text-uppercase">Joined:</label>
                            <p class="text-muted">November 15, 2017</p>
                        </div>
                        <div class="mt-3">
                            <label class="tx-11 font-weight-bold mb-0 text-uppercase">Lives:</label>
                            <p class="text-muted">New York, USA</p>
                        </div>
                        <div class="mt-3">
                            <label class="tx-11 font-weight-bold mb-0 text-uppercase">Email:</label>
                            <p class="text-muted">therichposts@gmail.com</p>
                        </div>
                        <div class="mt-3">
                            <label class="tx-11 font-weight-bold mb-0 text-uppercase">Website:</label>
                            <p class="text-muted">www.therichpost.com</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- left wrapper end -->
            <!-- middle wrapper start -->
            <div class="col-md-8 col-xl-6 middle-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin">
                        <div class="card rounded">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" alt="">
                                        <div class="ml-2">
                                            <p>Jassa</p>
                                            <p class="tx-11 text-muted">1 min ago</p>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn p-0" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal icon-lg pb-3px">
                                                <circle cx="12" cy="12" r="1"></circle>
                                                <circle cx="19" cy="12" r="1"></circle>
                                                <circle cx="5" cy="12" r="1"></circle>
                                            </svg>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-meh icon-sm mr-2">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="8" y1="15" x2="16" y2="15"></line>
                                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                                </svg> <span class="">Unfollow</span></a>
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-right-up icon-sm mr-2">
                                                    <polyline points="10 9 15 4 20 9"></polyline>
                                                    <path d="M4 20h7a4 4 0 0 0 4-4V4"></path>
                                                </svg> <span class="">Go to post</span></a>
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2 icon-sm mr-2">
                                                    <circle cx="18" cy="5" r="3"></circle>
                                                    <circle cx="6" cy="12" r="3"></circle>
                                                    <circle cx="18" cy="19" r="3"></circle>
                                                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                                                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                                                </svg> <span class="">Share</span></a>
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy icon-sm mr-2">
                                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                                </svg> <span class="">Copy link</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minima delectus nemo unde quae recusandae assumenda.</p>
                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" alt="">
                            </div>
                            <div class="card-footer">
                                <div class="d-flex post-actions">
                                    <a href="javascript:;" class="d-flex align-items-center text-muted mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart icon-md">
                                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                        </svg>
                                        <p class="d-none d-md-block ml-2">Like</p>
                                    </a>
                                    <a href="javascript:;" class="d-flex align-items-center text-muted mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square icon-md">
                                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                                        </svg>
                                        <p class="d-none d-md-block ml-2">Comment</p>
                                    </a>
                                    <a href="javascript:;" class="d-flex align-items-center text-muted">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share icon-md">
                                            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
                                            <polyline points="16 6 12 2 8 6"></polyline>
                                            <line x1="12" y1="2" x2="12" y2="15"></line>
                                        </svg>
                                        <p class="d-none d-md-block ml-2">Share</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card rounded">
                            <div class="card-header">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">5 min ago</p>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn p-0" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal icon-lg pb-3px">
                                                <circle cx="12" cy="12" r="1"></circle>
                                                <circle cx="19" cy="12" r="1"></circle>
                                                <circle cx="5" cy="12" r="1"></circle>
                                            </svg>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-meh icon-sm mr-2">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="8" y1="15" x2="16" y2="15"></line>
                                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                                </svg> <span class="">Unfollow</span></a>
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-right-up icon-sm mr-2">
                                                    <polyline points="10 9 15 4 20 9"></polyline>
                                                    <path d="M4 20h7a4 4 0 0 0 4-4V4"></path>
                                                </svg> <span class="">Go to post</span></a>
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2 icon-sm mr-2">
                                                    <circle cx="18" cy="5" r="3"></circle>
                                                    <circle cx="6" cy="12" r="3"></circle>
                                                    <circle cx="18" cy="19" r="3"></circle>
                                                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                                                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                                                </svg> <span class="">Share</span></a>
                                            <a class="dropdown-item d-flex align-items-center" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy icon-sm mr-2">
                                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                                </svg> <span class="">Copy link</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                
                            </div>
                            <div class="card-footer">
                                <div class="d-flex post-actions">
                                    <a href="javascript:;" class="d-flex align-items-center text-muted mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart icon-md">
                                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                        </svg>
                                        <p class="d-none d-md-block ml-2">Like</p>
                                    </a>
                                    <a href="javascript:;" class="d-flex align-items-center text-muted mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square icon-md">
                                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                                        </svg>
                                        <p class="d-none d-md-block ml-2">Comment</p>
                                    </a>
                                    <a href="javascript:;" class="d-flex align-items-center text-muted">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share icon-md">
                                            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
                                            <polyline points="16 6 12 2 8 6"></polyline>
                                            <line x1="12" y1="2" x2="12" y2="15"></line>
                                        </svg>
                                        <p class="d-none d-md-block ml-2">Share</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- middle wrapper end -->
            <!-- right wrapper start -->
            <div class="d-none d-xl-block col-xl-3 right-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin">
                        <div class="card rounded">
                            <div class="card-body">
                                <h6 class="card-title">latest photos</h6>
                                <div class="latest-photos">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <figure>
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure>
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure>
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure>
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure>
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure>
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure class="mb-0">
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure class="mb-0">
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" alt="">
                                            </figure>
                                        </div>
                                        <div class="col-md-4">
                                            <figure class="mb-0">
                                                <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/03/avatar9.png" alt="">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 grid-margin">
                        <div class="card rounded">
                            <div class="card-body">
                                <h6 class="card-title">suggestions for you</h6>
                                <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                                    <div class="d-flex align-items-center hover-pointer">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">12 Mutual Friends</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" data-toggle="tooltip" title="" data-original-title="Connect">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="8.5" cy="7" r="4"></circle>
                                            <line x1="20" y1="8" x2="20" y2="14"></line>
                                            <line x1="23" y1="11" x2="17" y2="11"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                                    <div class="d-flex align-items-center hover-pointer">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">12 Mutual Friends</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" data-toggle="tooltip" title="" data-original-title="Connect">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="8.5" cy="7" r="4"></circle>
                                            <line x1="20" y1="8" x2="20" y2="14"></line>
                                            <line x1="23" y1="11" x2="17" y2="11"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                                    <div class="d-flex align-items-center hover-pointer">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">12 Mutual Friends</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" data-toggle="tooltip" title="" data-original-title="Connect">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="8.5" cy="7" r="4"></circle>
                                            <line x1="20" y1="8" x2="20" y2="14"></line>
                                            <line x1="23" y1="11" x2="17" y2="11"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                                    <div class="d-flex align-items-center hover-pointer">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">12 Mutual Friends</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" data-toggle="tooltip" title="" data-original-title="Connect">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="8.5" cy="7" r="4"></circle>
                                            <line x1="20" y1="8" x2="20" y2="14"></line>
                                            <line x1="23" y1="11" x2="17" y2="11"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
                                    <div class="d-flex align-items-center hover-pointer">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">12 Mutual Friends</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" data-toggle="tooltip" title="" data-original-title="Connect">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="8.5" cy="7" r="4"></circle>
                                            <line x1="20" y1="8" x2="20" y2="14"></line>
                                            <line x1="23" y1="11" x2="17" y2="11"></line>
                                        </svg>
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="d-flex align-items-center hover-pointer">
                                        <img class="img-xs rounded-circle" src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="">
                                        <div class="ml-2">
                                            <p>jassa</p>
                                            <p class="tx-11 text-muted">12 Mutual Friends</p>
                                        </div>
                                    </div>
                                    <button class="btn btn-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" data-toggle="tooltip" title="" data-original-title="Connect">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="8.5" cy="7" r="4"></circle>
                                            <line x1="20" y1="8" x2="20" y2="14"></line>
                                            <line x1="23" y1="11" x2="17" y2="11"></line>
                                        </svg>
                                    </button>
                                </div>
    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- right wrapper end -->
        </div>
    </div>
    </div>

     

    5. Now friends we just need to add below code into src/app/app.component.css file:

    body{
  background-color: #f9fafb;
  margin-top:20px;}

.profile-page .profile-header {
  box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
  border: 1px solid #f2f4f9;
}

.profile-page .profile-header .cover {
  position: relative;
  border-radius: .25rem .25rem 0 0;
}


.profile-page .profile-header .cover figure {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .profile-page .profile-header .cover figure {
      height: 110px;
      overflow: hidden;
  }
}

@media (min-width: 2400px) {
  .profile-page .profile-header .cover figure {
      height: 280px;
      overflow: hidden;
  }
}

.profile-page .profile-header .cover {
  border-radius: .25rem .25rem 0 0;
  width: 100%;
  height: 250px;
  background-color:aqua;
}

@media (max-width: 767px) {
  .profile-page .profile-header .cover figure img {
      -webkit-transform: scale(2);
      transform: scale(2);
      margin-top: 15px;
  }
}

@media (min-width: 2400px) {
  .profile-page .profile-header .cover figure img {
      margin-top: -55px;
  }
}

.profile-page .profile-header .cover .gray-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(rgba(255, 255, 255, 0.1), #fff 99%);
}

.profile-page .profile-header .cover .cover-body {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 0 20px;
}

.profile-page .profile-header .cover .cover-body .profile-pic {
  border-radius: 50%;
  width: 100px;
}

@media (max-width: 767px) {
  .profile-page .profile-header .cover .cover-body .profile-pic {
      width: 70px;
  }
}

.profile-page .profile-header .cover .cover-body .profile-name {
  font-size: 20px;
  font-weight: 600;
  margin-left: 17px;
}

.profile-page .profile-header .header-links {
  padding: 15px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  background: #fff;
  border-radius: 0 0 .25rem .25rem;
}

.profile-page .profile-header .header-links ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.profile-page .profile-header .header-links ul li a {
  color: #000;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.profile-page .profile-header .header-links ul li:hover,
.profile-page .profile-header .header-links ul li.active {
  color: #727cf5;
}

.profile-page .profile-header .header-links ul li:hover a,
.profile-page .profile-header .header-links ul li.active a {
  color: #727cf5;
}

.profile-page .profile-body .left-wrapper .social-links a {
  width: 30px;
  height: 30px;
}

.profile-page .profile-body .right-wrapper .latest-photos > .row {
  margin-right: 0;
  margin-left: 0;
}

.profile-page .profile-body .right-wrapper .latest-photos > .row > div {
  padding-left: 3px;
  padding-right: 3px;
}

.profile-page .profile-body .right-wrapper .latest-photos > .row > div figure {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  margin-bottom: 6px;
}

.profile-page .profile-body .right-wrapper .latest-photos > .row > div figure:hover {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

.profile-page .profile-body .right-wrapper .latest-photos > .row > div figure img {
  border-radius: .25rem;
}

.rtl .profile-page .profile-header .cover .cover-body .profile-name {
  margin-left: 0;
  margin-right: 17px;
}
.img-xs {
  width: 37px;
  height: 37px;
}
.rounded-circle {
  border-radius: 50% !important;
}
img {
  vertical-align: middle;
  border-style: none;
}

.card-header:first-child {
  border-radius: 0 0 0 0;
}
.card-header {
  padding: 0.875rem 1.5rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid #f2f4f9;
}

.card-footer:last-child {
  border-radius: 0 0 0 0;
}
.card-footer {
  padding: 0.875rem 1.5rem;
  background-color: rgba(0, 0, 0, 0);
  border-top: 1px solid #f2f4f9;
}

.grid-margin {
  margin-bottom: 1rem;
}

.card {
  box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
  -webkit-box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
  -moz-box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
  -ms-box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
}
.rounded {
  border-radius: 0.25rem !important;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #f2f4f9;
  border-radius: 0.25rem;
}

     

    Friends in the end must run ng serve command into your terminal to run the angular 11 project.

    Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

    Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

    Jassa

    Thanks

  • Angular 11 Multiselect Dropdown Working

    Angular 11 Multiselect Dropdown Working

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 11 Multiselect Dropdown Working.

    Angular Multi Select

    Angular 11 came and if you are new then you must check below two links:

    1. Angular11 Basic Tutorials

    Friends now I proceed onwards and here is the working code snippet for Angular 11 Multiselect Dropdown Working and please use carefully this to avoid the mistakes:

    Angular 11 Multiselect Dropdown Working
    Angular 11 Multiselect

    1. Firstly friends we need fresh angular 11 setup and for this we need to run below commands but if you already have angular 11 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

    npm install -g @angular/cli 

ng new angularbootstrap //Create new Angular Project

cd angularbootstrap // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

     

    2. Now friends, here we need to run below commands into our project terminal to install bootstrap and jquery modules into our angular application:

    npm install --save bootstrap

npm i jquery --save

npm i bootstrap-select

npm install popper.js --save

     

    3. Now friends, here we need to add below  into our angular.json file:

    ...
 "styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             
              
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
              "src/assets/select.js"
            ]
...

     

    4. Now friends we need to create new file inside src/assets folder name select.js and add below code inside it:

    $(document).ready(function() {
    
    
     $('.selectpicker').selectpicker();
    
  });

     

    5. Now friends we just need to add below code into src/app/app.component.html file to get final out on the web browser:

    <!-- Multiselect dropdown -->
         <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100">
             <option>India</option>
             <option>United Kingdom</option>
             <option>United States</option>
             <option>France</option>
             <option>Germany</option>
             <option>Italy</option>
  </select>
<!-- End -->

    6. Now friends we just need to add below code into src/index.html file:

    ...
<head>
... 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

     

    Friends in the end must run ng serve command into your terminal to run the angular 11 project.

    Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

    Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

    Jassa

    Thanks

  • Laravel 8 Bootstrap 4 Modern Price Section

    Laravel 8 Bootstrap 4 Modern Price Section

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Laravel 8 Bootstrap 4 Modern Price Section.

    Laravel 8 Bootstrap 4 Modern Price Section
    Laravel 8 Bootstrap 4

    Guys if you are new in Laravel8 the please check below link for Laravel basics information:

    Laravel Basics Tutorial for beginners

    Here you can check more Laravel 8 Working live Demos:

    Laravel Demos

    Here is the code snippet for Laravel 8 Bootstrap 4 Modern Price Section Page and please use carefully and avoid the mistakes.:

    1. Friends here is the working code below and you can add into your resources/views/ welcome.blade.php file:

    Guys for demo purpose, I have used this code into my welcome blade and I have used Direct CDN to make working example.

    ...
    <head>
    ...
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
              
      
  
  
  
  
    <style>
  body{
    background:#eee!important;
    margin-top:20px;}

/* ===== PRICING PAGE ===== */
.price-tabs {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
          box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
  display: inline-block;
  padding: 7px;
  border-radius: 40px;
  border: 1px solid #00b5ec;
  margin-bottom: 45px;
}

@media (min-width: 768px) {
  .price-tabs {
    margin-bottom: 60px;
  }
}

.price-tabs .nav-link {
  color: #00b5ec;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 12px 35px;
  display: inline-block;
  text-transform: capitalize;
  border-radius: 40px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .price-tabs .nav-link {
    padding: 12px 40px;
  }
}

.price-tabs .nav-link.active {
  background-color: #00b5ec;
  color: #fff;
}

.price-item {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  border-radius: 10px;
}

@media (min-width: 768px) {
  .price-item {
    margin: 0 20px;
    padding-top: 20px;
  }
}

.price-item .price-top {
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  padding: 50px 0 25px;
  background-color: #00b5ec;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  margin-bottom: 33px;
}

@media (min-width: 768px) {
  .price-item .price-top {
    margin: 0 -20px;
    border-radius: 20px;
  }
}

.price-item .price-top:after {
  height: 50px;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background-color: #00b5ec;
  position: absolute;
  content: '';
  left: 0;
  bottom: -17px;
  z-index: -1;
  -webkit-transform: skewY(5deg);
          transform: skewY(5deg);
  -webkit-box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
          box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
}

@media (min-width: 768px) {
  .price-item .price-top:after {
    border-radius: 0 0 20px 20px;
  }
}

.price-item .price-top * {
  color: #fff;
}

.price-item .price-top h2 {
  font-weight: 700;
}

.price-item .price-top h2 sup {
  top: 13px;
  left: -5px;
  font-size: 0.35em;
  font-weight: 500;
  vertical-align: top;
}

.price-item .price-content {
  padding: 30px;
  padding-bottom: 40px;
}

.price-item .price-content li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

@media (min-width: 992px) {
  .price-item .price-content li {
    padding-left: 28px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .price-item .price-content li i {
    position: absolute;
    left: 0;
    top: 3px;
  }
}

.price-item .price-content .zmdi-check {
  color: #28a745;
}

.price-item .price-content .zmdi-close {
  color: #f00;
}

.popular {
  background-color: #00b5ec;
}

.popular .price-top {
  background-color: #fff;
}

.popular .price-top:after {
  background-color: #fff;
}

.popular .price-top h4 {
  color: #101f41;
}

.popular .price-top h2, .popular .price-top span, .popular .price-top sup {
  color: #00b5ec;
}

.popular .price-content ul *,
.popular .price-content ul .zmdi-close, .popular .price-content ul .zmdi-check {
  color: #fff !important;
}
    </style>

   
                
    </head>
    <body>
   ...
  <div class="container">
    <div class="text-center">
        <div class="nav price-tabs" role="tablist">
            <a class="nav-link active" href="#yearly" role="tab" data-toggle="tab">Yearly</a>
            <a class="nav-link" href="#monthly" role="tab" data-toggle="tab">Monthly</a>
        </div>
    </div>
    <div class="tab-content wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
        <div role="tabpanel" class="tab-pane fade show active" id="yearly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>299</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>399</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="monthly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>29</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>59</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        
    </body>
</html>

     

    Friends now we are done and please run your Laravel 8 project and see the Pricing Table Section Working Demo and If you have any kind of query or suggestion or any requirement then feel free to comment below.

    Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. I will come with more Laravel 8 demos.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

    Jassa

    Thanks

  • Vuejs Bootstrap 4 Modern Price Section

    Vuejs Bootstrap 4 Modern Price Section

    Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vuejs Bootstrap 4 Modern Price Section.

    Vuejs Bootstrap 4 Modern Price Section
    Vue js Bootstrap 4

    Vue3 came and if you are new then you must check below link::
    Vuejs

    Friends now I proceed onwards and here is the code snippet for Vuejs Bootstrap 4 Modern Price Section and please use this carefully to avoid the mistakes:

    1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

    Guys you can skip this first step if you already have vuejs fresh setup:

    npm install -g @vue/cli

vue create vuepage

cd vuepage

npm install bootstrap --save

npm i jquery --save

npm run serve //http://localhost:8080/

    2. Finally friends we need to add below code into our src/App.vue file to get final output on web browser:

    <template>
 <div class="container">
    <div class="text-center">
        <div class="nav price-tabs" role="tablist">
            <a class="nav-link active" href="#yearly" role="tab" data-toggle="tab">Yearly</a>
            <a class="nav-link" href="#monthly" role="tab" data-toggle="tab">Monthly</a>
        </div>
    </div>
    <div class="tab-content wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
        <div role="tabpanel" class="tab-pane fade show active" id="yearly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>299</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>399</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="monthly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>29</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>59</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</template>
<script>
//Bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './App.css';

export default {
 //
  
  
}
</script>

     

    3. Now guys we need to add below code into our src/App.css file:

    body{
    background:#eee!important;
    margin-top:20px;}

/* ===== PRICING PAGE ===== */
.price-tabs {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
          box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
  display: inline-block;
  padding: 7px;
  border-radius: 40px;
  border: 1px solid #00b5ec;
  margin-bottom: 45px;
}

@media (min-width: 768px) {
  .price-tabs {
    margin-bottom: 60px;
  }
}

.price-tabs .nav-link {
  color: #00b5ec;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 12px 35px;
  display: inline-block;
  text-transform: capitalize;
  border-radius: 40px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .price-tabs .nav-link {
    padding: 12px 40px;
  }
}

.price-tabs .nav-link.active {
  background-color: #00b5ec;
  color: #fff;
}

.price-item {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  border-radius: 10px;
}

@media (min-width: 768px) {
  .price-item {
    margin: 0 20px;
    padding-top: 20px;
  }
}

.price-item .price-top {
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  padding: 50px 0 25px;
  background-color: #00b5ec;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  margin-bottom: 33px;
}

@media (min-width: 768px) {
  .price-item .price-top {
    margin: 0 -20px;
    border-radius: 20px;
  }
}

.price-item .price-top:after {
  height: 50px;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background-color: #00b5ec;
  position: absolute;
  content: '';
  left: 0;
  bottom: -17px;
  z-index: -1;
  -webkit-transform: skewY(5deg);
          transform: skewY(5deg);
  -webkit-box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
          box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
}

@media (min-width: 768px) {
  .price-item .price-top:after {
    border-radius: 0 0 20px 20px;
  }
}

.price-item .price-top * {
  color: #fff;
}

.price-item .price-top h2 {
  font-weight: 700;
}

.price-item .price-top h2 sup {
  top: 13px;
  left: -5px;
  font-size: 0.35em;
  font-weight: 500;
  vertical-align: top;
}

.price-item .price-content {
  padding: 30px;
  padding-bottom: 40px;
}

.price-item .price-content li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

@media (min-width: 992px) {
  .price-item .price-content li {
    padding-left: 28px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .price-item .price-content li i {
    position: absolute;
    left: 0;
    top: 3px;
  }
}

.price-item .price-content .zmdi-check {
  color: #28a745;
}

.price-item .price-content .zmdi-close {
  color: #f00;
}

.popular {
  background-color: #00b5ec;
}

.popular .price-top {
  background-color: #fff;
}

.popular .price-top:after {
  background-color: #fff;
}

.popular .price-top h4 {
  color: #101f41;
}

.popular .price-top h2, .popular .price-top span, .popular .price-top sup {
  color: #00b5ec;
}

.popular .price-content ul *,
.popular .price-content ul .zmdi-close, .popular .price-content ul .zmdi-check {
  color: #fff !important;
}

     

    Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

    Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. I will come with more demo which will helpful to all.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

    Jassa

    Thanks

  • Reactjs Bootstrap 4 Modern Price Section

    Reactjs Bootstrap 4 Modern Price Section

    Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 4 Modern Price Section.

    Reactjs Bootstrap 4 Modern Price Section
    Reactjs Bootstrap 4

    For reactjs new comers, please check the below link:

    Reactjs Basic Tutorials

    Friends now I proceed onwards and here is the working code snippet for Reactjs Bootstrap 4 Modern Price Section and please use this carefully to avoid the mistakes:

    1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

    npx create-react-app reacttemplate

cd reacttemplate

npm start

     

    2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

    npm install bootstrap --save

npm install jquery --save

npm start //For start project again

     

    3. Finally for the main output, we need to add below code into our reacttemplate/src/App.js file or if you have fresh setup then you can replace reacttemplate/src/App.js file code with below code:

    import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';



class Home extends React.Component {
  
 
  render() {
   
    return (
     
        <div className="maincontainer">
         
         
          <div class="container">
    <div class="text-center">
        <div class="nav price-tabs" role="tablist">
            <a class="nav-link active" href="#yearly" role="tab" data-toggle="tab">Yearly</a>
            <a class="nav-link" href="#monthly" role="tab" data-toggle="tab">Monthly</a>
        </div>
    </div>
    <div class="tab-content wow fadeIn" style={{visibility: "visible", animationName: "fadeIn"}}>
        <div role="tabpanel" class="tab-pane fade show active" id="yearly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>299</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>399</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="monthly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>29</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>59</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
          </div> 
             
       
     
      
)
};
}

export default Home;

     

    4. Now friends, we need to below code into our reacttemplate/src/App.css file for some custom styling:

    body{
    background:#eee!important;
    margin-top:20px;}

/* ===== PRICING PAGE ===== */
.price-tabs {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
          box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
  display: inline-block;
  padding: 7px;
  border-radius: 40px;
  border: 1px solid #00b5ec;
  margin-bottom: 45px;
}

@media (min-width: 768px) {
  .price-tabs {
    margin-bottom: 60px;
  }
}

.price-tabs .nav-link {
  color: #00b5ec;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 12px 35px;
  display: inline-block;
  text-transform: capitalize;
  border-radius: 40px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .price-tabs .nav-link {
    padding: 12px 40px;
  }
}

.price-tabs .nav-link.active {
  background-color: #00b5ec;
  color: #fff;
}

.price-item {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  border-radius: 10px;
}

@media (min-width: 768px) {
  .price-item {
    margin: 0 20px;
    padding-top: 20px;
  }
}

.price-item .price-top {
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  padding: 50px 0 25px;
  background-color: #00b5ec;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  margin-bottom: 33px;
}

@media (min-width: 768px) {
  .price-item .price-top {
    margin: 0 -20px;
    border-radius: 20px;
  }
}

.price-item .price-top:after {
  height: 50px;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background-color: #00b5ec;
  position: absolute;
  content: '';
  left: 0;
  bottom: -17px;
  z-index: -1;
  -webkit-transform: skewY(5deg);
          transform: skewY(5deg);
  -webkit-box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
          box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
}

@media (min-width: 768px) {
  .price-item .price-top:after {
    border-radius: 0 0 20px 20px;
  }
}

.price-item .price-top * {
  color: #fff;
}

.price-item .price-top h2 {
  font-weight: 700;
}

.price-item .price-top h2 sup {
  top: 13px;
  left: -5px;
  font-size: 0.35em;
  font-weight: 500;
  vertical-align: top;
}

.price-item .price-content {
  padding: 30px;
  padding-bottom: 40px;
}

.price-item .price-content li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

@media (min-width: 992px) {
  .price-item .price-content li {
    padding-left: 28px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .price-item .price-content li i {
    position: absolute;
    left: 0;
    top: 3px;
  }
}

.price-item .price-content .zmdi-check {
  color: #28a745;
}

.price-item .price-content .zmdi-close {
  color: #f00;
}

.popular {
  background-color: #00b5ec;
}

.popular .price-top {
  background-color: #fff;
}

.popular .price-top:after {
  background-color: #fff;
}

.popular .price-top h4 {
  color: #101f41;
}

.popular .price-top h2, .popular .price-top span, .popular .price-top sup {
  color: #00b5ec;
}

.popular .price-content ul *,
.popular .price-content ul .zmdi-close, .popular .price-content ul .zmdi-check {
  color: #fff !important;
}

    Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

    Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

    Jassa

    Thanks

  • Angular 11 Bootstrap 4 Modern Price Section

    Angular 11 Bootstrap 4 Modern Price Section

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 11 Bootstrap 4 Modern Price Section.

    Angular Pricing Page

    Angular 11 came and if you are new then you must check below two links:

    1. Angular11 Basic Tutorials

    Friends now I proceed onwards and here is the working code snippet for Angular 11 Bootstrap 4 Modern Price Section and please use carefully this to avoid the mistakes:

    Angular 11 Bootstrap 4 Modern Price Section
    Angular 11 Bootstrap 4 Modern Price Section

    1. Firstly friends we need fresh angular 11 setup and for this we need to run below commands but if you already have angular 11 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

    npm install -g @angular/cli 

ng new angulardashboard //Create new Angular Project

cd angulardashboard // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

     

    2. Now friends, here we need to run below commands into our project terminal to install bootstrap and jquery modules into our angular application:

    npm install --save bootstrap

npm i jquery --save

     

    3. Now friends, here we need to add below  into our angular.json file:

    ...
 "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             
              
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js", 
              
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
              
              
              
            ]
...

     

    4. Now friends we just need to add below code into src/app/app.component.html file to get final out on the web browser:

    <div class="container">
    <div class="text-center">
        <div class="nav price-tabs" role="tablist">
            <a class="nav-link active" href="#yearly" role="tab" data-toggle="tab">Yearly</a>
            <a class="nav-link" href="#monthly" role="tab" data-toggle="tab">Monthly</a>
        </div>
    </div>
    <div class="tab-content wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
        <div role="tabpanel" class="tab-pane fade show active" id="yearly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>299</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>399</h2>
                            <span class="text-capitalize">per year</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="monthly">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Personal</h4>
                            <h2 class="mb-0"><sup>$</sup>29</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center popular">
                        <div class="price-top">
                            <h4>Business</h4>
                            <h2 class="mb-0"><sup>$</sup>59</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom btn-light">Buy now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-30">
                    <div class="price-item text-center">
                        <div class="price-top">
                            <h4>Enterprise</h4>
                            <h2 class="mb-0"><sup>$</sup>99</h2>
                            <span class="text-capitalize">per month</span>
                        </div>
                        <div class="price-content">
                            <ul class="border-bottom mb-30 mt-md-4 pb-3 text-left">
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Eget erovtiu faucid</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Cras justo odio</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-check mr-2"></i>
                                    <span class="c-black">Morbi leo risus</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Porta consectetur ac</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span> Vestibulum at eros</span>
                                </li>
                                <li>
                                    <i class="zmdi zmdi-close mr-2"></i>
                                    <span>Adipisci atque beatae</span>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-custom">Buy now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

     

    5. Now friends we just need to add below code into src/app/app.component.css file:

    body{
    background:#eee!important;
    margin-top:20px;}

/* ===== PRICING PAGE ===== */
.price-tabs {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
          box-shadow: 0 5px 20px 0 rgba(39, 39, 39, 0.1);
  display: inline-block;
  padding: 7px;
  border-radius: 40px;
  border: 1px solid #00b5ec;
  margin-bottom: 45px;
}

@media (min-width: 768px) {
  .price-tabs {
    margin-bottom: 60px;
  }
}

.price-tabs .nav-link {
  color: #00b5ec;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 12px 35px;
  display: inline-block;
  text-transform: capitalize;
  border-radius: 40px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .price-tabs .nav-link {
    padding: 12px 40px;
  }
}

.price-tabs .nav-link.active {
  background-color: #00b5ec;
  color: #fff;
}

.price-item {
  background-color: #fff;
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  border-radius: 10px;
}

@media (min-width: 768px) {
  .price-item {
    margin: 0 20px;
    padding-top: 20px;
  }
}

.price-item .price-top {
  -webkit-box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
          box-shadow: 0 5px 30px 0 rgba(39, 39, 39, 0.15);
  padding: 50px 0 25px;
  background-color: #00b5ec;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  margin-bottom: 33px;
}

@media (min-width: 768px) {
  .price-item .price-top {
    margin: 0 -20px;
    border-radius: 20px;
  }
}

.price-item .price-top:after {
  height: 50px;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background-color: #00b5ec;
  position: absolute;
  content: '';
  left: 0;
  bottom: -17px;
  z-index: -1;
  -webkit-transform: skewY(5deg);
          transform: skewY(5deg);
  -webkit-box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
          box-shadow: 0 5px 10px 0 rgba(113, 113, 113, 0.15);
}

@media (min-width: 768px) {
  .price-item .price-top:after {
    border-radius: 0 0 20px 20px;
  }
}

.price-item .price-top * {
  color: #fff;
}

.price-item .price-top h2 {
  font-weight: 700;
}

.price-item .price-top h2 sup {
  top: 13px;
  left: -5px;
  font-size: 0.35em;
  font-weight: 500;
  vertical-align: top;
}

.price-item .price-content {
  padding: 30px;
  padding-bottom: 40px;
}

.price-item .price-content li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

@media (min-width: 992px) {
  .price-item .price-content li {
    padding-left: 28px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .price-item .price-content li i {
    position: absolute;
    left: 0;
    top: 3px;
  }
}

.price-item .price-content .zmdi-check {
  color: #28a745;
}

.price-item .price-content .zmdi-close {
  color: #f00;
}

.popular {
  background-color: #00b5ec;
}

.popular .price-top {
  background-color: #fff;
}

.popular .price-top:after {
  background-color: #fff;
}

.popular .price-top h4 {
  color: #101f41;
}

.popular .price-top h2, .popular .price-top span, .popular .price-top sup {
  color: #00b5ec;
}

.popular .price-content ul *,
.popular .price-content ul .zmdi-close, .popular .price-content ul .zmdi-check {
  color: #fff !important;
}

     

    Friends in the end must run ng serve command into your terminal to run the angular 11 project.

    Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

    Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

    Jassa

    Thanks

  • Laravel 8 Bootstrap 4 Project Dashboard

    Laravel 8 Bootstrap 4 Project Dashboard

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Laravel 8 Bootstrap 4 Project Dashboard.

    Laravel 8 Bootstrap 4 Project Dashboard
    Laravel 8 Bootstrap 4

    Guys if you are new in Laravel8 the please check below link for Laravel basics information:

    Laravel Basics Tutorial for beginners

    Here you can check more Laravel 8 Working live Demos:

    Laravel Demos

    Here is the code snippet for Laravel 8 Bootstrap 4 Project Dashboard and please use carefully and avoid the mistakes.:

    1. Friends here is the code below and you can add into your resources/views/ welcome.blade.php file:

    Guys for demo purpose, I have used this code into my welcome blade and I have used Direct CDN to make working example:

    ...
    <head>
    ...
       
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     
    <style>
    @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

body{
    background:#f3f3f3!important;
    margin-top:20px;
    color: #616f80;
}
.card {
    border: none;
    margin-bottom: 24px;
    -webkit-box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
    box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
}

.avatar-xs {
    height: 2.3rem;
    width: 2.3rem;
}
    </style>

                
    </head>
    <body>
   ...
<div class="container">
  
  <div class="container">
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-archive text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">24</h5>
                    <p class="text-muted mb-0">Total Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-th text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">18</h5>
                    <p class="text-muted mb-0">Completed Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-file text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">06</h5>
                    <p class="text-muted mb-0">Pending Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <form>
                        <div class="form-group mb-0">
                            <label>Search</label>
                            <div class="input-group mb-0">
                                <input type="text" class="form-control" placeholder="Search..." aria-describedby="project-search-addon" />
                                <div class="input-group-append">
                                    <button class="btn btn-danger" type="button" id="project-search-addon"><i class="fa fa-search search-icon font-12"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive project-list">
                        <table class="table project-table table-centered table-nowrap">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Projects</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Team</th>
                                    <th scope="col">Progress</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>New admin Design</td>
                                    <td>02/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">2</th>
                                    <td>Landing page Design</td>
                                    <td>04/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">78%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 78%;" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">3</th>
                                    <td>Multipurpose Landing Template</td>
                                    <td>06/6/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">4</th>
                                    <td>Blog Template Design</td>
                                    <td>07/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">5</th>
                                    <td>Brand logo design</td>
                                    <td>08/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">54%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 54%;" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">6</th>
                                    <td>Redesign - Landing page</td>
                                    <td>10/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">41%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 41%;" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">7</th>
                                    <td>Redesign - Dashboard</td>
                                    <td>12/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>
                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">8</th>
                                    <td>Landing page Design</td>
                                    <td>13/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">84%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">9</th>
                                    <td>Multipurpose Landing Template</td>
                                    <td>15/6/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- end project-list -->

                    <div class="pt-3">
                        <ul class="pagination justify-content-end mb-0">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->
</div>
        
    </body>
</html>

     

    Now we are done friends and please run your Laravel 8 project and see the Project Dashboard Working Demo.  Also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

    Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. I will come with more Laravel 8 demos.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

    Jassa

    Thanks

  • Reactjs Bootstrap 4 Project Dashboard

    Reactjs Bootstrap 4 Project Dashboard

    Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 4 Project Dashboard.

    Reactjs Bootstrap 4 Project Dashboard
    Reactjs Bootstrap 4
    Reactjs Tutorial Videos

    For reactjs new comers, please check the below link:

    Reactjs Basic Tutorials

    Friends now I proceed onwards and here is the working code snippet for Reactjs Bootstrap 4 Project Dashboard and please use this carefully to avoid the mistakes:

    1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

    npx create-react-app reacttepmate

cd reacttepmate

npm start

     

    2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

    npm install bootstrap --save

npm start //For start project again

     

    3. Finally for the main output, we need to add below code into our reacttemplate/src/App.js file or if you have fresh setup then you can replace reacttemplate/src/App.js file code with below code:

    import React from 'react';

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


class Home extends React.Component {
  
 
  render() {
   
    return (
     
        <div className="maincontainer">
         
         
          <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-pattern">
                            <div class="card-body">
                                <div class="float-right">
                                    <i class="fa fa-archive text-primary h4 ml-3"></i>
                                </div>
                                <h5 class="font-size-20 mt-0 pt-1">24</h5>
                                <p class="text-muted mb-0">Total Projects</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-pattern">
                            <div class="card-body">
                                <div class="float-right">
                                    <i class="fa fa-th text-primary h4 ml-3"></i>
                                </div>
                                <h5 class="font-size-20 mt-0 pt-1">18</h5>
                                <p class="text-muted mb-0">Completed Projects</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-pattern">
                            <div class="card-body">
                                <div class="float-right">
                                    <i class="fa fa-file text-primary h4 ml-3"></i>
                                </div>
                                <h5 class="font-size-20 mt-0 pt-1">06</h5>
                                <p class="text-muted mb-0">Pending Projects</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <form>
                                    <div class="form-group mb-0">
                                        <label>Search</label>
                                        <div class="input-group mb-0">
                                            <input type="text" class="form-control" placeholder="Search..." aria-describedby="project-search-addon" />
                                            <div class="input-group-append">
                                                <button class="btn btn-danger" type="button" id="project-search-addon"><i class="fa fa-search search-icon font-12"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
             

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive project-list">
                                    <table class="table project-table table-centered table-nowrap">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Projects</th>
                                                <th scope="col">Start Date</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Team</th>
                                                <th scope="col">Progress</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>New admin Design</td>
                                                <td>02/5/2019</td>
                                                <td>
                                                    <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-success" role="progressbar" style={{width: "100%"}} aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Landing page Design</td>
                                                <td>04/6/2019</td>
                                                <td>
                                                    <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">78%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-primary" role="progressbar" style={{width: "78%"}} aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Multipurpose Landing Template</td>
                                                <td>06/6/2019</td>
                                                <td>
                                                    <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-success" role="progressbar" style={{width: "100%"}} aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th scope="row">4</th>
                                                <td>Blog Template Design</td>
                                                <td>07/5/2019</td>
                                                <td>
                                                    <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-success" role="progressbar" style={{width: "100%"}} aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">5</th>
                                                <td>Brand logo design</td>
                                                <td>08/6/2019</td>
                                                <td>
                                                    <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">54%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-primary" role="progressbar" style={{width: "54%"}} aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">6</th>
                                                <td>Redesign - Landing page</td>
                                                <td>10/6/2019</td>
                                                <td>
                                                    <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">41%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-primary" role="progressbar" style={{width: "41%"}} aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th scope="row">7</th>
                                                <td>Redesign - Dashboard</td>
                                                <td>12/5/2019</td>
                                                <td>
                                                    <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">100%</span></p>
                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-success" role="progressbar" style={{width: "100%"}} aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">8</th>
                                                <td>Landing page Design</td>
                                                <td>13/6/2019</td>
                                                <td>
                                                    <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">84%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-primary" role="progressbar" style={{width: "84%"}} aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">9</th>
                                                <td>Multipurpose Landing Template</td>
                                                <td>15/6/2019</td>
                                                <td>
                                                    <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                                </td>
                                                <td>
                                                    <div class="team">
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>

                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                        <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                            <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                                    <div class="progress mt-2" style={{height: "5px"}}>
                                                        <div class="progress-bar bg-success" role="progressbar" style={{width: "100%"}} aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="action">
                                                        <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                                        <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                               

                                <div class="pt-3">
                                    <ul class="pagination justify-content-end mb-0">
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="#">Next</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div> 
             
       
     
      
)
};
}

export default Home;

     

    4. Now Friends we need to add below code into our reacttemplate/src/App.css file :

    @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

body{
    background:#f3f3f3!important;
    margin-top:20px;
    color: #616f80;
}
.card {
    border: none;
    margin-bottom: 24px;
    -webkit-box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
    box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
}

.avatar-xs {
    height: 2.3rem;
    width: 2.3rem;
}

     

    Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

    Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

    Jassa

    Thanks

  • Vuejs Bootstrap 4 Project Dashboard

    Vuejs Bootstrap 4 Project Dashboard

    Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vuejs Bootstrap 4 Project Dashboard.

    Vuejs Bootstrap 4 Project Dashboard
    Vue 3 Bootstrap 4
    Vue 3 Tutorial Videos

    Vuejs3 came and if you are new then you must check below link::
    Vuejs

    Friends now I proceed onwards and here is the code snippet for Vuejs Bootstrap 4 Project Dashboard and please use this carefully to avoid the mistakes:

    1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

    Guys you can skip this first step if you already have vuejs fresh setup:

    npm install -g @vue/cli

vue create vueadmin

cd vueadmin

npm install bootstrap --save

npm run serve //http://localhost:8080/

    2. Finally guys we need to add below code into our src/App.vue file to get final output on web browser:

    <template>
<div class="container">
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-archive text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">24</h5>
                    <p class="text-muted mb-0">Total Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-th text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">18</h5>
                    <p class="text-muted mb-0">Completed Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-file text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">06</h5>
                    <p class="text-muted mb-0">Pending Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <form>
                        <div class="form-group mb-0">
                            <label>Search</label>
                            <div class="input-group mb-0">
                                <input type="text" class="form-control" placeholder="Search..." aria-describedby="project-search-addon" />
                                <div class="input-group-append">
                                    <button class="btn btn-danger" type="button" id="project-search-addon"><i class="fa fa-search search-icon font-12"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive project-list">
                        <table class="table project-table table-centered table-nowrap">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Projects</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Team</th>
                                    <th scope="col">Progress</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>New admin Design</td>
                                    <td>02/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">2</th>
                                    <td>Landing page Design</td>
                                    <td>04/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">78%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 78%;" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">3</th>
                                    <td>Multipurpose Landing Template</td>
                                    <td>06/6/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">4</th>
                                    <td>Blog Template Design</td>
                                    <td>07/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">5</th>
                                    <td>Brand logo design</td>
                                    <td>08/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">54%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 54%;" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">6</th>
                                    <td>Redesign - Landing page</td>
                                    <td>10/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">41%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 41%;" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">7</th>
                                    <td>Redesign - Dashboard</td>
                                    <td>12/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>
                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">8</th>
                                    <td>Landing page Design</td>
                                    <td>13/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">84%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">9</th>
                                    <td>Multipurpose Landing Template</td>
                                    <td>15/6/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- end project-list -->

                    <div class="pt-3">
                        <ul class="pagination justify-content-end mb-0">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->
</div>
</template>
<script>
//Bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css'; 

export default {
 //
  mounted(){
 
  },
  
}
</script>

     

    3. Now guys we need to add below code into our src/App.css file:

    @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

body{
    background:#f3f3f3!important;
    margin-top:20px;
    color: #616f80;
}
.card {
    border: none;
    margin-bottom: 24px;
    -webkit-box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
    box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
}

.avatar-xs {
    height: 2.3rem;
    width: 2.3rem;
}

     

    Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

    Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. I will come with more demo which will helpful to all.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

    Jassa

    Thanks

  • Angular 11 Bootstrap 4 Project Dashboard

    Angular 11 Bootstrap 4 Project Dashboard

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 11 Bootstrap 4 Project Dashboard.

    Angular 11 came and if you are new then you must check below two links: Angular 11 Tutorials

    Please get Angular 11 Free Templates : Angular 11 Free Templates

    Friends now I proceed onwards and here is the working code snippet for Angular 11 Bootstrap 4 Project Dashboard and please use carefully this to avoid the mistakes:

    Angular 11 Bootstrap 4 Project Dashboard
    Angular 11 Bootstrap 4

    1. Firstly friends we need fresh angular 11 setup and for this we need to run below commands but if you already have angular 11 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

    npm install -g @angular/cli 

ng new angulardashboard //Create new Angular Project

cd angulardashboard // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

    2. Now friends, here we need to run below commands into our project terminal to install bootstrap and jquery modules into our angular application:

    npm install --save bootstrap

npm i jquery --save

    3. Now friends, here we need to add below  into our angular.json file:

    ...
 "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             
              
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js", 
              
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
              
              
              
            ]
...

    4. Now friends we just need to add below code into src/app/app.component.html file to get final out on the web browser:

    <div class="container">
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-archive text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">24</h5>
                    <p class="text-muted mb-0">Total Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-th text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">18</h5>
                    <p class="text-muted mb-0">Completed Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern">
                <div class="card-body">
                    <div class="float-right">
                        <i class="fa fa-file text-primary h4 ml-3"></i>
                    </div>
                    <h5 class="font-size-20 mt-0 pt-1">06</h5>
                    <p class="text-muted mb-0">Pending Projects</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <form>
                        <div class="form-group mb-0">
                            <label>Search</label>
                            <div class="input-group mb-0">
                                <input type="text" class="form-control" placeholder="Search..." aria-describedby="project-search-addon" />
                                <div class="input-group-append">
                                    <button class="btn btn-danger" type="button" id="project-search-addon"><i class="fa fa-search search-icon font-12"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive project-list">
                        <table class="table project-table table-centered table-nowrap">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Projects</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Team</th>
                                    <th scope="col">Progress</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>New admin Design</td>
                                    <td>02/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">2</th>
                                    <td>Landing page Design</td>
                                    <td>04/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">78%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 78%;" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">3</th>
                                    <td>Multipurpose Landing Template</td>
                                    <td>06/6/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">4</th>
                                    <td>Blog Template Design</td>
                                    <td>07/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar8.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gerald Mayberry">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">5</th>
                                    <td>Brand logo design</td>
                                    <td>08/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">54%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 54%;" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">6</th>
                                    <td>Redesign - Landing page</td>
                                    <td>10/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Jack Krier">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">41%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 41%;" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row">7</th>
                                    <td>Redesign - Dashboard</td>
                                    <td>12/5/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar6.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reggie James">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>
                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">8</th>
                                    <td>Landing page Design</td>
                                    <td>13/6/2019</td>
                                    <td>
                                        <span class="text-primary font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Pending</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Deborah Mixon">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Scott Jessie">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar1.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">84%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row">9</th>
                                    <td>Multipurpose Landing Template</td>
                                    <td>15/6/2019</td>
                                    <td>
                                        <span class="text-success font-12"><i class="mdi mdi-checkbox-blank-circle mr-1"></i> Completed</span>
                                    </td>
                                    <td>
                                        <div class="team">
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Neil Wing">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar4.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>

                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Stanley Barber">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar3.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                            <a href="javascript: void(0);" class="team-member" data-toggle="tooltip" data-placement="top" title="" data-original-title="Roger Drake">
                                                <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar5.png" class="rounded-circle avatar-xs" alt="" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="mb-0">Progress<span class="float-right">100%</span></p>

                                        <div class="progress mt-2" style="height: 5px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="action">
                                            <a href="#" class="text-success mr-4" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-pencil h5 m-0"></i></a>
                                            <a href="#" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Close"> <i class="fa fa fa-remove h5 m-0"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- end project-list -->

                    <div class="pt-3">
                        <ul class="pagination justify-content-end mb-0">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->
</div>

    5. Now friends we just need to add below code into src/app/app.component.css file:

    body{
    background:#f3f3f3!important;
    margin-top:20px;
    color: #616f80;
}
.card {
    border: none;
    margin-bottom: 24px;
    -webkit-box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
    box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
}

.avatar-xs {
    height: 2.3rem;
    width: 2.3rem;
}

    6. Now friends we just need to add below code into src/index.html file:

    ...
<head>
 ...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  
</head>

    Friends in the end must run ng serve command into your terminal to run the angular 11 project.

    Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

    Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

    I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

    Jassa

    Thanks