Smart Devpreneur

Adding a hover effect to icons in Bootstrap can be accomplished by targeting the hover pseudo-class on icons. We can also use a little JavaScript to dynamically add a Bootstrap utility class on hover. In this tutorial we will explore three methods of applying hover styling to an icon. Here’s an example of what we … Read more

The React-Bootstrap form control can be sized using CSS properties or with the built-in size prop. In this tutorial we will explore the DOM to see the values that the size prop applies. We will also update the form-control class that gets applied by Bootstrap and use it to add custom CSS sizing values. Here … Read more

Bootstrap includes some excellent border utility classes. It has five utility classes for border width, also known as border thickness. We can also customize the built-in $border-width variable and the –bs-border-width variable. In this tutorial we will demo these three methods of controlling element border width. Here’s what we will build: How to Use Bootstrap … Read more

The React-Bootstrap Form Control component has some useful props for getting and setting values. We can also add a default value with the default prop, or simply with a preset value in the value prop. We will build the below Form Control wrapped in an Input, with the Button text being set by changes in … Read more

React-Bootstrap Form Control components are used in combination with other components. In this tutorial I will customize form control border, hover, and focus color when the component is inside of an Input component. Bootstrap has built-in classes that we can use to control this styling. These classes are available in vanilla Bootstrap and React-Bootstrap. Here’s … Read more

Hover effects are important for creating a perfect UI design. React-Bootstrap offers several methods of adding hover effects on components. In this tutorial we will add hover effects to a Card component using CSS, React hooks, and the OverlayTrigger component. Here’s what we will build: In the screenshot above I triggered hover effects on three … Read more

React-Bootstrap has a great Overlay and Tooltip component combo for showing ToolTips on any component. We can even wrap Table cells, but it can be challenging to add a ToolTip on cell hover without lots of redundant code. Here’s what we will build in this tutorial: React-Bootstrap Table Cell with Hover Depending on how we … Read more

React-Bootstrap uses the Overlay component to construct ToolTips and other popper components. In this tutorial we will add simple background and border styling. Then we will add a more complex border that wraps the pointer arrow on the ToolTip. Here’s what we will build: My demo is inspired by this great tooltip post by Calvin … Read more

React-Bootstrap has two options for tooltips: an Overlay component that can have a manually constructed tooltip (for complex requirements) or a simpler OverlayTarget and Tooltip. The example in the docs for the Overlay is good. In this tutorial, we will construct a ToolTip using the Overlay component and add a pointer arrow and custom position. … Read more

In this tutorial we will create a TextField that follows Material Design principles for TextFields. It will look and feel like the MUI outlined variant TextField. We will use React-Bootstrap but this could be done in a similar way with vanilla Bootstrap. Here is what we will create: We’ll start with a React-Bootstrap InputGroup and … Read more