xxxxxxxxxx1
<div class="container my-4">2
3
<p class="font-weight-bold">Bootstrap feed is a component which allows visualizing the activity of the users.</p>4
5
<p><strong>Detailed documentation and more examples of Bootstrap feed you can find in our <a href="https://mdbootstrap.com/docs/jquery/sections/social/"6
target="_blank">Bootstrap Social Sections Docs</a>.</p>7
8
<hr class="my-5">9
10
<h2 class="my-5 h2">v.1</h2>11
12
<!-- Section: Social newsfeed v.1 -->13
<section class="my-5">14
15
<!-- Grid row -->16
<div class="row">17
18
<!-- Grid column -->19
<div class="col-md-12">20
21
<!-- Newsfeed -->22
<div class="mdb-feed">23
24
<!-- First news -->25
<div class="news">26
27
<!-- Label -->28
<div class="label">29
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half">30
</div>31
32
<!-- Excerpt -->33
<div class="excerpt">34
35
<!-- Brief -->36
<div class="brief">37
<a class="name">John Doe</a> added you as a friend38
<div class="date">1 hour ago</div>39
</div>40
41
<!-- Feed footer -->42
<div class="feed-footer">43
<a class="like">44
<i class="fa fa-heart"></i>45
<span>5 likes</span>46
</a>47
</div>48
49
</div>50
<!-- Excerpt -->51
52
</div>53
<!-- First news -->54
55
<!-- Second news -->56
<div class="news">57
58
<!-- Label -->59
<div class="label">60
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half">61
</div>62
63
<!-- Excerpt -->64
<div class="excerpt">65
66
<!-- Brief -->67
<div class="brief">68
<a class="name">Anna Smith</a> added69
<a> 2 new illustrations</a>70
<div class="date">4 hours ago</div>71
</div>72
73
<!-- Added images -->74
<div class="added-images">75
<img src="https://mdbootstrap.com/img/Photos/Others/images/71.jpg" class="z-depth-1 rounded mb-md-0 mb-2">76
<img src="https://mdbootstrap.com/img/Photos/Others/images/74.jpg" class="z-depth-1 rounded">77
</div>78
79
<!-- Feed footer -->80
<div class="feed-footer">81
<a class="like">82
<i class="fa fa-heart"></i>83
<span>18 likes</span>84
</a>85
</div>86
87
</div>88
<!-- Excerpt -->89
90
</div>91
<!-- Second news -->92
93
<!-- Third news -->94
<div class="news">95
96
<!-- Label -->97
<div class="label">98
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half">99
</div>100
101
<!-- Excerpt -->102
<div class="excerpt">103
104
<!-- Brief -->105
<div class="brief">106
<a class="name">Danny Moore</a> added you as a friend107
<div class="date">7 hours ago</div>108
</div>109
110
<!-- Feed footer -->111
<div class="feed-footer">112
<a class="like">113
<i class="fa fa-heart"></i>114
<span>11 likes</span>115
</a>116
</div>117
118
</div>119
<!-- Excerpt -->120
121
</div>122
<!-- Third news -->123
124
<!-- Fourth news -->125
<div class="news">126
127
<!-- Label -->128
<div class="label">129
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half">130
</div>131
132
<!-- Excerpt -->133
<div class="excerpt">134
135
<!-- Brief -->136
<div class="brief">137
<a class="name">Lili Rose</a> posted on his page138
<div class="date">2 days ago</div>139
</div>140
141
<!-- Added text -->142
<div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore,143
iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat144
voluptate.</div>145
146
<!-- Feed footer -->147
<div class="feed-footer">148
<a class="like">149
<i class="fa fa-heart"></i>150
<span>7 likes</span>151
</a>152
</div>153
154
</div>155
<!-- Excerpt -->156
157
</div>158
<!-- Fourth news -->159
160
<!-- Fifth news -->161
<div class="news">162
163
<!-- Label -->164
<div class="label">165
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half">166
</div>167
168
<!-- Excerpt -->169
<div class="excerpt mb-0">170
171
<!-- Brief -->172
<div class="brief">173
<a class="name">Kate Harrison</a> added174
<a> 2 new photos</a> of you175
<div class="date">3 days ago</div>176
</div>177
178
<!-- Added images -->179
<div class="added-images">180
<img src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg" class="z-depth-1 rounded mb-md-0 mb-2">181
<img src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg" class="z-depth-1 rounded">182
</div>183
184
<!-- Feed footer -->185
<div class="feed-footer">186
<a class="like">187
<i class="fa fa-heart"></i>188
<span>53 likes</span>189
</a>190
</div>191
192
</div>193
<!-- Excerpt -->194
195
</div>196
<!-- Fifth news -->197
198
</div>199
<!-- Newsfeed -->200
201
</div>202
<!-- Grid column -->203
204
</div>205
<!-- Grid row -->206
207
</section>208
<!-- Section: Social newsfeed v.1 -->209
210
<hr class="my-5">211
212
<h2 class="my-5 h2">v.2</h2>213
214
<!-- Section: Social newsfeed v.2 -->215
<section class="my-5">216
217
<!-- Grid row -->218
<div class="row">219
220
<!-- Grid column -->221
<div class="col-lg-6">222
223
<!-- Newsfeed -->224
<div class="mdb-feed">225
226
<!-- First news -->227
<div class="news">228
229
<!-- Label -->230
<div class="label">231
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half">232
</div>233
234
<!-- Excerpt -->235
<div class="excerpt">236
237
<!-- Brief -->238
<div class="brief">239
<a class="name">John Doe</a> added you as a friend240
<div class="date">1 hour ago</div>241
</div>242
243
<!-- Feed footer -->244
<div class="feed-footer">245
<a class="comment" data-toggle="collapse" href="#collapseExample-1" aria-expanded="false"246
aria-controls="collapseExample-1">Comment</a> ·247
<span>248
<a>7</a>249
</span>250
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">251
<i class="fa fa-thumbs-up"></i>252
</a>253
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">254
<i class="fa fa-thumbs-down"></i>255
</a>256
<div class="collapse" id="collapseExample-1">257
<div class="card card-body mt-1">258
259
<!-- Add comment -->260
<div class="md-form mt-1 mb-1">261
<textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>262
<label for="form7">Add comment</label>263
</div>264
<div class="d-flex justify-content-end">265
<button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-1"266
aria-expanded="false" aria-controls="collapseExample-1">Cancel</button>267
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-1"268
aria-expanded="false" aria-controls="collapseExample-1">Reply</button>269
</div>270
271
</div>272
</div>273
</div>274
<!-- Feed footer -->275
276
</div>277
<!-- Excerpt -->278
279
</div>280
<!-- First news -->281
282
<!-- Second news -->283
<div class="news">284
285
<!-- Label -->286
<div class="label">287
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half">288
</div>289
290
<!-- Excerpt -->291
<div class="excerpt">292
293
<!-- Brief -->294
<div class="brief">295
<a class="name">Anna Smith</a> added296
<a> 2 new illustrations</a>297
<div class="date">4 hours ago</div>298
</div>299
300
<!-- Added images -->301
<div class="added-images">302
<img src="https://mdbootstrap.com/img/Photos/Others/images/50.jpg" class="z-depth-1 rounded mb-md-0 mb-2">303
<img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" class="z-depth-1 rounded">304
</div>305
306
<!-- Feed footer -->307
<div class="feed-footer">308
<a class="comment" data-toggle="collapse" href="#collapseExample-2" aria-expanded="false"309
aria-controls="collapseExample-2">Comment</a> ·310
<span>311
<a>31</a>312
</span>313
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">314
<i class="fa fa-thumbs-up"></i>315
</a>316
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">317
<i class="fa fa-thumbs-down"></i>318
</a>319
<div class="collapse" id="collapseExample-2">320
<div class="card card-body mt-1">321
322
<!-- Add comment -->323
<div class="md-form mt-1 mb-1">324
<textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>325
<label for="form7">Add comment</label>326
</div>327
<div class="d-flex justify-content-end">328
<button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-2"329
aria-expanded="false" aria-controls="collapseExample-2">Cancel</button>330
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-2"331
aria-expanded="false" aria-controls="collapseExample-2">Reply</button>332
</div>333
334
</div>335
</div>336
</div>337
<!-- Feed footer -->338
339
</div>340
<!-- Excerpt -->341
342
</div>343
<!-- Second news -->344
345
<!-- Third news -->346
<div class="news">347
348
<!-- Label -->349
<div class="label">350
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half">351
</div>352
353
<!-- Excerpt -->354
<div class="excerpt">355
356
<!-- Brief -->357
<div class="brief">358
<a class="name">Danny Moore</a> added you as a friend359
<div class="date">7 hours ago</div>360
</div>361
362
<!-- Feed footer -->363
<div class="feed-footer">364
<a class="comment" data-toggle="collapse" href="#collapseExample-3" aria-expanded="false"365
aria-controls="collapseExample-3">Comment</a> ·366
<span>367
<a>12</a>368
</span>369
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">370
<i class="fa fa-thumbs-up"></i>371
</a>372
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">373
<i class="fa fa-thumbs-down"></i>374
</a>375
<div class="collapse" id="collapseExample-3">376
<div class="card card-body mt-1">377
378
<!-- Add comment -->379
<div class="md-form mt-1 mb-1">380
<textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>381
<label for="form7">Add comment</label>382
</div>383
<div class="d-flex justify-content-end">384
<button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-3"385
aria-expanded="false" aria-controls="collapseExample-3">Cancel</button>386
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-3"387
aria-expanded="false" aria-controls="collapseExample-3">Reply</button>388
</div>389
390
</div>391
</div>392
</div>393
<!-- Feed footer -->394
395
</div>396
397
</div>398
<!-- Third news -->399
400
<!-- Fourth news -->401
<div class="news">402
403
<!-- Label -->404
<div class="label">405
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half">406
</div>407
408
<!-- Excerpt -->409
<div class="excerpt">410
<!-- Brief -->411
<div class="brief">412
<a class="name">Lili Rose</a> posted on his page413
<div class="date">2 days ago</div>414
</div>415
<!-- Added text -->416
<div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore,417
iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat418
voluptate.</div>419
<!-- Feed footer -->420
<div class="feed-footer">421
<a class="comment" data-toggle="collapse" href="#collapseExample-4" aria-expanded="false"422
aria-controls="collapseExample-4">Comment</a> ·423
<span>424
<a>25</a>425
</span>426
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">427
<i class="fa fa-thumbs-up"></i>428
</a>429
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">430
<i class="fa fa-thumbs-down"></i>431
</a>432
<div class="collapse" id="collapseExample-4">433
<div class="card card-body mt-1">434
<!-- Add comment -->435
<div class="md-form mt-1 mb-1">436
<textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>437
<label for="form7">Add comment</label>438
</div>439
<div class="d-flex justify-content-end">440
<button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-4"441
aria-expanded="false" aria-controls="collapseExample-4">Cancel</button>442
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-4"443
aria-expanded="false" aria-controls="collapseExample-4">Reply</button>444
</div>445
</div>446
</div>447
</div>448
</div>449
450
</div>451
<!-- Fourth news -->452
453
<!-- Fifth news -->454
<div class="news">455
456
<!-- Label -->457
<div class="label">458
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half">459
</div>460
461
<!-- Excerpt -->462
<div class="excerpt mb-0">463
464
<!-- Brief -->465
<div class="brief">466
<a class="name">Kate Harrison</a> added467
<a> 2 new photos</a> of you468
<div class="date">3 days ago</div>469
</div>470
471
<!-- Added images -->472
<div class="added-images">473
<img src="https://mdbootstrap.com/img/Photos/Others/images/81.jpg" class="z-depth-1 rounded mb-md-0 mb-2">474
<img src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" class="z-depth-1 rounded">475
</div>476
477
<!-- Feed footer -->478
<div class="feed-footer">479
<a class="comment" data-toggle="collapse" href="#collapseExample-5" aria-expanded="false"480
aria-controls="collapseExample-5">Comment</a> ·481
<span>482
<a>47</a>483
</span>484
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">485
<i class="fa fa-thumbs-up"></i>486
</a>487
<a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">488
<i class="fa fa-thumbs-down"></i>489
</a>490
<div class="collapse" id="collapseExample-5">491
<div class="card card-body mt-1">492
493
<!-- Add comment -->494
<div class="md-form mt-1 mb-1">495
<textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>496
<label for="form7">Add comment</label>497
</div>498
<div class="d-flex justify-content-end">499
<button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-5"500
aria-expanded="false" aria-controls="collapseExample-5">Cancel</button>501
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-5"502
aria-expanded="false" aria-controls="collapseExample-5">Reply</button>503
</div>504
505
</div>506
</div>507
</div>508
<!-- Feed footer -->509
510
</div>511
<!-- Excerpt -->512
513
</div>514
<!-- Fifth news -->515
516
</div>517
<!-- Newsfeed -->518
519
</div>520
<!-- Grid column -->521
522
</div>523
<!-- Grid row -->524
525
</section>526
<!-- Section: Social newsfeed v.2 -->527
528
</div>1
1
1
1
Console errors: 0