bs4 project grid

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

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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="http://bootdey.com/img/Content/avatar/avatar1.png"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <div class="mt-0">Alva Kuhic</div><span class="small">Florida, AR</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="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <div class="mt-0">Jeramy Gleason</div><span class="small">Indiana, AZ</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="http://bootdey.com/img/Content/avatar/avatar3.png"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="media-body">
                                    <div class="mt-0">Travis Koch</div><span class="small">Tennessee, AZ</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 Grid</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" id="tooltipShowList" href="/apps/projects/list"><i class="fa-fw fa fa-bars"></i></a><a class="align-self-center btn btn-secondary active" id="tooltipShowGrid" href="/apps/projects/grid" aria-current="page"><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="card-columns">
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-success badge-pill">Active</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Polarised stable frame</a></div><span>Last Edited by: Caden Brakus <br>Saturday, 12 September, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar7.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar6.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar1.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-warning badge-pill">Waiting</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Synergized upward-trending info-mediaries</a></div><span>Last Edited by: Keely West <br>Tuesday, 12 March, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar1.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar5.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar4.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Automated systemic benchmark</a></div><span>Last Edited by: Rod Koelpin <br>Tuesday, 12 June, 2018</span></div>
                    <div class="card-footer">
                        <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>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar3.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar4.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-secondary badge-pill">Paused</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Organized stable synergy</a></div><span>Last Edited by: Cedrick Dibbert <br>Saturday, 12 November, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar7.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar6.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar5.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-warning badge-pill">Waiting</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Progressive logistical circuit</a></div><span>Last Edited by: Lera Bailey <br>Wednesday, 12 September, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar7.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar6.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar5.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Assimilated cohesive ability</a></div><span>Last Edited by: Nasir Ryan <br>Thursday, 12 January, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="width: 57%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar1.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar3.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Re-contextualized full-range alliance</a></div><span>Last Edited by: Verda Kassulke <br>Sunday, 12 January, 2018</span></div>
                    <div class="card-footer">
                        <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>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar3.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar4.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar5.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-success badge-pill">Active</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Future-proofed next generation process improvement</a></div><span>Last Edited by: Franz Koepp <br>Friday, 12 August, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="width: 57%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-success badge-pill">Active</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Organic 4th generation hardware</a></div><span>Last Edited by: Savanah Gottlieb <br>Friday, 12 October, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-secondary badge-pill">Paused</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Diverse transitional strategy</a></div><span>Last Edited by: Flavio Bayer <br>Friday, 12 October, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-danger badge-pill">Suspended</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Phased high-level collaboration</a></div><span>Last Edited by: Hailie Sauer <br>Monday, 12 April, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="width: 57%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
                <div class="Card_custom-card--border_5wJKy card">
                    <div class="card-body"><span class="mb-2 badge badge-warning badge-pill">Waiting</span>
                        <div class="mb-2"><a href="#" class="mr-2"><i class="fa fa-fw fa-star-o"></i></a><a href="/apps/tasks/grid">Up-sized optimizing system engine</a></div><span>Last Edited by: Devante Senger <br>Sunday, 12 May, 2018</span></div>
                    <div class="card-footer">
                        <div class="mb-2 progress" style="height: 5px;">
                            <div class="progress-bar" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%;"></div>
                        </div>
                        <div>Tasks Completed:<span class="text-inverse">36/94</span></div>
                    </div>
                    <div class="card-footer">
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                        <div class="avatar-image avatar-image--loaded mr-2">
                            <div class="avatar avatar--md avatar-image__image">
                                <div class="avatar__content"><img src="http://bootdey.com/img/Content/avatar/avatar2.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex card-footer"><span class="align-self-center">20 Sep, Fri, 2018</span>
                        <div class="align-self-center ml-auto btn-group">
                            <button type="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-link btn-sm"><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>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                <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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


body{
    margin-top:20px;
    background:#eee;
}
.avatar-image {
    display: inline-block;
    position: relative;
}
.mr-2, .mx-2 {
    margin-right: .5rem!important;
}
.avatar-image--loaded .avatar-image__image {
    visibility: visible;
}

.avatar--md {
    width: 30px;
    height: 30px;
}
.avatar-image__image {
    position: relative;
    visibility: hidden;
    z-index: 0;
}
.avatar {
    position: relative;
    display: inline-block;
}
.avatar__content {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000);
}
.avatar-image__image img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.card {
    border: none;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    margin-bottom: 30px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Oct 10th, 09:15

Views: 1.2K

Rated 5/5 based on 8 reviews