Creating a Simple News Website With Bootstrap

sahretech October 31, 2022
Creating a Simple News Website With Bootstrap
Hello everyone, welcome back to porkaone. On this occasion we will learn to make a simple news website display using bootstrap 5. Follow the details below.



Web Framework to be Created

This tutorial is suitable for beginners who are just learning about bootstrap. Here we will create a simple news website display from menus, news headlines, news lists, forms, maps and footers. Below is the web framework we will be creating.

Frame






Preparing Files

1. Create a new file with the name index.html.

2. This time we will use bootstrap in the form of a CDN. Please copy the script below and paste it into the index.html file 
    

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap demo</title>
        <!-- source css code, imported from outside -->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
          crossorigin="anonymous"/>
    </head>
    <body>
        
        <!-- this is menu section  -->
        <!-- this is headline section -->
        <!-- this is list news section -->
        <!-- this is maps section -->
        <!-- this is footer section -->
          
        <!-- source javascript is needed to make dynamic components work using a javascript language imported from outside -->
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
          crossorigin="anonymous"></script>
    </body>
</html>


Creating Menu

Bootstrap already provides several sample menus that can be used easily. Copy the script below and paste it under the section <-- this is menu section -->
    

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">SuperNews</a>
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">News</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>
            </ul>
        </div>
    </div>
</nav>




Creating News Headlines

We will create a news headline section which will have a large image with curved lines on each side. to make curved line we use class rounded-4, then there is a title at the bottom. Copy the script below and paste it under the section <-- this is headline section -->
    

<div class="container mt-5">
    <img class="rounded-4" style="object-fit: cover; width: 100%; height: 400px;" src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg" alt="">
    <h4 class="mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum porro consequuntur enim optio recusandae, delectus, veritatis quam provident esse animi explicabo debitis iste neque, nulla architecto. Rerum rem impedit nulla!</h4> 
</div>




Creating News List

We will create a list or news list by using class cards. And to make it arranged into 4 parts each row, we can use class row and class col-3. Copy the script below and paste it under the section <-- this is list news section --> 
    


<div class="container mt-5">
    <h3>List of News</h3>
    <div class="row">
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
        <div class="col-3">
            <img
              class="rounded-4"
              style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
              src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
              alt=""
            />
            <p class="mt-3">
              <b>Jhon Due | 20-08-2022</b> <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
              accusantium praesentium ducimus
            </p>
        </div>
    </div>
</div>




Creating a Map

To display a map, we can use google maps. Open google maps → search location → share → embed map → copy and paste at the bottom <-- this is maps section -->. 
    

<div class="container mt-5">
    <iframe
        class="rounded-4"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3829736104794!2d104.75456151468782!3d-2.991052340704834!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e3b7606b5245b43%3A0xdc206fa2daf3249a!2sKantor%20Walikota%20Palembang!5e0!3m2!1sid!2sid!4v1659063786258!5m2!1sid!2sid"
        width="100%"
        height="350"
        style="border: 0"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
Change the width and height to your liking. Here I simply set a height of 300px and a width of 100% to make the map fill the width of the screen.



Creating Footers

Footer is the bottom part of a website. It usually contains external links, addresses, and other additional info not mentioned above. Copy and paste below <-- this is footer section -->
    


<div class="bg-light mt-5">
    <div class="container p-4 text-center">
        Copyright ©2022 All rights reserved | Created By Nabil Sahretech
    </div>
</div>




Full Script

    


    <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>Bootstrap demo</title>
            <!-- source css code, imported from outside -->
            <link
              href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
              rel="stylesheet"
              integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
              crossorigin="anonymous"
            />
          </head>
          <body>
            <!-- this is menu section  -->
            <nav class="navbar navbar-expand-lg bg-light">
              <div class="container">
                <a class="navbar-brand" href="#">SuperNews</a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarNav"
                  aria-controls="navbarNav"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">News</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
        
            <!-- this is headline section -->
            <div class="container mt-5">
              <img
                class="rounded-4"
                style="object-fit: cover; width: 100%; height: 400px"
                src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                alt=""
              />
              <h6 class="mt-3">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum
                porro consequuntur enim optio recusandae, delectus, veritatis quam
                provident esse animi explicabo debitis iste neque, nulla architecto.
                Rerum rem impedit nulla!
              </h6>
            </div>
        
            <!-- this is list news section -->
            <div class="container mt-5">
              <h3>List of News</h3>
              <div class="row">
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
                <div class="col-3">
                  <img
                    class="rounded-4"
                    style="object-fit: cover; width: 100%; aspect-ratio: 1/1"
                    src="https://cdn.pixabay.com/photo/2014/05/21/22/28/old-newspaper-350376__340.jpg"
                    alt=""
                  />
                  <p class="mt-3">
                    <b>Jhon Due | 20-08-2022</b> <br />
                    Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta
                    accusantium praesentium ducimus
                  </p>
                </div>
              </div>
            </div>
        
            
            <!-- this is maps section -->
            <div class="container mt-5">
              <iframe
                class="rounded-4"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3829736104794!2d104.75456151468782!3d-2.991052340704834!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e3b7606b5245b43%3A0xdc206fa2daf3249a!2sKantor%20Walikota%20Palembang!5e0!3m2!1sid!2sid!4v1659063786258!5m2!1sid!2sid"
                width="100%"
                height="350"
                style="border: 0"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>
        
            <!-- this is footer section -->
            <div class="bg-light mt-5">
              <div class="container p-4 text-center">
                Copyright ©2022 All rights reserved | Created By Nabil Sahretech
              </div>
            </div>
        
            <!-- source javascript is needed to make dynamic components work using a javascript language imported from outside -->
            <script
              src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
              integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
              crossorigin="anonymous"
            ></script>
          </body>
        </html>



Final Result

If you have passed all the steps. It's time for you to try it out. Right-click on the file and select your browser. Then it will look like the image below.

Final Result


That's our tutorial this time about how to make a simple news website display using bootstrap. Hopefully useful, if you have any questions, please ask directly in the comments column below.

Post a Comment

0 Comments

Come on ask us and let's discuss together

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)