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
Download<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
Downloadbody{
margin-top:20px;
background:#f8f8f8
}
.avatar--md .avatar__content img{
width:40px;
height:40px;
}
About this bootstrap example/template
This example/template, bs4 project list, was published on Oct 10th 2018, 09:11 by Bootdey Admin and it is free.
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 13.5K 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