JavaScript

In this tutorial we will customize the styling of the React Bootstrap Backdrop and also show how to remove it. The modal has some great props for controlling the backdrop, but we still need to explore the modal styling with dev tools. Here’s one of the modals we will build: Full code is in the … Read more

The React Bootstrap Modal can have its height and width customized by targeting the proper CSS classes. We can even create full screen modals, although we have to account for the margin Bootstrap adds to modals based on screen size. In this tutorial we will deeply explore the DOM and Bootstrap style sheets to create … Read more

Scrollbars on Bootstrap tables can be customized to give your table a unique look and feel. Usually it only takes several lines of CSS and a clever selector. In this tutorial we will create 5 customizations for a scrollable Bootstrap table: Here is what we will create in this demo: Notice the blue scroll thumb … Read more

The React-Bootstrap Modal can be styled and customized in a variety of ways. We can even change the close button that is in the Modal.Header component if we use creative CSS. Here’s one of the close buttons we will build: The tricky thing is that there are no props for setting what image or icon … Read more

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