Bootstrap snippet and html example. bs4 project list

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.
Tags: bs4,list,projects,search

HTML code

This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 4.1.1 included, to get the result that you can see in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="mb-4">
                <div class="small mb-3">Search</div>
                <div class="input-group">
                    <input placeholder="Search for..." type="text" class="form-control">
                    <div class="input-group-append">
                        <button class="btn btn-secondary"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
            <div class="mb-4">
                <div class="small mb-3">Favorites</div>
                <ul class="nav flex-column nav-pills">
                    <li class="nav-item"><a href="#" class="nav-link active"><i class="fa fa-fw fa-line-chart mr-2"></i>Overview</a></li>
                    <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-fw fa-calendar-o mr-2"></i>Calendar</a></li>
                </ul>
            </div>
            <div class="mb-4">
                <div class="small mb-3">Projects</div>
                <ul class="nav flex-column nav-pills">
                    <li class="nav-item"><a href="#" class="d-flex nav-link"><i class="fa fa-fw fa-star-o align-self-center mr-2"></i>Analytics Redesign<span class="ml-auto align-self-center badge badge-secondary badge-pill">12</span></a></li>
                    <li class="nav-item"><a href="#" class="d-flex nav-link"><i class="fa fa-fw fa-star-o align-self-center mr-2"></i>New Website<span class="ml-auto align-self-center badge badge-secondary badge-pill">4</span></a></li>
                    <li class="nav-item"><a href="#" class="d-flex nav-link"><i class="fa fa-fw fa-star-o align-self-center mr-2"></i>Chart for Newsletter<span class="ml-auto align-self-center badge badge-secondary badge-pill">9</span></a></li>
                    <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-fw fa-plus mr-2"></i>Add New Project</a></li>
                </ul>
            </div>
            <div class="mb-4">
                <div class="small mb-3">People</div>
                <ul class="nav flex-column nav-pills">
                    <li class="nav-item">
                        <a href="#" class="d-flex nav-link">
                            <div class="media">
                                <div class="mr-3 align-self-center media-left media-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <div class="mt-0">Harvey Blick</div><span class="small">Pennsylvania, SD</span></div>
                            </div><i class="fa fa-fw fa-circle text-success ml-auto align-self-center ml-2"></i></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="d-flex nav-link">
                            <div class="media">
                                <div class="mr-3 align-self-center media-left media-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <div class="mt-0">Hobart Hintz</div><span class="small">North Carolina, CT</span></div>
                            </div><i class="fa fa-fw fa-circle text-warning ml-auto align-self-center ml-2"></i></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="d-flex nav-link">
                            <div class="media">
                                <div class="mr-3 align-self-center media-left media-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <div class="mt-0">Elmore Cummerata</div><span class="small">Michigan, NC</span></div>
                            </div><i class="fa fa-fw fa-circle text-danger ml-auto align-self-center ml-2"></i></a>
                    </li>
                    <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-fw fa-plus mr-2"></i>Add New People</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="d-flex flex-column flex-md-row mb-3 mb-md-0">
                <nav class="mr-auto d-flex align-items-center" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="active breadcrumb-item" aria-current="page"><a href="/"><i class="fa fa-home"></i></a></li>
                        <li class="active breadcrumb-item" aria-current="page">Projects List</li>
                    </ol>
                </nav>
                <div role="toolbar" class="btn-toolbar">
                    <div role="group" class="mr-auto mr-md-2 btn-group"><a class="align-self-center btn btn-secondary active" aria-current="page" id="tooltipShowList" href="#"><i class="fa-fw fa fa-bars"></i></a><a class="align-self-center btn btn-secondary" id="tooltipShowGrid" href="#"><i class="fa-fw fa fa-th-large"></i></a></div>
                    <div role="group" class="btn-group">
                        <button id="tooltipAddNew" class="align-self-center btn btn-primary"><i class="fa-fw fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="mb-3 Card_custom-card--border_5wJKy card">
                <div class="table-responsive-xl">
                    <table class="mb-0 table table-hover">
                        <thead>
                            <tr>
                                <th class="align-middle bt-0">Star</th>
                                <th class="align-middle bt-0">Project</th>
                                <th class="align-middle bt-0">Status</th>
                                <th class="align-middle bt-0">Tasks Completed</th>
                                <th class="align-middle bt-0">People</th>
                                <th class="align-middle bt-0 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Ergonomic real-time adapter</a></div><span>Last Edited by: Savanah Durgan <br>Sunday, 12 June, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-success badge-pill">Active</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Stand-alone clear-thinking initiative</a></div><span>Last Edited by: Brando Gutkowski <br>Friday, 12 December, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-danger badge-pill">Suspended</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Configurable homogeneous knowledge user</a></div><span>Last Edited by: Wilmer Gorczany <br>Tuesday, 12 June, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-warning badge-pill">Waiting</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Progressive 3rd generation superstructure</a></div><span>Last Edited by: Eden Green <br>Sunday, 12 September, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-secondary badge-pill">Paused</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar4.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Virtual intermediate portal</a></div><span>Last Edited by: Gregoria Hagenes <br>Friday, 12 October, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-success badge-pill">Active</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar5.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Visionary client-server hardware</a></div><span>Last Edited by: Haskell Mills <br>Monday, 12 July, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-danger badge-pill">Suspended</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar6.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Focused context-sensitive hardware</a></div><span>Last Edited by: Rey Hansen <br>Friday, 12 May, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-warning badge-pill">Waiting</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar7.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Advanced mission-critical groupware</a></div><span>Last Edited by: Carey Runolfsson <br>Friday, 12 May, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-secondary badge-pill">Paused</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">De-engineered tertiary matrix</a></div><span>Last Edited by: Jacynthe Beier <br>Wednesday, 12 May, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-success badge-pill">Active</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar2.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Progressive 4th generation emulation</a></div><span>Last Edited by: Baby Robel <br>Thursday, 12 March, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-danger badge-pill">Suspended</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar3.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Sharable even-keeled access</a></div><span>Last Edited by: Ethan Little <br>Saturday, 12 March, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-warning badge-pill">Waiting</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar4.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="align-middle">
                                    <div class="text-inverse"><a href="#"><i class="fa fa-fw fa-lg fa-star-o"></i></a></div>
                                </td>
                                <td class="align-middle">
                                    <div><a href="#">Optimized responsive attitude</a></div><span>Last Edited by: Kolby Batz <br>Saturday, 12 February, 2018</span></td>
                                <td class="align-middle"><span class="badge badge-secondary badge-pill">Paused</span></td>
                                <td class="align-middle">
                                    <div class="mb-2 progress" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                                    </div>
                                    <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                                </td>
                                <td class="align-middle">
                                    <div class="avatar-image avatar-image--loaded">
                                        <div class="avatar avatar--md avatar-image__image">
                                            <div class="avatar__content"><img src="https://bootdey.com/img/Content/avatar/avatar5.png"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-right">
                                    <div class="btn-group">
                                        <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link"><i class="fa fa-gear"></i></button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-folder-open mr-2"></i>View</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-ticket mr-2"></i>Add Task</button>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-paperclip mr-2"></i>Add Files</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item"><i class="fa fa-fw fa-trash mr-2"></i>Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center pb-0 card-footer">
                    <nav class="" aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item"><a href="#" class="page-link" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-fw fa-angle-left"></i></span><span class="sr-only">Previous</span></a></li>
                            <li class="page-item active"><a href="#" class="page-link">1</a></li>
                            <li class="page-item"><a href="#" class="page-link">2</a></li>
                            <li class="page-item"><a href="#" class="page-link">3</a></li>
                            <li class="page-item"><a href="#" class="page-link" aria-label="Next"><span aria-hidden="true"><i class="fa fa-fw fa-angle-right"></i></span><span class="sr-only">Next</span></a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code

This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 4.1.1 included, to get the result that you can see in the preview selection

body{
    margin-top:20px;
    background:#f8f8f8
}
.avatar--md .avatar__content img{
    width:40px;
    height:40px;
}

Similar snippets

Bootstrap example and template. bs4 simple social network post

bs4 simple social network post

Bootstrap example and template. bs4 Horizontal timeline

bs4 Horizontal timeline

Bootstrap example and template. followers list

followers list

Bootstrap example and template. Shop categories

Shop categories

Bootstrap example and template. bs5 dark footer

bs5 dark footer

Bootstrap example and template. company invoice

company invoice

Bootstrap example and template. bs4 beta email inbox

bs4 beta email inbox

Bootstrap example and template. chat app

chat app

Bootstrap example and template. bs4 project list

About this bootstrap example/template

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This code example currectly have 15.1K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 4.1.1

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>

This code example is based on bootstrap 4.1.1 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working