Duomly

Posted on Aug 3, 2020 • Originally published at blog.duomly.com

Bootstrap 5 Tutorial: How to Create a Simple Web Page Using Bootstrap 5

#html #css #tutorial #webdev

This article was originally published at https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/

Create a simple web page using Bootstrap

A few weeks ago, Bootstrap 5 alpha version appeared on the market, and that’s why today I’d like to go through what’s new and create a simple web page using Bootstrap 5.

In April, we’ve published the article and video about Bootstrap 4 where we are showing you step by step how to build a simple dashboard, so if you missed that episode and article, go ahead and check it here:

How to build a dashboard in Bootstrap 4 tutorial

Today, I’d like to show you how to build a portfolio website for a software house using Bootstrap 5.

Of course, as always, I have a video tutorial for you as well, so if you are a person who prefers to watch, then read, visit our Youtube channel:

Let’s start with what’s new in Bootstrap 5!

What’s new in Bootstrap 5?

As the Bootstrap 5 Alpha is available from a few weeks, we are able o talk about the new features that came with the new release. Let’s go through the most significant changes.

Bootstrap used to use jQuery for elements like popup or tooltips. In the 5th version, it doesn’t use jQuery anymore. Instead, it works with pure Javascript.
Bootstrap 5 brings CSS custom properties, thank to dropping support for Internet Explorer. Let’s take a look at the example with tables Bootstrap presented in their documentation:

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
}

Now, in Bootstrap 5 documentation, we can find another tab - Customization. It brings information about theming, customizing, and extending Bootstrap with Sass, more colors, and other options.
Fully customized form controls are another feature that came with the Bootstrap 5 version. From now, the design of the controls like checkbox or radio box doesn’t depend on the browser.
New Utility API for better control is another feature.
Besides that, the Bootstrap grid was enhanced, and now we can use a new class xxl, gutter was replaced with g* utilities; also, they removed position: relative as a default value for columns.

We can expect some more changes in the next releases.

So, I think it’s time to see how brand new Bootstrap version works.

How to start Bootstrap project?

Let’s start creating our website by creating a folder where we are going to place it, and inside that folder, let’s create an index.html file.

After opening our index.html file in your favorite code editor, let’s set the basic HTML file structure and all needed CDNs.

<!DOCTYPE>
<html>
  <head>
    <title>Portfolio Website</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <!-- JavaScript and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </head>
  <body>
  </body>
</html>

Ok, when that’s ready, let’s create one more file for the custom styles. Let’s call it styles.css, and let’s place it in the same folder.

How to build menu in Bootstrap 5?

Now, it’s time to start our building on our website. The first element we are going to create is navigation. Inside the body tags, we are going to use the following code.

<!-- Navbar -->
<nav class="py-3 navbar navbar-expand-lg fixed-top auto-hiding-navbar">
  <div class="container">
    <a class="navbar-brand"" href="#">
      <img class="logo" src="./assets/logo.png" /> SoftwareHouse
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <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="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar -->

We need a logo for our website. Find any image or icon you’d like to use as a logo, and place it into the assets folder in the website folder. I imported my logo, as a logo.png file, so make sure your import is correct to your image, and it’s location.

Next, we will add some custom styling for our navigation. Let’s open the styles.css file, and let’s add the following code.

body {
  display: block;
  overflow-x: hidden;
}
nav {
  background-color: white;
}
.navbar-brand img {
  max-height: 50px;
}
.navbar-brand {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 900;
  color: #683aa4;
}
nav ul li a {
  color: #a9a9a9;
  font-size: 22px;
  margin: auto 10px;
}
nav ul li a:hover {
  color: #683aa4;
}

Great, your menu is ready now!

How to build hero section in Bootstrap 5?

The next step in building our web page is to create a hero section. Below the navigation code, let’s create a new section with the image, text, and three cards.

For this part, you’ll need an image, that I called hero-img.png, and three icons for the cards.

<!-- Hero section -->
<section id="hero">
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Software<br>Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <button type="button" class="btn btn-dark btn-large">Learn more</button>
      </div>
      <div class="col img-col">
        <img src="./assets/hero-img.png" class="img-fluid" alt="Software Development">
      </div>
    </div>
    <div class="row cards">

      <div class="col-md-4 d-flex justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <img src="./assets/icon1.svg" class="icon" alt="Service One"/>
            <h5 class="card-title">Web Dev</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 d-flex justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <img src="./assets/icon2.svg" class="icon" alt="Service Two"/>
            <h5 class="card-title">Machine Learning</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 d-flex justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <img src="./assets/icon3.svg" class="icon" alt="Service Three"/>
            <h5 class="card-title">Security</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End Hero section -->

To make it look good, we still need to add some custom styles. So, let’s open our styles.css file and place there the following code.

section {
  padding-top: 50px;
  padding-bottom: 50px;
}
section h1 {
  text-transform: uppercase;
  font-weight: 900;
  color: #683aa4;
  text-align: left;
  margin-bottom: 20px;
}
section p {
  font-size: 16px;
  font-weight: 300;
}
button {
  max-width: 50%;
  border-radius: 50px !important;
}
#hero .col {
  justify-content: center; 
  flex-direction: column;
  display: flex;
}
#hero .img-col {
  justify-content: flex-end; 
  margin-top: 100px;
}
#hero img {
  max-width: 130% !important;
  width: 130%;
}
#hero .card {
  box-shadow: 11px 7px 16px #f9f9f9;
  border: 0;
  text-align: center;
}
#hero .icon {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

Great now, your website should look like in the image below (just with different photos).

How to build about us section in Bootstrap 5?

The next element we are going to build on our web page is the About Us section. Here we will also add an image, so make sure you have one called about-us.png in your assets folder.

Let’s go to our index.html file, and below the hero section, let’s add the following code.

<!-- About us section -->
<section id="about-us">
  <div class="container">
    <div class="row align-items-center">
      <div class="col">
        <img src="./assets/about-us.png" class="img-fluid" alt="About Us">
      </div>
      <div class="col text-col">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <button type="button" class="btn btn-dark btn-large">Let's meet</button>
      </div>
    </div>
  </div>
</section>
<!-- End About us section -->

And viola, the second section is ready.

How to build portfolio section in Bootstrap 5?

Now, the most important part of every software house page is coming. We will create a projects section, consisting of four cards in two rows.

Make sure you have another 4 images for this section in your assets folder, maybe you can use any of your own projects that you’d like to show.

Below the About Us section, let’s add the following code.

<!-- Projects section -->
<section id="projects">
<div class="container">
  <div class="row align-items-center projects">
    <div class="col">
      <h1>Our Projects</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>

  <div class="row align-items-center">
    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Investment App</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">React Native, Java, REST Api</small></p>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">My Doc</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Kotlin, REST Api</small></p>
        </div>
      </div>
    </div>
  </div>

  <div class="row align-items-center">
    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Socialize</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Flutter, Machine Learning Algrithms, Python, NodeJS</small></p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project4.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Give Me A Ride</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Google Api, Golang, Swift</small></p>
        </div>
      </div>
    </div>

  </div>
</div>
</section>
<!-- End Projects section -->

And some more CSS to make it good looking.

#projects .projects {
  margin-bottom: 50px;
}

There’s just one more thing to finish our website. We will add a contact section, with some text. Let’s add the following code in the index.html file.

<!-- Contact section -->
<section id="contact">
  <div class="container">
    <div class="row align-items-center">
      <div class="col">
        <h1>Contact US</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      </div>
    </div>
  </div>
</section>
<!-- End Contact section -->

And the last part is to add the last CSS code.

#contact {
  text-align: center;
  background-color: #683aa4;
  color: white;
}
#contact h1 {
  text-align: center;
  color: white;
}

Woohoo! Our Bootstrap 5 web page is ready now! Here's the result of our code.

Conclusion

Congratulations, you’ve just created a portfolio landing page using Bootstrap 5. If you’d like to create your own portfolio page, feel free to add your favorite images and texts, and you’re going to have a ready website.
If you’d like to learn how to build a simple dashboard in Bootstrap, take a look at our previous Bootstrap tutorial.

How to build dashboard in Bootstrap 4 tutorial

Besides that, feel free to join us at Duomly where we have a Bootstrap course, where you can learn how to build an e-commerce.

Thank you for reading,
Anna from Duomly

Top comments (4)

Madza • Aug 3 '20

I love how Bootstrap adapts to styling trends.
Bootstrap 4 was based on GRID, now Bootstrap 5 is supporting utility approach like Tailwind.. What will be Bootstrap 6 based on? Maybe Atomic CSS? As I believe it holds great future potential on how we will style things in upcoming years :)