What is a split button for?

split buttons multiple

A split button has two components; one is the label and the other is an arrow. The purpose of the arrow is opening a dropdown with the set of actions. Whereas clicking on the label takes to the default action. In this tutorial, I will show you creating the Split buttons by using custom CSS, … Read more

How to Create Zebra Striped Tables?

striped table bootstrap

Just like zebras that have distinctive black and white stripe coats. You may create tables in your web pages where one row is distinctive to the other row. The simple way of creating a striped table is using the nth-child() selector

Creating Close Button in Bootstrap 4

Bootstrap close button

The close button can be added by using the simple markup with CSS class. The main container for close button is the

HTML5 contentEditable to make div, H1 or other elements editable

HTML contentEditable

How to make display text elements editable? By using HTML 5 contentEditable attribute, you may make the display element’s text (paragraph, span, headings etc.) editable in web pages. Although, this is generally not required, however in some cases may be! By using the contentEditable and setting its value as true, you may make div, paragraph, … Read more

How to change Bootstrap navbar color and other default properties?

bootstrap navbar class

The Bootstrap navbar classes The navigation bar in Bootstrap-based projects can be created by using navbar and its related classes quite easily. Bootstrap provides two styles that you may specify in the <nav> tag. These classes are: navbar-default navbar-inverse The navbar-default gives a grayish look to the navigation bar while inverse gives it black. In … Read more

How to Style Table Rows Differently by CSS nth-child Selector?

css nth child

Styling alternate HTML table rows differently You may use the CSS nth-child selector for styling alternate table rows differently. Not only you may style alternative rows but also specify a different style for rows with the given number. For example, styling every 3rd or 4th row is different from the other rows. See the examples below … Read more

HTML textarea resize: How to disable with 3 demos

textarea resize

How to disable textarea resizing You may use the resize: none property to disable resizing of a textarea in a web browser. Generally, the textarea can be stretched to expand that may affect different sections of a webpage. By using the CSS, you may disable this overall or by specifying a particular direction as shown … Read more

How to Add, Remove and Toggle classes by JavaScript and jQuery?

jquery toggleclass

Add, remove, and toggle classes in HTML elements To add, remove, or update the class(es) attached to HTML elements, you may use jQuery and JavaScript. The jQuery has addClass, removeClass, and hasClass methods that can be used for adding, removing, or updating the classes. Similarly, you may use the className and classList attributes of JavaScript, if … Read more