Bootstrap 4 Carousel with Multiple Items: How To Create It?

Published on: Feb 06 2019 by Anli - 33 Comments

Bootstrap 4 Carousel with Multiple Items: How To Create It?

A few days ago I created these Bootstrap 4 Carousel templates and then I wrote a tutorial about different ways to disable the autoplay feature.

Today we’ll continue with another tutorial, this time about how to create a responsive Bootstrap 4 Carousel with Multiple Items.

We’ll do this by using some CSS media queries and, as usual, some JavaScript (jQuery) code. Let’s see!

Read more …

7 Web Development Predictions for 2019

Published on: Jan 31 2019 by Anli - 4 Comments

7 Web Development Predictions for 2019

Have you ever wondered what will happen this year in the web development industry? At the beginning of each new year, we like to make questions and predictions that at the end may or may not happen.

Today in this article by one of our readers, we’ll do the same thing and take a look at 7 web development predictions for 2019. After reading it, let me know what you think about these predictions. Do you think he is right? Let’s begin!

Many technologies come and go in the web development space. Some of them make a lot of impacts, while many others disappear. People were making a prediction like “Web Development will end due to WordPress” after the increased popularity of WordPress and other web building tools.

However, the demand and wages’ growth for web developers are still there.

Read more …

Bootstrap 4 Carousel: How To Stop Autoplay

Published on: Jan 30 2019 by Anli - 1 Comment

Bootstrap 4 Carousel: How To Stop Autoplay

In this tutorial we’ll see how to stop the Autoplay function on a Bootstrap carousel.

If you’ve used this component of the Bootstrap framework before, you probably know that by default it cycles through elements automatically as soon as the page is loaded.

This is a nice feature to have, but in certain situations you might not want it. Instead, you might need a static carousel that stops “on page load” or one that stops and starts based on various events that happen on the page, like for example when the user scrolls down the page, clicks on a button or link, etc.

Here we’ll see 3 examples beginning with a simple carousel with no autoplay and then using buttons for pausing and starting the auto slide again.

For this tutorial we’ll use one of these carousel templates (template 3) as an example. At the end you can download all the example templates. Let’s begin!

Read more …

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

Published on: Jan 21 2019 by Anli - Leave a Comment

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 …

Bootstrap 4 Fieldset: 3 Examples + Free Templates

Published on: Jan 14 2019 by Anli - Leave a Comment

Bootstrap 4 Fieldset: 3 Examples + Free Templates

When working on large projects, an important part of the website or app that we’re building is asking for input from the users.

We usually implement and achieve this with forms. But in a large project there is a lot of information that we must collect from the user, like for example when applying for a financial service through an online bank’s website.

To improve the user experience which has been a very important part of modern website and app design in the last few years, we have three options:

  • we can divide the form in steps like this,
  • we can group similar or related form fields together, usually using the HTML “fieldset” tag,
  • or we can use a combination of the two options above.

Today, in this article, we will take a look at option 2: we’ll see 3 examples of using form fieldset-s in Bootstrap 4 (v4.2.1).

At the end you can preview and download the templates.

Let’s begin!

Read more …

Bootstrap 4 Header: Free Template with Menu and Search Box

Published on: Jan 05 2019 by Anli - Leave a Comment

Bootstrap 4 Header: Free Template with Menu and Search Box

Today’s free web design resource is a Header template made with Bootstrap 4 (version 4.2.1). It is very simple and comes with a logo section, navbar menu, search box, fullscreen background image and more. It also changes the transparency as the user scrolls the page up and down.

You can use it for inspiration or as a starting point to create your next website project, since the template comes with some other example sections, apart from the header.

Take a look below to find the live demo and download links. I hope you like it!

Read more …

Want to Boost Conversions? Try Website Personalization

Published on: Dec 27 2018 by Anli - Leave a Comment

Want to Boost Conversions? Try Website Personalization

In today’s article we’ll talk about website personalization, and with the contribution of one of our readers, we’ll see how to use it to improve conversions of your website(s) or get some new ideas to apply to the site(s) of your clients. Let’s begin!

Website personalization is the process by which a web page delivers custom content to users at the right time and place.

Ecommerce websites provide some great examples of this. Take, for instance, a site like Walmart that asks visitors if it can access their location. Upon allowing the website to do so, shoppers encounter location-related notes throughout the customer journey.

Read more …