Category: bootstrap-hub

Integrating Bootstrap with Vue.js using Bootstrap-Vue

In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue. React and Vue.js are two leading, modern JavaScript frameworks for front-end development. While React has a steep learning curve, a complex build process (if you’re coming from a jQuery world), all you need to do to start usi...

Integrating Bootstrap with React: a Guide for Developers

Integrating Bootstrap with React allows React developers to use Bootstrap’s state-of-the-art grid system and its various other components. In this tutorial, we’re going to: explore tools and techniques for building a user interface with Bootstrap’s look and feel for a React-powered web application use reacts...

Customizing Bootstrap jQuery Plugins

Bootstrap comes packed with tons of ready-to-use jQuery-powered plugins. The beauty of Bootstrap’s plugins is that you can slot them into your project, write the appropriate markup using data- attributes, and the JavaScript kicks in automatically. No need to write any JavaScript code. There may be times when you’d ...

Getting Bootstrap Tabs to Play Nice with Masonry

On the Masonry website, we read that Masonry is … a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in...

8 Tips for Improving Bootstrap Accessibility

A few years ago, I wrote about my experiences on developing a Bootstrap version 3 project to be fully accessible for people with disabilities. This focussed mostly on how accessible it is in terms of front-end design. (It didn’t cover accessibility in terms of screen readers, as that’s a whole other story.) While I...

Understanding Bootstrap Modals

In this tutorial, we’ll be talking about one of the most useful jQuery Bootstrap plugins, the Modal. The Bootstrap Modal is a lightweight, multi-purpose JavaScript popup that’s customizable and responsive. It can be used to display alert popups, videos, and images in a website. Websites built with Bootstrap can use...

Animating Bootstrap Carousels with GSAP’s Animation Library

In a previous post, I covered the process of converting a Bootstrap carousel into a full-screen carousel with a random initial image. In this article, I’ll build on that and cover the art of animating Bootstrap carousels, drawing on the assistance of GSAP (GreenSock Animation Platform), a popular JavaScript library. ...

Bootstrap Native: Using Bootstrap Components without jQuery

Do you use Bootstrap’s JavaScript components? Do you like Vanilla JavaScript? Then you might be interested in the Native JavaScript for Bootstrap project (Bootstrap Native), which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript. Why use Bootstrap Native? The motivat...

A Full-screen Bootstrap Carousel with Random Initial Image

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load. But before digging into those extensions, let’s start by creating a carousel based on the...