The search box using Bootstrap In this post, a search box based on Bootstrap is created along with additional filters in the dropdown. By default, only the textbox to enter the search term with a button is displayed. There is a dropdown option towards the right corner of the search box that allows filtering the … Read more
Adding cool CSS 3 effects in different elements To make a website more interactive, you may use the power of CSS to display different elements on a web page with animations like rotate or other effects. For example, if you have an e-commerce website, then a section of products can be displayed with a fading … Read more
The header layouts using Bootstrap framework In this post, I am going to share an excellent plug-in that works with Bootstrap for creating the header menu for your website. It includes 23 free templates that you may choose as per the need of your web project. The free code is included by the developer that … Read more
Form validation in Bootstrap In HTML 5, the default form validation is done for the fields marked with the required attribute. It will even check the email format for the field specified as type=”email” with the required attribute. However, the message is basic and displayed as: “Please fill in the field” Where the specific field will also … Read more
The panel component in Bootstrap The panel, which is a built-in component in Bootstrap, can be used to present content in a box. You may specify different styles for panels by using various built-in classes. The panel may contain the heading for a content box while you may add content below it within that panel. … Read more
How to create labels in Bootstrap The labels are generally used with the form fields like textboxes, textarea, checkbox, etc. for showing the purpose of that field. While using the Bootstrap framework, the labels are styled automatically which you may customize as well. See the following section for learning how to create simple and floating … Read more
The progress bar component in web pages You may need progress bars on web pages for different reasons, for example, showing the progress of uploading a file and letting the user know by way of progress bar that shows the percentage of the file being uploaded. Update: Bootstrap 5 Progress bar tutorial is live. Similarly, … Read more
The Bootstrap accordion In this tutorial, the accordion in Bootstrap is created by using the panel-related classes along with the collapse class; these are built-in Bootstrap framework classes. In addition, the toggle icon is also added on the panels of the accordion to open and collapse the content of the accordion. Setting up Bootstrap for … Read more
The Bootstrap notice cards The notice card is like a typical yellow or other colored paper that you may stick as a reminder of some task or to write an important note and stick it to some easily “noticeable” place. You may use notice card in websites for a special note to the users or for any … Read more
The product listing template based on Bootstrap In this post, the Bootstrap classes are used along with custom CSS for creating the product listing page for an e-commerce website. The features include displaying the product image along with optional “Special” or Hot” etc. tags. A small product description along with its category is also displayed. … Read more
The Bootstrap buttons and adding effect In this tutorial, the effects are added in the Bootstrap based buttons by using custom CSS. Along with this, the font-awesome icons are also added in buttons. Have a look at code and demos in the following section. (You may find the reference of font-awesome CSS file after the first … Read more
The pricing table template using Bootstrap In this tutorial, a pricing table using Bootstrap and custom CSS is created where you may display the product name or some heading, its features with the flexible number of lines, prominent display of price within a circle for each product or service by using CSS3, etc. At the … Read more
The hover effect in Bootstrap navs This is highly likely that you will use navigation menu whether it is a top, left or right menu as using the Bootstrap framework or any other website that contain links to the main pages, categories etc. Adding cool hovering effects as a user brings the mouse over any … Read more
Shopping cart in Bootstrap Bootstrap has many built-in components and a lot of developers are working to develop different web components with the increasing popularity of Bootstrap. In this tutorial, I am going to show you a shopping cart component that uses Bootstrap and is developed by using jQuery. This jQuery plug-in can be easily … Read more
The touch keyboard for Bootstrap In this tutorial, a jQuery plug-in is used for creating keyboards of different types like a general QWERTY keyboard, for entering telephone, passwords, etc. for touch screen devices like smartphones. In order to implement that in your website, you need jQuery and Bootstrap version 3+. The plug-in uses Bootstrap’s popover … Read more