Exploring JavaScript Libraries
Bootstrap has some great built-in methods for setting element font size and making font size responsive. In this tutorial I will discuss and demo the most features Bootstrap offers for controlling font size. Here is a screenshot of elements with a custom root font size sass variable: In the sections below we will explore Bootstrap … Read more
Bootstrap 4 and 5 have several methods for styling button color. In this tutorial we will create several custom buttons using classes and variables for controlling color. I will show examples with both vanilla Bootstrap and React-Bootstrap. Here are the buttons we will create in this tutorial: Bootstrap has lots of built-in variables and classes. … Read more
Adding click handlers to tables, headers, rows, and cells in React requires knowledge of click handlers and JavaScript. Setting a “selected” style on clicked rows adds a CSS angle. In this tutorial we will explore to code to create this functionality. Here’s the table we will build in a React app using simple React components. … Read more
The React-Bootstrap table component can be heavily customized to meet any styling needs. In this tutorial I will show how to add color styling to several parts of the table: Here’s what we will create: The table above also has a background color style on hover. These stylings are applied using classes and also by … Read more
Bootstrap 5 comes with seven different border radius classes for precisely targeting different corners of elements. In this tutorial I will explore the default border radius class styling as well as how to override a the SASS variable used in all the classes. Here’s what we will create: We’ll create several other stylings along the … Read more
It can be useful to custom style Bootstrap Table rows with extra height or padding. However, there are some styling challenges with HTML tables (and Bootstrap tables) that make it difficult to know how to add styling and yet let the table have a responsive height. In this tutorial, we will create the following table … Read more
Bootstrap tables have different column width behavior based on the combination of table-layout styling and column width styling. In this tutorial we will explore how default table-layout, width: auto, and table-layout: fixed on the table affect column width. We will then customize table column width. Here are the three tables we will create. Each has … Read more
Bootstrap does not have IconButton components (unlike Material UI), but we can create and style custom icon buttons. In this tutorial I will create several examples that style Bootstrap icon button width, height, border, color, and alignment. Here are the Icon Buttons we will make: Full code for this tutorial is in the Resources section. … Read more
Ant Design buttons can have their hover color customized or removed easily by creating the right CSS selector and style. In this tutorial I will update hover color for all AntD buttons, for individual AntD buttons, and for different button types (dashed, text, etc). I will also show how to remove button hover. Here are … Read more
Ant Design icon buttons can be created in three ways: In this tutorial I will show how to create all three. I will also show how to control width, height, icon color, background color, and border. Here’s what we will create: Ant Design Icon Button Color and Background Color The first Icon Button I created … Read more
