Bootstrap 5 Hamburger Menu with Animations (2 Free Templates)

Bootstrap 5 Hamburger Menu

After learning how to create a hamburger menu in simple HTML/CSS and in Bootstrap 4, today I’ve created 2 templates of hamburger menus (dark and light) using the latest Bootstrap 5.

So, if you prefer to always be up-to-date with the Bootstrap front-end framework, these 2 templates may be useful for your projects.

I’ll show the code for one of them and in the end, you can live-preview them and download the templates. Enjoy!

Read more

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

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)

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)

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

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 4 Carousel: How To Change Arrow Colors? [2 Methods]

Bootstrap 4 Carousel: How To Change Arrow Colors? [2 Methods]

What is “carousel-control-prev-icon” in Bootstrap, you might ask?

Well, if you have worked with Bootstrap carousels you probably know that this, along with “carousel-control-next-icon”, are the classes used for the small arrow icons of the carousel’s controls.

But what do I need them for, you might continue?

Well, you will need them if you want to change the colors of the arrow icons.

Today in this tutorial we will do just that, with 2 different methods.

Let’s see these 2 methods and in the end, you can download the templates as usual.

Read more

Bootstrap Fieldset Legend: How To + Examples + Template

Bootstrap Fieldset Legend: How To + Examples + Template

We have already seen how to use fieldsets in forms with the Bootstrap framework.

Today we will continue on the same lines and learn how to create fieldsets with legends.

These can come in handy when working with long forms that need to collect a lot of data.

Actually, in the article I mentioned above, we have already used legends, but today we are going to expand on them and see how we can style them a bit differently.

So, let’s see what these fieldset legends are and how to use them!

Template and demo link available at the end.

Read more