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
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
The outline button style removes all background images or colors from a button and gives it a lighter look.
The outline style buttons can be used for various purposes, for example
The close button can be added by using the simple markup with CSS class. The main container for close button is the
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
The jQuery file upload plug-in In this tutorial, I am going to share a nice plug-in for uploading files that uses a jQuery. If you are using jQuery and your project is based on Bootstrap then it is really a light-weight plug-in that enables your users to select multiple files. Not only multiple files can … Read more
Changing Bootstrap 3 modal size properties In order to increase or decrease the modal window height and width properties of Bootstrap, you need to get the modal related classes and use desired values either in the <style> section or in your external CSS file. In either case, you have to use it after the reference … Read more
The Bootstrap container and container-fluid classes For developing a web project in the Bootstrap framework, you need to specify a containing element that houses the Bootstrap grid system. The grid system is used to define the layout of the web pages by using a series of rows and columns. For the containing element, you may … Read more
The glyph icons in Bootstrap If you are using Bootstrap CSS in your web project then you may use glyphicons without referring any other CSS file. The glyph icons are the part of it. However, you have to manage the size of icons if using in <span> or some other tags. If you are using … Read more
Adding tooltips in icons In the Bootstrap tooltip tutorial, I have shown you creating tooltips over buttons, links, input fields etc. I have also shown how to create tooltips with HTML content inside it. In this article, I will show how to add tooltips to Bootstrap glyph icons and font-awesome icons. A demo of adding … Read more
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
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
Refreshing a webpage by jQuery or JavaScript A webpage can be refreshed by using different ways by using jQuery or JavaScript. For example, you may use location.reload method to refresh a page from the browser cache or server side. See the section below for live demos of using location.reload and other ways. An example of … Read more
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
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