Sofiaml Boo

Sofiaml Boo

1596444536

How to Create a Simple Web Page using Bootstrap 5

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:

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!

#css #web-development #bootstrap-5 #html #bootstrap

What is GEEK

Buddha Community

How to Create a Simple Web Page using Bootstrap 5
Sofiaml Boo

Sofiaml Boo

1596444536

How to Create a Simple Web Page using Bootstrap 5

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:

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!

#css #web-development #bootstrap-5 #html #bootstrap

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

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

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.

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

#html #css #javascript #web-development #css3 #bootstrap

Volt - Free Bootstrap 5 Admin Dashboard

Volt Bootstrap 5 Dashboard Preview

Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 customized plugins. Volt does not require jQuery as a dependency meaning that every library and script’s are jQuery free.

Bootstrap 5 Components

Because it is created using the latest version of Bootstrap 5, every components and element is based on the latest Bootstrap 5 Sass variables and HTML markup. Check out the documentation of the components here.

11 Example pages

We created no less than 11 advanced example pages such as the overview page, transactions, user settings, sign in and sign up and many more.

Full documentation

Every component, plugin and getting started is thoroughly documented on our online documentation.

Workflow

This product is built using the following widely used technologies:

  • Most popular CSS Framework Bootstrap
  • Productive workflow tool Gulp
  • Awesome CSS preprocessor Sass

Table of Contents

Demo

Dashboard Transactions Settings Forms
Dashboard Transactions Settings Forms
Sign in Sign up Forgot password Reset password
Sign in Sign up Forgot Password Reset password
Lock Profile 404 Not Found 500 Server Error Documentation
Lock Profile 404 Not Found 500 Server Error Documentation

Quick start

  1. Download from Themesberg or clone this repository
  2. Download the project’s zip
  3. Make sure you have Node locally installed.
  4. Download Gulp Command Line Interface to be able to use gulp in your Terminal.
npm install gulp-cli -g
  1. After installing Gulp, run npm install in the main volt/ folder to download all the project dependencies. You’ll find them in the node_modules/ folder.
npm install
  1. Run gulp in the volt/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.
gulp

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you’d like to get a version of our theme without Sass, Gulp or Npm, we’ve got you covered. Run the following command:

gulp build:dev

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you’d like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Volt is hosted on our website.

File Structure

Within the download you’ll find the following directories and files:

Volt Bootstrap 5 Admin Dashboard
.
├── README.md
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   ├── img
    │   └── js
    ├── index.html
    ├── pages
    │   ├── components
    │   ├── dashboard
    │   ├── examples
    │   ├── settings.html
    │   ├── tables
    │   └── transactions.html
    ├── partials
    │   ├── _analytics.html
    │   ├── _footer.html
    │   ├── _head.html
    │   ├── _navigation.html
    │   ├── _pages-preview.html
    │   ├── _preloader.html
    │   ├── _scripts.html
    │   └── dashboard
    └── scss
        ├── volt
        └── volt.scss

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for Volt Bootstrap 5 Admin Dashboard. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Volt Bootstrap 5 Admin Dashboard. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

#bootstrap #bootstrap5 #bootstrap-5 #bootstrap-5-dashboard #bootstrap-5-admin-dashboard #themesberg

Bootstrap 5 tutorial: how to build a simple admin dashboard interface

Almost 2 months ago Bootstrap 5 alpha has been launched and there are two big news: jQuery has been dropped as a dependency and there is no more direct support for IE 10/11. We’ve been playing around with the new version of the framework and it is exciting to see some features such as the Utility API and working with vanilla JS.

Simple Bootstrap 5 Admin Dashboard Preview

In today’s tutorial, I would like to show you guys how to create a really simple admin dashboard interface using Bootstrap 5. Here’s an online demo if you want to check it out before building it. You’ll create the following sections:

  • A navigation bar with user settings;
  • A sidebar with navigation items;
  • A section to show the title, tagline, and breadcrumbs for the current page;
  • The main content area with a couple of widget cards;
  • Last of but not least a footer.

Read more at Themesberg Blog - Tutorial: How to Build a Simple Admin Dashboard Interface using Bootstrap 5

#tutorial #bootstrap5 #bootstrap-5 #bootstrap-5-dashboard #bootstrap-5-tutorial

Swipe - One Page Bootstrap 5 Template

Swipe is a free mobile application One Page Bootstrap 5 Template featuring sections such as about, testimonials, frequently asked questions, and two app download CTA sections.

Using beautifully vibrant colors and illustrations you can create a stunning presentational page for your mobile app.

Demo: https://demo.themesberg.com/swipe/
Free Download: https://themesberg.com/product/bootstrap/swipe-free-mobile-app-one-page-bootstrap-5-template
Github repository: https://github.com/themesberg/swipe-one-page-bootstrap-5

#bootstrap #bootstrap5 #bootstrap-5 #one-page #one-page-template #themesberg