How to create a bootstrap 4 one page scrolling website in just 45 minutes

by | Mar 20, 2019 | Bootstrap, Web Design

How to create a bootstrap 4 one page scrolling website in just 45 minutes. Follow along with this video and we will show you how easy it is to make a good-looking bootstrap 4 website really quickly. Bootstrap 4 is a fantastic platform for building websites, it’s so much lighter than WordPress, and there’s no install needed. You can just use a simple text editor, like the free one we use in this video, brackets, and stop building straight away. Bootstrap 4 has many inbuilt features that make putting together a site really easy.

So, in this video we’re going to download a simple bare bones skeleton site and start building the content around it. To save time we are going to be using a template that already has the scrolling and scrollspy JavaScript included in it. This way when we navigate to a new section the menu list items will update and highlight appropriately.

The first thing we are going to build is the hero section. This is the most important section, as it is as they say ‘above the fold’. That’s an old newspaper term which simply means that it’s what you’re going to see first, as old newspapers were folded in half and of course, on the front page you would see the top half. For a hero section we’re going to build a simple slider with revolving images and captions.

Bootstrap 4

Next on the list is the About Us section. This is a simple section with an introductory statement about your business, or service, just to let people know what you do or what you can offer. We are then going to move on down and create the services section, with a list of services that can be provided by you or your company.

Bootstrap 4

Next on our list will be our team section where we will have some images and details about youyou’re your team members. This is always a good idea as it adds a personal touch to your site, and also lets people know who you have on your team.

Bootstrap 4

If you are offering services or products for sale, then we have included a pricing section. This has some great looking pricing tables that will enable you to show different price ranges your products or services.

Bootstrap 4

Last but by no means least, is the contact section. This is a simple section that will include your phone number, fax number, email address and the physical address, so people can reach out to you easily.

Bootstrap 4

Once complete we will go back up and add the various section links to our menu at the top of the page, and check out the links to make sure each menu item scrolls smoothly to the appropriate section.

All of this can be completed in about 45 minutes if you follow along with our video. As we mentioned earlier, bootstrap 4 is fantastic for this sort of website build, and as you will see you can get some fantastic results in very little time.

Download links:

Download the free brackets text editor from here:

Get lorem ipsum dummy text from:

Bootstrap Template:

Bootstrap Snippets:

Ecommerce - Build a Free eCommerce website with WordPress
WordPress - Local install & Online Migration with WordPress
Bootstrap 4 How To Make A Modern Website From Scratch

Subscribe To Our YouTube Channel

4.5 million views on youtube

Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This