Bootstrap

We can add custom styling to React Bootstrap cards using built-in Bootstrap classes, custom classes, and even through changing .scss variables. In this demo I will use all three methods to add borders, text color and font size, and background color to a Card component. Here’s what we will build in this tutorial: I think … Read more

The React Bootstrap Card is a great component for showing images and text in an organized way. In this tutorial we will create an image card that positions the image responsively and at a custom size. Here’s one of the cards we will build: Full code for this demo is in the first section. React … Read more

The React Bootstrap Accordion is a great component with several useful props for controlling which items are open. We can even control whether multiple items are open at once and if a default is open on render. We can also programmatically open an accordion item or collapse all accordion items, for example through a button … Read more

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