Exploring JavaScript Libraries
MUI has several options for setting text color on single components or all components of a type. However, can we set a global text color in Material UI? In this tutorial I will set text color for the Typography component and show how we can set text color for all components. In this demo we … Read more
The Material UI Stepper component is a great way to direct users to fill out forms or complete certain tasks. In this tutorial we will change the background color of the stepper, change step button active and completed color, and insert a custom icon into a step. Here’s what we will build: I started with … Read more
The Material UI AppBar is a useful component for creating top of page toolbars, menus, and logos. However, sometimes it is challenging to keep the AppBar from covering content. It can also be a challenge to position the height and z-index. In this tutorial we will show how to create an AppBar that does not … Read more
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
