Utilities Bootstrap 5Free+ CSS
Bootstrap media profile snippets — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
2.9k views31 downloads
gosnippets.com/preview/bootstrap-media-profile-snippets
Source Code
1<section id="content" class="container">
2 <!-- Begin .page-heading -->
3 <div class="page-heading">
4 <div class="d-flex clearfix">
5 <div class="media-left pr30">
6 <a href="#">
7 <img class="media-object mw150" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="...">
8 </a>
9 </div>
10 <div class="flex-grow-1 ms-3 va-m">
11 <h2 class="media-heading">Mukesh Kumar
12 <small> - Profile</small>
13 </h2>
14 <p class="lead">Lorem ipsum dolor sit amet ctetur adicing elit, sed do eiusmod tempor incididunt</p>
15 <div class="media-links">
16 <ul class="list-inline list-unstyled">
17 <li>
18 <a href="#" title="facebook link">
19 <span class="fa fa-facebook-square fs35 text-primary"></span>
20 </a>
21 </li>
22 <li>
23 <a href="#" title="twitter link">
24 <span class="fa fa-twitter-square fs35 text-info"></span>
25 </a>
26 </li>
27 <li>
28 <a href="#" title="google plus link">
29 <span class="fa fa-google-plus-square fs35 text-danger"></span>
30 </a>
31 </li>
32 <li class="hidden">
33 <a href="#" title="behance link">
34 <span class="fa fa-behance-square fs35 text-primary"></span>
35 </a>
36 </li>
37 <li class="hidden">
38 <a href="#" title="pinterest link">
39 <span class="fa fa-pinterest-square fs35 text-danger-light"></span>
40 </a>
41 </li>
42 <li class="hidden">
43 <a href="#" title="linkedin link">
44 <span class="fa fa-linkedin-square fs35 text-info"></span>
45 </a>
46 </li>
47 <li class="hidden">
48 <a href="#" title="github link">
49 <span class="fa fa-github-square fs35 text-dark"></span>
50 </a>
51 </li>
52 <li class="">
53 <a href="#" title="phone link">
54 <span class="fa fa-phone-square fs35 text-system"></span>
55 </a>
56 </li>
57 <li>
58 <a href="#" title="email link">
59 <span class="fa fa-envelope-square fs35 text-muted"></span>
60 </a>
61 </li>
62 <li class="hidden">
63 <a href="#" title="external link">
64 <span class="fa fa-external-link-square fs35 text-muted"></span>
65 </a>
66 </li>
67 </ul>
68 </div>
69 </div>
70 </div>
71 </div>
72
73 <div class="row">
74 <div class="col-md-4">
75 <div class="panel">
76 <div class="panel-heading">
77 <span class="panel-icon">
78 <i class="fa fa-star"></i>
79 </span>
80 <span class="panel-title"> User Popularity</span>
81 </div>
82 <div class="panel-body pn">
83 <table class="table mbn tc-icon-1 tc-med-2 tc-bold-last">
84 <thead>
85 <tr class="hidden">
86 <th class="mw30">#</th>
87 <th>First Name</th>
88 <th>Revenue</th>
89 </tr>
90 </thead>
91 <tbody>
92 <tr>
93 <td>
94 <span class="fa fa-desktop text-warning"></span>
95 </td>
96 <td>Television</td>
97 <td>
98 <i class="fa fa-caret-up text-info pr10"></i>$855,913</td>
99 </tr>
100 <tr>
101 <td>
102 <span class="fa fa-microphone text-primary"></span>
103 </td>
104 <td>Radio</td>
105 <td>
106 <i class="fa fa-caret-down text-danger pr10"></i>$349,712</td>
107 </tr>
108 <tr>
109 <td>
110 <span class="fa fa-newspaper-o text-info"></span>
111 </td>
112 <td>Newspaper</td>
113 <td>
114 <i class="fa fa-caret-up text-info pr10"></i>$1,259,742</td>
115 </tr>
116 </tbody>
117 </table>
118 </div>
119 </div>
120 <div class="panel">
121 <div class="panel-heading">
122 <span class="panel-icon">
123 <i class="fa fa-trophy"></i>
124 </span>
125 <span class="panel-title"> My Skills</span>
126 </div>
127 <div class="panel-body pb5">
128 <span class="label label-warning mr5 mb10 ib lh15">Default</span>
129 <span class="label label-primary mr5 mb10 ib lh15">Primary</span>
130 <span class="label label-info mr5 mb10 ib lh15">Success</span>
131 <span class="label label-success mr5 mb10 ib lh15">Info</span>
132 <span class="label label-alert mr5 mb10 ib lh15">Warning</span>
133 <span class="label label-system mr5 mb10 ib lh15">Danger</span>
134 <span class="label label-info mr5 mb10 ib lh15">Success</span>
135 <span class="label label-success mr5 mb10 ib lh15">Ui Design</span>
136 <span class="label label-primary mr5 mb10 ib lh15">Primary</span>
137
138 </div>
139 </div>
140 <div class="panel">
141 <div class="panel-heading">
142 <span class="panel-icon">
143 <i class="fa fa-pencil"></i>
144 </span>
145 <span class="panel-title">About Me</span>
146 </div>
147 <div class="panel-body pb5">
148
149 <h6>Experience</h6>
150
151 <h4>Facebook Internship</h4>
152 <p class="text-muted"> University of Missouri, Columbia
153 <br> Student Health Center, June 2010 - 2012
154 </p>
155
156 <hr class="short br-lighter">
157
158 <h6>Education</h6>
159
160 <h4>Bachelor of Science, PhD</h4>
161 <p class="text-muted"> University of Missouri, Columbia
162 <br> Student Health Center, June 2010 through Aug 2011
163 </p>
164
165 <hr class="short br-lighter">
166
167 <h6>Accomplishments</h6>
168
169 <h4>Successful Business</h4>
170 <p class="text-muted pb10"> University of Missouri, Columbia
171 <br> Student Health Center, June 2010 through Aug 2011
172 </p>
173
174 </div>
175 </div>
176 </div>
177 <div class="col-md-8">
178
179 <div class="tab-block">
180 <ul class="nav nav-tabs">
181 <li class="active">
182 <a href="#tab1" data-bs-toggle="tab">Activity</a>
183 </li>
184 <li>
185 <a href="#tab1" data-bs-toggle="tab">Social</a>
186 </li>
187 <li>
188 <a href="#tab1" data-bs-toggle="tab">Media</a>
189 </li>
190 </ul>
191 <div class="tab-content p30" style="height: 730px;">
192 <div id="tab1" class="tab-pane active">
193 <div class="d-flex">
194 <a class="pull-left" href="#"> <img class="media-object mn thumbnail mw50" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="..."> </a>
195 <div class="flex-grow-1 ms-3">
196 <h5 class="media-heading mb20">Simon Rivers Posted
197 <small> - 3 hours ago</small>
198 </h5>
199 <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="mw140 mr25 mb20">
200 <img src="https://bootdey.com/img/Content/avatar/avatar8.png" class="mw140 mr25 mb20">
201 <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="mw140 mb20">
202 <div class="media-links">
203 <span class="text-light fs12 mr10">
204 <span class="fa fa-thumbs-o-up text-primary mr5"></span> Like </span>
205 <span class="text-light fs12 mr10">
206 <span class="fa fa-share text-primary mr5"></span> Share </span>
207 <span class="text-light fs12 mr10">
208 <span class="fa fa-floppy-o text-primary mr5"></span> Save </span>
209 <span class="text-light fs12 mr10">
210 <span class="fa fa-comment text-primary mr5"></span> Comment </span>
211 </div>
212 </div>
213 </div>
214 <div class="d-flex mt25">
215 <a class="pull-left" href="#"> <img class="media-object mn thumbnail thumbnail-sm rounded mw40" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="..."> </a>
216 <div class="flex-grow-1 ms-3 mb5">
217 <h5 class="media-heading mbn">Simon Rivers Posted
218 <small> - 3 hours ago</small>
219 </h5>
220 <p> Omg so freaking sweet dude.</p>
221 <div class="d-flex pb10">
222 <a class="pull-left" href="#"> <img class="media-object mn thumbnail thumbnail-sm rounded mw40" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="..."> </a>
223 <div class="flex-grow-1 ms-3 mb5">
224 <h5 class="media-heading mbn">Jessica Wong
225 <small> - 3 hours ago</small>
226 </h5>
227 <p>Omgosh I'm in love</p>
228 </div>
229 </div>
230 <div class="d-flex mtn">
231 <a class="pull-left" href="#"> <img class="media-object mn thumbnail thumbnail-sm rounded mw40" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="..."> </a>
232 <div class="flex-grow-1 ms-3 mb5">
233 <h5 class="media-heading mbn">Jessica Wong
234 <small> - 3 hours ago</small>
235 </h5>
236 <p>Omgosh I'm in love</p>
237 </div>
238 </div>
239 </div>
240 </div>
241 <div class="d-flex mt25">
242 <a class="pull-left" href="#"> <img class="media-object thumbnail mw50" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="..."> </a>
243 <div class="flex-grow-1 ms-3">
244 <h5 class="media-heading mb20">Simon Rivers Posted
245 <small> - 3 hours ago</small>
246 </h5>
247 <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="mw140 mr25 mb20">
248 <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="mw140 mr25 mb20">
249 <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="mw140 mb20">
250 <div class="media-links">
251 <span class="text-light fs12 mr10">
252 <span class="fa fa-thumbs-o-up text-primary mr5"></span> Like </span>
253 <span class="text-light fs12 mr10">
254 <span class="fa fa-share text-primary mr5"></span> Share </span>
255 <span class="text-light fs12 mr10">
256 <span class="fa fa-floppy-o text-primary mr5"></span> Save </span>
257 <span class="text-light fs12 mr10">
258 <span class="fa fa-comment text-primary mr5"></span> Comment </span>
259 </div>
260 </div>
261 </div>
262 </div>
263 <div id="tab2" class="tab-pane"></div>
264 <div id="tab3" class="tab-pane"></div>
265 <div id="tab4" class="tab-pane"></div>
266 </div>
267 </div>
268 </div>
269 </div>
270 </section>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.