Category: 04. Utilities

In this article, we will learn how to include “add to cart button in bootstrap.” For this, we are going to use various add to cart button designs and templates of bootstrap with shopping-cart. First of all, we will learn some basics of Bootstrap, bootstrap buttons, add to cart button design in bootstrap. After that, we will…

Bootstrap Datepicker Bootstrap Datepicker is used to display a calendar with date, month, and time. You can use the below code to create a datepicker in Bootstrap. Bootstrap Timepicker Bootstrap timepicker is used to display the time in minutes or seconds. Example: Bootstrap datetime picker Bootstrap Datetime picker is an input field that is used to…

Bootstrap is one of the most popular open-source front-end (HTML, CSS, and JavaScript) framework that is used to create beautiful web projects and mobile-friendly websites. Although Bootstrap is an amazing front-end framework, there are also some other bootstrap alternatives that are equally good as Bootstrap. Some of the most widely used Bootstrap alternatives are given below – 1.…

Star rating allows users to share their opinion (rating) on the document, product, images, videos, and more. To create checked (filled) star icon, use the below syntax – To create unchecked star icon, use the below syntax – Code:

Spinner is also called a loading indicator. It is used to display/indicate the loading state of our projects. Bootstrap uses a .spinner class to create a Spinner. We use the below syntax to create a Spinner in Bootstrap – Types of Spinners There are the following types of spinners that we create using Bootstrap – 1. Border Spinner Border Spinner…

CDN stands for Content Delivery Network or Content Distribution Network. It helps us to improve the rendering time and website performance. Bootstrap CDN is a free content delivery network that helps us to quickly load Bootstrap CSS, Javascript, and jQuery libraries on our projects to make projects responsive, mobile friendly, and attractive. Bootstrap CDN Link and scripts CSS link Copy-paste the below CSS link to…

Typography provides some utilities to add additional styles to texts. These utilities are: Text Alignment Text alignment is used to easily realign text to components with text alignment classes. Syntax: Align text left: Align text center: Align text right: Align text justify: Align text no-wrap: You can align text on viewports according to their size…

Spacing utility is used to assign the responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. It includes individual properties, all properties and vertical and horizontal properties. It classes are built from a default Sass map ranging from .25rem to 3rem. Notation The spacing utilities that apply…

It is used to size the element. By using sizing utility, you can easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100% by default. Width and height utilities are generated from the $sizes Sass map in _variables.scss.…

Screenreaders are used to hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it?s focused (e.g. by a keyboard-only user). Can also be used as mixins. Syntax: How to use it: