News feed

Bootstrap 5 News feed

Responsive News Feed templates built with Bootstrap 5. News article feed, instagram, facebook and twitter-like feed, posts with comments, social section & more.

Basic example

Simple newsfeed article, with an image and a "News of the day" label.

News of the day

Facilis consequatur eligendi

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.

Edit in sandbox 
        
            
            <!--Section: News of the day-->
            <div class="row gx-5">
              <div class="col-md-6 mb-4">
                <div class="bg-image hover-overlay ripple shadow-2-strong rounded-5" data-mdb-ripple-color="light">
                  <img src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp" class="img-fluid" />
                  <a href="#!">
                    <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                  </a>
                </div>
              </div>

              <div class="col-md-6 mb-4">
                <span class="badge bg-danger px-2 py-1 shadow-1-strong mb-3">News of the day</span>
                <h4><strong>Facilis consequatur eligendi</strong></h4>
                <p class="text-muted">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur
                  eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum
                  sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.
                </p>
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Read more</button>
              </div>
            </div>

            <!--Section: News of the day-->

Blog posts

Article card ideal for a blog post with category icon, and some related articles list.

Edit in sandbox 
        
            
            <div class="card px-3 pt-3" style="max-width: 32rem">
              <!-- News block -->
              <div>
                <!-- Featured image -->
                <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light">
                  <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
                  <a href="#!">
                    <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                  </a>
                </div>

                <!-- Article data -->
                <div class="row mb-3">
                  <div class="col-6">
                    <a href="" class="text-info">
                      <i class="fas fa-plane"></i>
                      Travels
                    </a>
                  </div>

                  <div class="col-6 text-end">
                    <u> 15.07.2020</u>
                  </div>
                </div>

                <!-- Article title and description -->
                <a href="" class="text-dark">
                  <h5>This is title of the news</h5>

                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
                    id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
                    adipisci iusto nam temporibus modi animi laboriosam?
                  </p>
                </a>

                <hr />

                <!-- News -->
                <a href="" class="text-dark">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                    </div>

                    <div class="col-9">
                      <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                      <p>
                        <u> 15.07.2020</u>
                      </p>
                    </div>
                  </div>
                </a>

                <!-- News -->
                <a href="" class="text-dark">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
                    </div>

                    <div class="col-9">
                      <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                      <p>
                        <u> 15.07.2020</u>
                      </p>
                    </div>
                  </div>
                </a>

                <!-- News -->
                <a href="" class="text-dark">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                    </div>

                    <div class="col-9">
                      <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                      <p>
                        <u> 15.07.2020</u>
                      </p>
                    </div>
                  </div>
                </a>

                <!-- News -->
                <a href="" class="text-dark">
                  <div class="row mb-4 border-bottom pb-2">
                    <div class="col-3">
                      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                        class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                    </div>

                    <div class="col-9">
                      <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                      <p>
                        <u> 15.07.2020</u>
                      </p>
                    </div>
                  </div>
                </a>
              </div>
              <!-- News block -->
            </div>

News aggregator

A magazine template page for with news and articles.
News of the day

Facilis consequatur eligendi

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.

Edit in sandbox 
        
            
            <!--Main layout-->
            <div class="container">
              <!--Section: News of the day-->
              <section class="border-bottom pb-4 mb-5">
                <div class="row gx-5">
                  <div class="col-md-6 mb-4">
                    <div class="bg-image hover-overlay ripple shadow-2-strong rounded-5" data-mdb-ripple-color="light">
                      <img src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp" class="img-fluid" />
                      <a href="#!">
                        <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                      </a>
                    </div>
                  </div>

                  <div class="col-md-6 mb-4">
                    <span class="badge bg-danger px-2 py-1 shadow-1-strong mb-3">News of the day</span>
                    <h4><strong>Facilis consequatur eligendi</strong></h4>
                    <p class="text-muted">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur
                      eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum
                      sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.
                    </p>
                    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Read more</button>
                  </div>
                </div>
              </section>
              <!--Section: News of the day-->

              <!--Section: Content-->
              <section>
                <div class="row gx-lg-5">
                  <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
                    <!-- News block -->
                    <div>
                      <!-- Featured image -->
                      <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4"
                        data-mdb-ripple-color="light">
                        <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="img-fluid" />
                        <a href="#!">
                          <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                        </a>
                      </div>

                      <!-- Article data -->
                      <div class="row mb-3">
                        <div class="col-6">
                          <a href="" class="text-info">
                            <i class="fas fa-plane"></i>
                            Travels
                          </a>
                        </div>

                        <div class="col-6 text-end">
                          <u> 15.07.2020</u>
                        </div>
                      </div>

                      <!-- Article title and description -->
                      <a href="" class="text-dark">
                        <h5>This is title of the news</h5>

                        <p>
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
                          id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
                          adipisci iusto nam temporibus modi animi laboriosam?
                        </p>
                      </a>

                      <hr />

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Hollywood Sign on The Hill" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Palm Springs Road" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Los Angeles Skyscrapers" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Skyscrapers" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- News block -->
                  </div>

                  <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                    <!-- News block -->
                    <div>
                      <!-- Featured image -->
                      <div class="bg-image hover-overlay shadow-1-strong rounded-5 ripple mb-4"
                        data-mdb-ripple-color="light">
                        <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/011.webp" class="img-fluid"
                          alt="Brooklyn Bridge" />
                        <a href="#!">
                          <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                        </a>
                      </div>

                      <!-- Article data -->
                      <div class="row mb-3">
                        <div class="col-6">
                          <a href="" class="text-danger">
                            <i class="fas fa-chart-pie"></i>
                            Business
                          </a>
                        </div>

                        <div class="col-6 text-end">
                          <u> 15.07.2020</u>
                        </div>
                      </div>

                      <!-- Article title and description -->
                      <a href="" class="text-dark">
                        <h5>This is title of the news</h5>

                        <p>
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
                          id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
                          adipisci iusto nam temporibus modi animi laboriosam?
                        </p>
                      </a>

                      <hr />

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/031.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Five Lands National Park" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/032.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Paris - Eiffel Tower" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/033.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Louvre" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/034.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Times Square" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- News block -->
                  </div>

                  <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                    <!-- News block -->
                    <div>
                      <!-- Featured image -->
                      <div class="bg-image hover-overlay shadow-1-strong rounded-5 ripple mb-4"
                        data-mdb-ripple-color="light">
                        <img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/018.webp" class="img-fluid"
                          alt="Golden Gate National Recreation Area" />
                        <a href="#!">
                          <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                        </a>
                      </div>

                      <!-- Article data -->
                      <div class="row mb-3">
                        <div class="col-6">
                          <a href="" class="text-warning">
                            <i class="fas fa-code"></i>
                            Technology
                          </a>
                        </div>

                        <div class="col-6 text-end">
                          <u> 15.07.2020</u>
                        </div>
                      </div>

                      <!-- Article title and description -->
                      <a href="" class="text-dark">
                        <h5>This is title of the news</h5>

                        <p>
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
                          id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
                          adipisci iusto nam temporibus modi animi laboriosam?
                        </p>
                      </a>

                      <hr />

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/011.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Brooklyn Bridge" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/012.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Hamilton Park" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/013.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Perdana Botanical Garden Kuala Lumpur" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>

                      <!-- News -->
                      <a href="" class="text-dark">
                        <div class="row mb-4 border-bottom pb-2">
                          <div class="col-3">
                            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/014.webp"
                              class="img-fluid shadow-1-strong rounded" alt="Perdana Botanical Garden" />
                          </div>

                          <div class="col-9">
                            <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
                            <p>
                              <u> 15.07.2020</u>
                            </p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- News block -->
                  </div>
                </div>
              </section>
              <!--Section: Content-->

              <!-- Pagination -->
              <nav class="my-4" aria-label="...">
                <ul class="pagination pagination-circle justify-content-center">
                  <li class="page-item">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                  </li>
                </ul>
              </nav>
            </div>
            <!--Main layout-->

News feed

A compact newsfeed card with upvotes, downvotes and comments columns.

Topic Comments
0 0 Styling in the Shadow DOM With CSS Shadow Parts
MDBootstrap staffpropremium a year ago
0
0 0 5 obscure HTTP methods to impress your hipster friends
MDBootstrap staffpropremium a year ago
0
0 0 Tips for Writing Animation Code Efficiently
MDBootstrap staffpropremium a year ago
0
0 0 Rolling With The Punches: Shifting Attack Tactics & Dropping Packets Faster & Cheaper At The Edge
MDBootstrap staffpropremium a year ago
0
0 0 Internship Experience: Cryptography Engineer
MDBootstrap staffpropremium a year ago
0
0 0 egghead: Nader Dabit - Full Stack Development in the Era of Serverless Computing
MDBootstrap staffpropremium a year ago
0
0 0 10 Interesting JavaScript and CSS Libraries for April 2020
MDBootstrap staffpropremium a year ago
0
0 0 bash: Split a String into Parts with `cut` in Bash
MDBootstrap staffpropremium a year ago
0
0 0 Node v10.20.1 (LTS)
MDBootstrap staffpropremium a year ago
0
0 0 React Digest Issue #247
MDBootstrap staffpropremium a year ago
0
Edit in sandbox 
        
            
            <div class="card d-flex" style="width: 48rem">
              <div class="card-body">
                <!--Table-->
                <table class="table-responsive">
                </table>
                <table class="table table-hover table-forum text-center">
                  <!--Table head-->
                  <thead>
                    <tr>
                      <th></th>
                      <th class="text-left">Topic</th>
                      <th>Comments</th>
                    </tr>
                  </thead>
                  <!--Table head-->
                  <!--Table body-->
                  <tbody>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          Styling in the Shadow DOM With CSS Shadow Parts
                        </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                          <div></div>
                        </div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          5 obscure HTTP methods to impress your hipster friends </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          Tips for Writing Animation Code Efficiently </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="https://mdbootstrap.com/news/frontend/tips-for-writing-animation-code-efficiently"
                          class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          Rolling With The Punches: Shifting Attack Tactics &amp; Dropping Packets Faster
                          &amp;
                          Cheaper At The Edge </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          Internship Experience: Cryptography Engineer </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          egghead: Nader Dabit - Full Stack Development in the Era of Serverless Computing
                        </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          10 Interesting JavaScript and CSS Libraries for April 2020 </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          bash: Split a String into Parts with `cut` in Bash </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          Node v10.20.1 (LTS) </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td scope="row" class="text-nowrap">

                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-dark-green btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-up ml-1"></i>
                        </a>
                        <a href="#" type="button" data-mdb-ripple-init class="btn btn-outline-danger btn-sm p-1 m-0 waves-effect">
                          <span class="value">0</span>
                          <i class="fas fa-thumbs-down ml-1"></i>
                        </a>
                      </td>
                      <td class="text-start">
                        <a href="#" class="font-weight-bold blue-text">
                          React Digest Issue #247 </a>
                        <div class="my-2">
                          <a href="#" class="blue-text">
                            <strong>MDBootstrap</strong>
                          </a>
                          <span class="badge bg-secondary mx-1">staff</span><span
                            class="badge bg-primary mx-1">pro</span><span class="badge bg-warning mx-1">premium</span>
                          <span>a year ago</span>
                        </div>
                        <div></div>
                      </td>
                      <td>
                        <a href="#" class="text-dark">
                          <span>0</span>
                          <i class="fas fa-comments ml-1"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                  <!--Table body-->
                </table>

                <!-- Table -->

                <!--Bottom Table UI-->
                <div class="d-flex justify-content-center">
                  <!--Pagination -->
                  <nav class="my-2 pt-2">
                    <ul class="pagination pagination-circle pg-info mb-0">
                      <!--First-->
                      <li class="page-item clearfix d-none d-md-block">
                        <a href="#" class="page-link waves-effect">
                          First </a>
                      </li>
                      <!--Arrow left-->
                      <li class="page-item">
                        <a href="#" class="page-link waves-effect" aria-label="Previous">
                          <span aria-hidden="true">«</span>
                          <span class="sr-only">
                            Previous </span>
                        </a>
                      </li>
                      <!--Numbers-->
                      <li class="page-item">
                        <a href="#" class="page-link waves-effect">11</a>
                      </li>
                      <li class="page-item">
                        <a href="#" class="page-link waves-effect">12</a>
                      </li>
                      <li class="page-item active">
                        <a href="#" class="page-link waves-effect">13</a>
                      </li>
                      <li class="page-item">
                        <a href="#" class="page-link waves-effect">14</a>
                      </li>
                      <li class="page-item">
                        <a href="#" class="page-link waves-effect">15</a>
                      </li>
                      <!--Arrow right-->
                      <li class="page-item">
                        <a href="#" class="page-link waves-effect" aria-label="Next">
                          <span aria-hidden="true">»</span>
                          <span class="sr-only">Next</span>
                        </a>
                      </li>
                      <!--First-->
                      <li class="page-item clearfix d-none d-md-block">
                        <a href="#" class="page-link waves-effect">
                          Last </a>
                      </li>
                    </ul>
                  </nav>
                  <!--/Pagination -->
                </div>
                <!--Bottom Table UI-->
              </div>
            </div>

Social media newsfeed v.1

Facebook-like newsfeed post with nested comments and user avatars built as media objects.

You can also check out our Facebook clone template in LAB section.

Avatar

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque ex non impedit corporis sunt nisi nam fuga dolor est, saepe vitae delectus fugit, accusantium qui nulla aut adipisci provident praesentium?

Avatar
Avatar
Avatar
Avatar
Avatar
Edit in sandbox 
        
            
          <!--Section: Newsfeed-->
          <section>
            <div class="card" style="max-width: 42rem">
              <div class="card-body">
                <!-- Data -->
                <div class="d-flex mb-3">
                  <a href="">
                    <img src="https://mdbcdn.b-cdn.net/img/new/avatars/18.webp" class="border rounded-circle me-2"
                      alt="Avatar" style="height: 40px" />
                  </a>
                  <div>
                    <a href="" class="text-dark mb-0">
                      <strong>Anna Doe</strong>
                    </a>
                    <a href="" class="text-muted d-block" style="margin-top: -6px">
                      <small>10h</small>
                    </a>
                  </div>
                </div>
                <!-- Description -->
                <div>
                  <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing
                    elit. Atque ex non impedit corporis sunt nisi nam fuga
                    dolor est, saepe vitae delectus fugit, accusantium qui
                    nulla aut adipisci provident praesentium?
                  </p>
                </div>
              </div>
              <!-- Media -->
              <div class="bg-image hover-overlay ripple rounded-0" data-mdb-ripple-color="light">
                <img src="https://mdbcdn.b-cdn.net/img/new/standard/people/077.webp" class="w-100" />
                <a href="#!">
                  <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
                </a>
              </div>
              <!-- Media -->
              <!-- Interactions -->
              <div class="card-body">
                <!-- Reactions -->
                <div class="d-flex justify-content-between mb-3">
                  <div>
                    <a href="">
                      <i class="fas fa-thumbs-up text-primary"></i>
                      <i class="fas fa-heart text-danger"></i>
                      <span>124</span>
                    </a>
                  </div>
                  <div>
                    <a href="" class="text-muted"> 8 comments </a>
                  </div>
                </div>
                <!-- Reactions -->

                <!-- Buttons -->
                <div class="d-flex justify-content-between text-center border-top border-bottom mb-4">
                  <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-lg" data-mdb-ripple-color="dark">
                    <i class="fas fa-thumbs-up me-2"></i>Like
                  </button>
                  <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-lg" data-mdb-ripple-color="dark">
                    <i class="fas fa-comment-alt me-2"></i>Comment
                  </button>
                  <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-lg" data-mdb-ripple-color="dark">
                    <i class="fas fa-share me-2"></i>Share
                  </button>
                </div>
                <!-- Buttons -->

                <!-- Comments -->

                <!-- Input -->
                <div class="d-flex mb-3">
                  <a href="">
                    <img src="https://mdbcdn.b-cdn.net/img/new/avatars/18.webp" class="border rounded-circle me-2"
                      alt="Avatar" style="height: 40px" />
                  </a>
                  <div data-mdb-input-init class="form-outline w-100">
                    <textarea class="form-control" id="textAreaExample" rows="2"></textarea>
                    <label class="form-label" for="textAreaExample">Write a comment</label>
                  </div>
                </div>
                <!-- Input -->

                <!-- Answers -->

                <!-- Single answer -->
                <div class="d-flex mb-3">
                  <a href="">
                    <img src="https://mdbcdn.b-cdn.net/img/new/avatars/8.webp" class="border rounded-circle me-2"
                      alt="Avatar" style="height: 40px" />
                  </a>
                  <div>
                    <div class="bg-body-tertiary rounded-3 px-3 py-1">
                      <a href="" class="text-dark mb-0">
                        <strong>Malcolm Dosh</strong>
                      </a>
                      <a href="" class="text-muted d-block">
                        <small>Lorem ipsum dolor sit amet consectetur,
                          adipisicing elit. Natus, aspernatur!</small>
                      </a>
                    </div>
                    <a href="" class="text-muted small ms-3 me-2"><strong>Like</strong></a>
                    <a href="" class="text-muted small me-2"><strong>Reply</strong></a>
                  </div>
                </div>

                <!-- Single answer -->
                <div class="d-flex mb-3">
                  <a href="">
                    <img src="https://mdbcdn.b-cdn.net/img/new/avatars/5.webp" class="border rounded-circle me-2"
                      alt="Avatar" style="height: 40px" />
                  </a>
                  <div>
                    <div class="bg-body-tertiary rounded-3 px-3 py-1">
                      <a href="" class="text-dark mb-0">
                        <strong>Rhia Wallis</strong>
                      </a>
                      <a href="" class="text-muted d-block">
                        <small>Et tempora ad natus autem enim a distinctio
                          quaerat asperiores necessitatibus commodi dolorum
                          nam perferendis labore delectus, aliquid placeat
                          quia nisi magnam.</small>
                      </a>
                    </div>
                    <a href="" class="text-muted small ms-3 me-2"><strong>Like</strong></a>
                    <a href="" class="text-muted small me-2"><strong>Reply</strong></a>
                  </div>
                </div>

                <!-- Single answer -->
                <div class="d-flex mb-3">
                  <a href="">
                    <img src="https://mdbcdn.b-cdn.net/img/new/avatars/6.webp" class="border rounded-circle me-2"
                      alt="Avatar" style="height: 40px" />
                  </a>
                  <div>
                    <div class="bg-body-tertiary rounded-3 px-3 py-1">
                      <a href="" class="text-dark mb-0">
                        <strong>Marcie Mcgee</strong>
                      </a>
                      <a href="" class="text-muted d-block">
                        <small>
                          Officia asperiores autem sit rerum architecto a
                          deserunt doloribus obcaecati, velit ab at, ad
                          delectus sapiente! Voluptatibus quaerat suscipit
                          in nostrum necessitatibus illum nemo quo beatae
                          obcaecati quidem optio fugit ipsam distinctio,
                          illo repellendus porro sequi alias perferendis ea
                          soluta maiores nisi eligendi? Mollitia debitis
                          quam ex, voluptates cupiditate magnam
                          fugiat.</small>
                      </a>
                    </div>
                    <a href="" class="text-muted small ms-3 me-2"><strong>Like</strong></a>
                    <a href="" class="text-muted small me-2"><strong>Reply</strong></a>
                  </div>
                </div>

                <!-- Single answer -->
                <div class="d-flex mb-3">
                  <a href="">
                    <img src="https://mdbcdn.b-cdn.net/img/new/avatars/10.webp" class="border rounded-circle me-2"
                      alt="Avatar" style="height: 40px" />
                  </a>
                  <div>
                    <div class="bg-body-tertiary rounded-3 px-3 py-1">
                      <a href="" class="text-dark mb-0">
                        <strong>Hollie James</strong>
                      </a>
                      <a href="" class="text-muted d-block">
                        <small>Voluptatibus quaerat suscipit in nostrum
                          necessitatibus</small>
                      </a>
                    </div>
                    <a href="" class="text-muted small ms-3 me-2"><strong>Like</strong></a>
                    <a href="" class="text-muted small me-2"><strong>Reply</strong></a>
                  </div>
                </div>

                <!-- Answers -->

                <!-- Comments -->
              </div>
              <!-- Interactions -->
            </div>
          </section>
          <!--Section: Newsfeed-->

Social media newsfeed v.2

Twitter-like newsfeed with profile statuses image, link and video embeds.

You can also check out our Twitter clone template in the LAB section.

Home

Avatar
Avatar
Miley Cyrus @mileycyrus • 2h

Lorem ipsum dolor, sit amet #consectetur adipisicing elit. Nobis assumenda eveniet ipsum libero mollitia vero doloremque #perspiciatis molestiae omnis, quam iure dicta reprehenderit distinctio facere labore atque, sit #ratione quo.

  • 7
  • 35
Avatar
Miley Cyrus @mileycyrus • 3h

Nobis assumenda eveniet ipsum libero mollitia vero doloremque molestiae reprehenderit.

Avatar

Title of the news

This is a wider card with supporting text below as a natural lead-in to additional content.

example.pl

  • 51
  • 185
Avatar
Bob Marley @bobmarley • 5h

Lorem ipsum dolor, sit amet #consectetur adipisicing elit. Officiis, #repellat. Error cumque temporibus eum pariatur ducimus facere? Obcaecati fugit, nobis eos #deserunt odit libero voluptatibus, iste laudantium, tempore ratione ut.

Avatar

Title of the news

This is a wider card with supporting text below as a natural lead-in to additional content.

example.pl

  • 8
  • 97
Avatar
Anna Doe @annadoe • 7h

Error cumque temporibus eum pariatur ducimus facere? Obcaecati fugit, nobis eos #deserunt odit libero voluptatibus, iste laudantium, tempore ratione ut.

Fissure in Sandstone
  • 11
  • 65
Avatar
Mark Twain @marktawin • 10h

Obcaecati fugit, nobis eos odit libero voluptatibus, iste laudantium, tempore ratione ut.

  • 34
  • 159
Edit in sandbox 
        
            
          <div class="card" style="width: 48rem">
            <div class="border border-left border-right px-0">
              <div class="p-3 border-bottom">
                <h4 class="d-flex align-items-center mb-0">
                  Home <i class="far fa-xs fa-star ms-auto text-primary"></i>
                </h4>
              </div>
              <div>
                <div class="card shadow-0">
                  <div class="card-body border-bottom pb-2">
                    <div class="d-flex">
                      <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp" class="rounded-circle"
                        height="50" alt="Avatar" loading="lazy" />
                      <div class="d-flex align-items-center w-100 ps-3">
                        <div class="w-100">
                          <input type="text" id="form143" class="form-control form-status border-0 py-1 px-0"
                            placeholder="What's happening" />
                        </div>
                      </div>
                    </div>
                    <div class="d-flex justify-content-between">
                      <ul class="list-unstyled d-flex flex-row ps-3 pt-3" style="margin-left: 50px;">
                        <li>
                          <a href=""><i class="far fa-image pe-2"></i></a>
                        </li>
                        <li>
                          <a href=""><i class="fas fa-photo-video px-2"></i></a>
                        </li>
                        <li>
                          <a href=""><i class="fas fa-chart-bar px-2"></i></a>
                        </li>
                        <li>
                          <a href=""><i class="far fa-smile px-2"></i></a>
                        </li>
                        <li>
                          <a href=""><i class="far fa-calendar-check px-2"></i></a>
                        </li>
                      </ul>
                      <div class="d-flex align-items-center">
                        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-rounded">Tweet</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="d-flex p-3 border-bottom">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (29).webp" class="rounded-circle"
                      height="50" alt="Avatar" loading="lazy" />
                    <div class="d-flex w-100 ps-3">
                      <div>
                        <a href="">
                          <h6 class="text-body">
                            Miley Cyrus
                            <span class="small text-muted font-weight-normal">@mileycyrus</span>
                            <span class="small text-muted font-weight-normal"> • </span>
                            <span class="small text-muted font-weight-normal">2h</span>
                            <span><i class="fas fa-angle-down float-end"></i></span>
                          </h6>
                        </a>
                        <p style="line-height: 1.2;">
                          Lorem ipsum dolor, sit amet <a href="">#consectetur</a> adipisicing elit.
                          Nobis assumenda eveniet ipsum libero mollitia vero doloremque
                          <a href="">#perspiciatis</a> molestiae omnis, quam iure dicta reprehenderit
                          distinctio facere labore atque, sit <a href="">#ratione</a> quo.
                        </p>
                        <ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
                          <li>
                            <i class="far fa-comment"></i>
                          </li>
                          <li><i class="fas fa-retweet"></i><span class="small ps-2">7</span></li>
                          <li><i class="far fa-heart"></i><span class="small ps-2">35</span></li>
                          <li>
                            <i class="far fa-share-square"></i>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex p-3 border-bottom">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (29).webp" class="rounded-circle"
                      height="50" alt="Avatar" loading="lazy" />
                    <div class="d-flex w-100 ps-3">
                      <div>
                        <a href="#">
                          <h6 class="text-body">
                            Miley Cyrus
                            <span class="small text-muted font-weight-normal">@mileycyrus</span>
                            <span class="small text-muted font-weight-normal"> • </span>
                            <span class="small text-muted font-weight-normal">3h</span>
                            <span><i class="fas fa-angle-down float-end"></i></span>
                          </h6>
                        </a>
                        <p style="line-height: 1.2;">
                          Nobis assumenda eveniet ipsum libero mollitia vero doloremque molestiae
                          reprehenderit.
                        </p>
                        <div class="card border mb-3 shadow-0" style="max-width: 540px;">
                          <div class="row g-0">
                            <div class="col-md-3">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (21).webp" alt="Avatar"
                                class="img-fluid rounded-left" />
                            </div>
                            <div class="col-md-9">
                              <div class="card-body">
                                <p class="card-text" style="line-height: 1;">
                                  Title of the news
                                </p>
                                <p class="card-text small mb-0" style="line-height: 1.2;">
                                  This is a wider card with supporting text below as a natural lead-in
                                  to additional content.
                                </p>
                                <p class="card-text small mb-0" style="line-height: 1.2;">
                                  <i class="fas fa-link fa-xs pe-1"></i>example.pl
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
                          <li>
                            <i class="far fa-comment"></i>
                          </li>
                          <li><i class="fas fa-retweet"></i><span class="small ps-2">51</span></li>
                          <li><i class="far fa-heart"></i><span class="small ps-2">185</span></li>
                          <li>
                            <i class="far fa-share-square"></i>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex p-3 border-bottom">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (22).webp" class="rounded-circle"
                      height="50" alt="Avatar" loading="lazy" />
                    <div class="d-flex w-100 ps-3">
                      <div>
                        <a href="#">
                          <h6 class="text-body">
                            Bob Marley
                            <span class="small text-muted font-weight-normal">@bobmarley</span>
                            <span class="small text-muted font-weight-normal"> • </span>
                            <span class="small text-muted font-weight-normal">5h</span>
                            <span><i class="fas fa-angle-down float-end"></i></span>
                          </h6>
                        </a>
                        <p style="line-height: 1.2;">
                          Lorem ipsum dolor, sit amet <a href="">#consectetur</a> adipisicing elit.
                          Officiis, <a href="">#repellat</a>. Error cumque temporibus eum pariatur
                          ducimus facere? Obcaecati fugit, nobis eos <a href="">#deserunt</a> odit
                          libero voluptatibus, iste laudantium, tempore ratione ut.
                        </p>
                        <div class="card border mb-3 shadow-0" style="max-width: 540px;">
                          <div class="row g-0">
                            <div class="col-md-3">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (20).webp" alt="Avatar"
                                class="img-fluid rounded-left" />
                            </div>
                            <div class="col-md-9">
                              <div class="card-body">
                                <p class="card-text" style="line-height: 1;">
                                  Title of the news
                                </p>
                                <p class="card-text small mb-0" style="line-height: 1.2;">
                                  This is a wider card with supporting text below as a natural lead-in
                                  to additional content.
                                </p>
                                <p class="card-text small mb-0" style="line-height: 1.2;">
                                  <i class="fas fa-link fa-xs pe-1"></i>example.pl
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
                          <li>
                            <i class="far fa-comment"></i>
                          </li>
                          <li><i class="fas fa-retweet"></i><span class="small ps-2">8</span></li>
                          <li><i class="far fa-heart"></i><span class="small ps-2">97</span></li>
                          <li>
                            <i class="far fa-share-square"></i>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex p-3 border-bottom">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (24).webp" class="rounded-circle"
                      height="50" alt="Avatar" loading="lazy" />
                    <div class="d-flex w-100 ps-3">
                      <div>
                        <a href="">
                          <h6 class="text-body">
                            Anna Doe
                            <span class="small text-muted font-weight-normal">@annadoe</span>
                            <span class="small text-muted font-weight-normal"> • </span>
                            <span class="small text-muted font-weight-normal">7h</span>
                            <span><i class="fas fa-angle-down float-end"></i></span>
                          </h6>
                        </a>
                        <p style="line-height: 1.2;">
                          Error cumque temporibus eum pariatur ducimus facere? Obcaecati fugit, nobis
                          eos <a href="">#deserunt</a> odit libero voluptatibus, iste laudantium,
                          tempore ratione ut.
                        </p>
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp"
                          class="img-fluid rounded mb-3" alt="Fissure in Sandstone" />
                        <ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
                          <li>
                            <i class="far fa-comment"></i>
                          </li>
                          <li><i class="fas fa-retweet"></i><span class="small ps-2">11</span></li>
                          <li><i class="far fa-heart"></i><span class="small ps-2">65</span></li>
                          <li>
                            <i class="far fa-share-square"></i>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex p-3 border-bottom mb-5">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (3).webp" class="rounded-circle"
                      height="50" alt="Avatar" loading="lazy" />
                    <div class="d-flex w-100 ps-3">
                      <div>
                        <a href="">
                          <h6 class="text-body">
                            Mark Twain
                            <span class="small text-muted font-weight-normal">@marktawin</span>
                            <span class="small text-muted font-weight-normal"> • </span>
                            <span class="small text-muted font-weight-normal">10h</span>
                            <span><i class="fas fa-angle-down float-end"></i></span>
                          </h6>
                        </a>
                        <p style="line-height: 1.2;">
                          Obcaecati fugit, nobis eos odit libero voluptatibus, iste laudantium,
                          tempore ratione ut.
                        </p>
                        <div class="ratio ratio-16x9 mb-3">
                          <iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video"
                            allowfullscreen></iframe>
                        </div>
                        <ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
                          <li>
                            <i class="far fa-comment"></i>
                          </li>
                          <li><i class="fas fa-retweet"></i><span class="small ps-2">34</span></li>
                          <li><i class="far fa-heart"></i><span class="small ps-2">159</span></li>
                          <li>
                            <i class="far fa-share-square"></i>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>