Creating a Webpage with Bootstrap4

Next, we will create a simple responsive webpage using Bootstrap4.

Before we start, you can preview the result here: https://www.tutorialpro.org/try/demo_source/trybs4_makeawebsite.htm

HTML Code

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>My First Bootstrap 4 Page</h1>
  <p>Resize the browser window to see the effect!</p> 
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>My Photo:</h5>
      <div class="fakeimg">Image placeholder</div>
      <p>Some text about me..</p>
      <h3>Some Links</h3>
      <p>Description text</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description</h5>
      <div class="fakeimg">Image</div>
      <p>Some text..</p>
      <p>tutorialpro.org, learning is not only about technology, but also about dreams!!! tutorialpro.org, learning is not only about technology, but also about dreams!!! tutorialpro.org, learning is not only about technology, but also about dreams!!!</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description</h5>
      <div class="fakeimg">Image</div>
      <p>Some text..</p>
    </div>
  </div>
</div>

<p>tutorialpro.org, learning is not just about technology, it's about dreams!!! tutorialpro.org, learning is not just about technology, it's about dreams!!! tutorialpro.org, learning is not just about technology, it's about dreams!!!</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer Content</p>
</div>