Bootstrap Carousel with Videos, Images & Captions: How To + Template

Published on: Mar 05 2020 by Anli - 2 Comments

Bootstrap Carousel with Videos, Images, Captions: How To, Template

After publishing this Bootstrap carousel template with videos, there were a few users who tried it and asked how to add some additional featured.

For example, how to use a mix of videos and images in the carousel and how to add captions to a video carousel.

So, I added these features to the carousel and today I’ll show you how you can do the same and, at the end of the tutorial, you can download the template with all the files as usual.

Let’s begin!

Read more …

Bootstrap Hamburger Menu with Animations: Free Template + Tutorial

Published on: Feb 11 2020 by Anli - Leave a Comment

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 …

Hamburger Menu with CSS Animations: Free Template + Tutorial

Published on: Feb 03 2020 by Anli - Leave a Comment

Hamburger Menu with CSS Animations: Free Template + Tutorial

In simple words, in modern web design, a “Hamburger Menu” is a simple menu either horizontal or vertical, that can be activated or deactivated by clicking on a button which has an icon with three rows when the menu is closed, and an “X” sign when the menu is open.

This icon with three rows resembles a hamburger and gives the name “Hamburger Menu” to this type of menu.

Usually the menu comes with nice animations when you open or close it that can be created with CSS3, JavaScript or a mix of these two as in the case we’ll see today.

So, as you can read from the title, today we will see how to create a Hamburger Menu with animations.

It will be an horizontal navbar / top menu and at the end you will also have all the files as a handy template to customize and use in projects.

Let’s begin!

Read more …

10 Landing Page Templates To Promote Your Next Big Idea

Published on: Oct 03 2019 by Anli - Leave a Comment

10 Landing Page Templates To Promote Your Next Big Idea

Every advertising campaign you run can be helped with the use of an effective landing page which highlights all the advantages of your services or products, and as a result, captures many leads. In this case, a ready-made solution can be a good choice.

To help you with that, today I have a selection of landing page templates by TemplateMonster (affiliate link), designed for different business types and goals.

And if you want, here you can also see some of their best-selling landing page templates (aff. link).

So, let’s take a look at the templates of this collection!

Read more …

Bootstrap 4 Sidebar Menu: Tutorial + Free Template

Published on: Aug 07 2019 by Anli - Leave a Comment

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 vs Foundation: Which One is Better?

Published on: Jul 10 2019 by Anli - Leave a Comment

Bootstrap vs Foundation: Which One is Better?

Web designing has come a long way throughout the years, as the number of people who took an interest in creating and purchasing websites grew in astonishing numbers.

Things went from simply focusing on practicality and functionality, to creating websites that are beyond impressive in their layout and dynamism.

But, what the regular web visitor or website buyer might not always realize is the amount of work and effort it takes to create these captivating websites that will make a project or business truly stand out.

However, as with most things, the first step behind any project is deciding what will it be created with, which brings us to today’s topic.

Deciding on the right framework to utilize for your next web design project is a very important part of the whole ordeal and it gets especially complicated when going through the several options available, and the suggestions about which one is better are overwhelming.

The discussion of Bootstrap vs. Foundation has been going on for years and a conclusion is yet to be drawn.

Our intention is to give you a general idea about what to expect from each of these two very popular frameworks and to help you decide which one would be the better choice for the project you intend to work on.

With that being said, let’s get started and hopefully you will have a better picture by the end of this article.

Read more …

Bootstrap 4: How To Center Align a “Div” or “Form” Vertically and Horizontally

Published on: Jun 11 2019 by Anli - Leave a Comment

Bootstrap 4: How To Center Align a Div or Form Vertically and Horizontally

Centering an HTML element horizontally with CSS, be it a “div” or a “form”, has been always easy for web developers at least for the past 10 years or so.

But what about centering the same element vertically, so that it always remains in the center of the page or in the center of its parent element?

Well, this has been a very tricky task for years (at least for me) and some developers have also used JavaScript in some situations to obtain the desired result.

This has continued to be a problem, at least for me, until the advent of the CSS flexbox layout and the flexbox utilities offered in Bootstrap 4.

And that’s what we’ll be talking about in today’s tutorial.

We’ll see 3 examples where we take a “div” and a “form” and align them in the center, vertically and horizontally, using Bootstrap 4 (current version 4.3.1).

At the end of the tutorial, you can download all the files as handy templates.

Let’s begin!

Read more …