News feed

Bootstrap 5 News feed

Responsive News Feed built with the latest Bootstrap 5. Enhance your project with a variety of social sections such as news feed, comments, and post cards.

Basic example
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. 


                      <!--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://mdbootstrap.com/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" class="btn btn-primary">Read more</button>
                        </div>
                      </div>

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

Blog posts


                      <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://mdbootstrap.com/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://mdbootstrap.com/img/new/standard/city/041.webp"
                                  class="img-fluid shadow-1-strong rounded" alt="" />
                              </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://mdbootstrap.com/img/new/standard/city/042.webp"
                                  class="img-fluid shadow-1-strong rounded" alt="" />
                              </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://mdbootstrap.com/img/new/standard/city/043.webp"
                                  class="img-fluid shadow-1-strong rounded" alt="" />
                              </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://mdbootstrap.com/img/new/standard/city/044.webp"
                                  class="img-fluid shadow-1-strong rounded" alt="" />
                              </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
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. 


                      <!--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://mdbootstrap.com/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" 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://mdbootstrap.com/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://mdbootstrap.com/img/new/standard/city/041.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/042.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/043.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/044.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/fluid/city/011.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-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://mdbootstrap.com/img/new/standard/city/031.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/032.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/033.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/034.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/fluid/city/018.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-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://mdbootstrap.com/img/new/standard/city/011.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/012.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/013.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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://mdbootstrap.com/img/new/standard/city/014.webp"
                                        class="img-fluid shadow-1-strong rounded" alt="" />
                                    </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

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 

                      <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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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"
                                    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" 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 newsfeed v.1

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? 


                    <!--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://mdbootstrap.com/img/new/avatars/18.webp"
                                class="border rounded-circle me-2" alt="" 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://mdbootstrap.com/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" 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" 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" 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://mdbootstrap.com/img/new/avatars/18.webp"
                                class="border rounded-circle me-2" alt="" style="height: 40px" />
                            </a>
                            <div 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://mdbootstrap.com/img/new/avatars/8.webp"
                                class="border rounded-circle me-2" alt="" style="height: 40px" />
                            </a>
                            <div>
                              <div class="bg-light 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://mdbootstrap.com/img/new/avatars/5.webp"
                                class="border rounded-circle me-2" alt="" style="height: 40px" />
                            </a>
                            <div>
                              <div class="bg-light 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://mdbootstrap.com/img/new/avatars/6.webp"
                                class="border rounded-circle me-2" alt="" style="height: 40px" />
                            </a>
                            <div>
                              <div class="bg-light 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://mdbootstrap.com/img/new/avatars/10.webp"
                                class="border rounded-circle me-2" alt="" style="height: 40px" />
                            </a>
                            <div>
                              <div class="bg-light 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 newsfeed v.2

Home

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
Miley Cyrus @mileycyrus • 3h

Nobis assumenda eveniet ipsum libero mollitia vero doloremque molestiae reprehenderit.

...

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
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.

...

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
Anna Doe @annadoe • 7h

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

...
  • 11
  • 65
Mark Twain @marktawin • 10h

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

  • 34
  • 159

                    <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://mdbootstrap.com/img/Photos/Avatars/img (31).webp"
                                  class="rounded-circle" height="50" alt="" 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" class="btn btn-primary btn-rounded">Tweet</button>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div>
                            <div class="d-flex p-3 border-bottom">
                              <img src="https://mdbootstrap.com/img/Photos/Avatars/img (29).webp" class="rounded-circle"
                                height="50" alt="" 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://mdbootstrap.com/img/Photos/Avatars/img (29).webp" class="rounded-circle"
                                height="50" alt="" 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://mdbootstrap.com/img/Photos/Avatars/img (21).webp" alt="..."
                                          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://mdbootstrap.com/img/Photos/Avatars/img (22).webp" class="rounded-circle"
                                height="50" alt="" 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://mdbootstrap.com/img/Photos/Avatars/img (20).webp" alt="..."
                                          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://mdbootstrap.com/img/Photos/Avatars/img (24).webp" class="rounded-circle"
                                height="50" alt="" 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://mdbootstrap.com/img/new/standard/nature/184.webp"
                                    class="img-fluid rounded mb-3" alt="..." />
                                  <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://mdbootstrap.com/img/Photos/Avatars/img (3).webp" class="rounded-circle"
                                height="50" alt="" 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>