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

Duomly - Aug 3 '20 - - Dev Community

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};
}
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

How to create a simple web page using Bootstrap 5 - Hero section

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 -->
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

And some more CSS to make it good looking.

#projects .projects {
  margin-bottom: 50px;
}
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

How to create a simple web page using Bootstrap 5

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.

Duomly - Programming Online Courses

Thank you for reading,
Anna from Duomly

Image
What Can A Weekly Assessment In Mental Health Project Can Change Your Life
Image
Watch Out: How Accident Lawyer Tulsa Is Taking Over And What To Do About It
Image
5 Must-Know Hismphash Practices You Need To Know For 2023
Image
10 Things You've Learned In Kindergarden To Help You Get Accident Lawyer Boston
Image
Why No One Cares About Best Asbestos Lawyers
Image
StepWise: A Powerful C# Workflow Engine for Task Execution

dotnet, tooling, typescript
Image
What Is The Future Of Asbestos Related Death Compensation Be Like In 100 Years?
Image
10 Things You Learned In Preschool That'll Help You Understand Railroad Accident Lawyer
Image
Keuntungan Mendapati Bonus Referal Judi Online
Image
beberapa langkah deposit dalam website slots online
Image
A Complete Guide To Ghost Immobiliser Review Dos And Don'ts
Image
Why You Should Concentrate On Improving Landlord Gas Safety Certificate
Image
12 Stats About Asbestos Cancer Law Lawyer Mesothelioma Settlement To Make You Look Smart Around Other People
Image
Buzzwords De-Buzzed: 10 Alternative Ways To Say Personal Injury Claim Compensation
Image
Ten Easy Steps To Launch Your Own Traffic Accident Lawyer Near Me Business
Image
How Isuzu Truck Key Replacement Can Be Your Next Big Obsession
Image
kekeliruan pemula dalam permainan slots online
Image
Schilderwerk: Welke soorten schilderwerk zijn er en wat zijn de prijzen?
Image
Let's Get It Out Of The Way! 15 Things About Truck Keys We're Fed Up Of Hearing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .