Bootstrap

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

We can easily customize the Bootstrap DropDown component’s hover color using a couple of different methods. We can change Bootstrap color variables or create a selector that targets the hover pseudo class. Here’s what we will build in this tutorial: Full code for this demo is in the Resources section. Change Bootstrap NavBar DropDown Hover … Read more

The Bootstrap Accordion component has several subcomponents that can be styled with text color, background color, and borders. These components are created by adding classes to elements and include the accordion-header, the accordion-button, the accordion-collapse, and the accordion-body. In this tutorial, we will style the accordion components by customizing existing Bootstrap variables that these classes … Read more

Bootstrap’s NavBar sizing and transition can be customized with a little CSS knowledge. In this tutorial I will make the NavBar use the full screen height and have the content open left to right. Here’s a screenshot of what we will build: Here is a link to the Bootstrap NavBar Docs. I will be using … Read more