Bootstrap

Bootstrap 4 Carousel Fullscreen: How To + Template

by

Bootstrap 4 Carousel Fullscreen: How To + Template

Sometimes you need an image slider for your site or for a landing page you are working on.

Usually, you need it to be on the top part of the page and to occupy the entire width of the browser.

Well, the Bootstrap Carousel component can do that quite easily!

What about an image slider that is not only full-width but also full-height? In other words, an image slider that occupies all the initial viewport when the page loads?

The Bootstrap Carousel can do that too, even though with a few more tweaks.

Today, we will see how you can create all the above: a Full-width and a Fullscreen Bootstrap Carousel, by using 3 methods that are slightly different from each other.

In the end, you can download all the templates as usual.

So, let’s begin!

Read more

Bootstrap 4 Lightbox Image & Video Gallery: Free Template + How To

by

Bootstrap 4 Lightbox Image & Video Gallery: Free Template + How To

Welcome to another tutorial here on AZMIND! Today we will create a Lightbox Image and Video Gallery using the Bootstrap framework.

The gallery will showcase some images and videos that will open in a lightbox when the user clicks on any of them.

Once opened, the user will have the possibility to interact with the lightbox by scrolling through the images and videos, play / pause the videos, or close the lightbox popup.

This gallery can be used, for example, to create a portfolio page.

In the end, you can download all the files as a handy template.

So, let’s begin!

Read more

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

by

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

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: How To Center Align a “Div” or “Form” Vertically and Horizontally

by

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

Bootstrap Carousel with Videos: How To + Template

by

Bootstrap Carousel with Videos: How To + Template

A few months ago I published a tutorial about how to use videos with modals in Bootstrap.

Today we’ll see how to use videos in Bootstrap carousels.

You’ll learn how to embed videos from popular video sites like YouTube and Vimeo, and use them in slideshows in your web projects.

At the end, you can download all the template files and use them easily when you need them. Let’s begin!

Read more