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 …

Bootstrap Carousel with Videos: How To + Template

Published on: Jun 07 2019 by Anli - 2 Comments

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 …

Material Design vs Bootstrap: Which One is Better?

Published on: May 06 2019 by Anli - Leave a Comment

Material Design vs Bootstrap: Which One is Better?

Owning a brand and looking to expand your business comes with certain requirements and suggestions as to which is the best way to go about it.

Flyers, ads on TV, billboards and radio advertising used to be the chosen methods of promoting a brand or business. They are still a very useful way of expanding your clientele and getting more people’s interest about what you are promoting, but things have changed considerably in the past decade.

With Internet access becoming available all around the world, brands have managed to expand beyond their local or national boundaries, making it possible for them to reach audiences and clients in countries that would have been impossible a few years ago.

Whether you are an artist, musician, a manager or a business owner, online presence is the easiest and most important method of getting recognition.

While there are numerous ways of expanding online presence, a website is most certainly necessary.

Enter you, a web developer looking for the best and most efficient product to build great websites for your clients (or yourself).

Our purpose for today is to look at two of the most popular methods for web application development in the last few years, Bootstrap and Material Design. In doing so, we will learn more about their differences and which one would be the better suited for your next project.

Let’s get started!

Read more …

Vue JS vs Angular: Which One is Better?

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

Vue JS vs Angular: Which One is Better?

Information Technology is an always evolving field. Every year, innovative technologies are introduced while earlier ones are upgraded. Web development, a key area of Information Technology, is no exception (check out some web development predictions here). There are many tools and techniques in the web development world, each claiming to be the best.

In simple terms, web development is defined as the work undertaken to develop a website. Although it sounds simple, web development is a very vast field. There are organizations which are specialized in providing web development services for personal projects, as well as for businesses.

Read more …

The New WP Gutenberg Editor vs Free Website Builders

Published on: Apr 19 2019 by Anli - Leave a Comment

The New WP Gutenberg Editor vs Free Website Builders

In 2018, WordPress decided to show homage to Johannes Gutenberg, the inventor of movable type printing. They did this by releasing Gutenberg, which is a revised way of building a website using WordPress.

Immediately, people began to wonder if Gutenberg was going to be the end of free website builders. If the current reaction of web designers to Gutenberg is an indication of the future, website builders can breathe a temporary sigh of relief.

That being said, Gutenberg has the potential to definitely upend the website builder industry.

Today we’ll take a few minutes and look at what Gutenberg is and the current and potential future impact this update to WordPress could have on website builders.

We’ll also compare it with currently popular website builders to see where the differences lie.

A few days ago I updated one of my sites to use Gutenberg, but after 5 minutes I decided to stick with the old editor for now. In the future we’ll see 😉 .

So, let’s begin with today’s article!

Read more …

9 Best Vue.js Admin Templates for Your Next Project

Published on: Feb 27 2019 by Anli - Leave a Comment

9 Best Vue.js Admin Templates for Your Next Project

Admin templates have come a long way and they are still constantly being developed and improved day by day.

Nowadays you can easily find the exact admin template you are looking for and it is even easier to implement it into your website. In a matter of hours, depending on the type of project, you can have a running website that the admin template helps you manage and run without much fuss.

There are different types of admin templates available and in some of our past selections we have looked at Angular, React and Ruby Admin templates. Today we will be looking at some Vue.js admin templates.

For those who are unfamiliar with Vue.js, it is a JavaScript front-end framework used for building UI and its most renowned feature is its ease of implementation. It was created by Evan You in 2014, who was inspired by working with Angular and was looking for a more lightweight framework.

Read more …

Bootstrap Carousel: How To Fade Transition Instead of Slide

Published on: Feb 17 2019 by Anli - Leave a Comment

Bootstrap Carousel Fade Transition How To Template

The Bootstrap carousels we have seen in the last articles and tutorials, had all a “slide effect” when moving from one slide to the next.

But what if we want a different type of transition, like for example a “fade transition”? Can we do it?

The answer is “Yes”, and it can be done very easily. We’ll see it in today’s tutorial. Let’s begin!

Read more …