Templates

Bootstrap 5 Contact Form (Free Template, AJAX, PHP)

by

Bootstrap 5 Contact Form

I’ve created different contact form templates and tutorials in the past, for example: Bootstrap Contact Forms: 2 Free Templates, Bootstrap Contact Form: How to Add a Dropdown (Select) Field, etc.

Today, I’ve designed another similar form, this time using the latest Bootstrap 5 framework.

The form is made by using Bootstrap’s ready-to-use classes and components as much as possible, and for its validation and sending emails, I’ve used AJAX, jQuery, and PHP.

Below you can see the live preview, the code, and download the template. Hope you find it useful!

Read more

Bootstrap 5 Pricing Tables (3 Free Templates)

by

bootstrap 5 pricing tables

Pricing tables are great for showing the prices of your services and products, making it easier for clients to choose the right option for them.

Bootstrap 5 makes it very easy to create pricing table sections on your websites and this is where we’ll focus on today.

I’ve created 3 pricing table templates you can download for free and customize as you like. I’ll also show the code for one of them.

The tables include the product’s title, price, features, sign-up button, and a recommended option. I’ve also used these pricing tables in this business template. Here they are:

Read more

Bootstrap 5 Testimonial Slider with Thumbnails (4 Templates)

by

testimonial slider bootstrap 5

Sometimes, when building websites you need to create a section where you show your best testimonials to create more “social proof” and help you get new clients or sell your products.

Bootstrap makes creating testimonial sliders quite easy with its ready-to-use components.

Today, I’ve created 4 different testimonial sliders with thumbnails using Bootstrap 5 and its Tabbed component.

I’ve also used one of these testimonial sliders in the Jona free business template.

So, below you can see the 4 different testimonial sliders. In the end, you can also download the templates. Enjoy!

Read more

Jona: Free (Bootstrap 5) Business Template

by

jona bootstrap template

Finally, I finished coding a new business template called Jona and made with the latest Bootstrap 5 frontend toolkit.

It comes with various pages and features you may need to create a website for an agency, portfolio, etc. I’m also adding new pages constantly.

So, check out its features and a few things to keep in mind below. Next, check out the live preview and download links. I hope you like it!

Read more

Bootstrap Hamburger Menu with Animations: Free Template + Tutorial

by

Bootstrap Hamburger Menu with Animations: Free Template + Tutorial

After seeing how to create a Hamburger Menu in HTML/CSS in the last tutorial and, of course, after learning what a Hamburger menu is, today we will continue with a similar type of menu.

More precisely, we will see how to create a Hamburger Top Menu/Navbar using the Bootstrap 4 framework (v4.4.1, latest version as I write this article).

In my opinion, creating this type of menu with Bootstrap is easier and quicker than if you had to create it with HTML and CSS starting from zero, like we did in the other tutorial.

This because Bootstrap comes with many (almost) ready-to-use components that you can customize, like the Navbar component that we will use here.

But on the other hand, Bootstrap has a learning curve and requires some time from you to study it.

So, let’s begin with the tutorial and at the end you can decide which way to go, Bootstrap or HTML/CSS. Free template also available for you to download.

Read more

Bootstrap 4 Sidebar Menu: Tutorial + Free Template

by

Bootstrap 4 Sidebar Menu: Tutorial + Free Template

In the last few years, I’ve always been amazed by the beautiful admin templates created by different developers, using the Bootstrap framework and listed for sale on ThemeForest or WrapBootstrap, or just released for free to gain some exposure for their work.

The part of these templates that has really caught my attention and that has been very popular these days, is the collapsible sidebar menu.

This type of menu is not only very nice to see, but it also improves the user interface and usability of these templates, especially admin templates. Google has also used it as part of their Material Design style.

As you probably know UI and UX have been two very popular concepts in the last few years, making the internet full of articles about them, and I think learning how to improve them in your websites, templates and web apps is a good thing as it can increase users and returning visitors.

So, for fun, a few days ago I decided to learn how to create one of these sidebar menus using Bootstrap.

I have created many templates in the past but have never used this type of menu, and after asking the developer’s best friend, Google, I found this (very useful) tutorial by Ondrej.

After a few hours of study and work, I created a template with a beautiful sidebar menu and wrote this tutorial hoping that you can learn something from it too. Or just download the template and use it in your projects 😉 .

So, in a few words, if you don’t want to read all of the above, in this tutorial we’ll see how to create a page with a collapsible sidebar menu using Bootstrap.

Let’s get started!

Read more

Bootstrap 4 Carousel: 3 Free Templates with Autoplay, Captions, Controls & Indicators

by

Bootstrap 4 Carousel: 3 Free Templates

Today’s free web design resource is a pack with 3 free Carousel templates made with Bootstrap 4 (version 4.2.1). They use the Bootstrap carousel component, are responsive and come with features like Autoplay, Captions, Controls and Indicators.

Also, the templates come with a logo section, navbar menu that changes the transparency as the user scrolls the page up and down, and some other example sections.

Below you can find the live demo and download links. Enjoy!

Read more