Exploring JavaScript Libraries
Bootstrap does not have IconButton components (unlike Material UI), but we can create and style custom icon buttons. In this tutorial I will create several examples that style Bootstrap icon button width, height, border, color, and alignment. Here are the Icon Buttons we will make: Full code for this tutorial is in the Resources section. … Read more
Bootstrap 3 is still widely used, despite being two version behind the current Boostrap release. It’s grid system is intuitive and adds spacing and alignment for grid children. Margin can be tricky to add, however. In this tutorial we will create the following grid using Bootstrap 3: The grid has some margin by default. I … Read more
Adding a clear button to a Bootstrap Input element lets users clear text with a single click instead of clicking and tapping the delete key repeatedly. This is a much nicer experience. I created two design examples of how to add a clear button to the Bootstrap Input (also known as FormControl in react-bootstrap): We’ll … Read more
Bootstrap Buttons can be disabled using one of two methods: the “disabled” class or the “disabled” attribute. We’ll explore the element styling when the button is disabled and how click events are blocked. You can use either the “disabled” class or the “disable” attribute, both are not needed for disabling a button. Check out these … Read more
You may have seen click and onClick with Bootstrap Buttons and wondered what the difference was. You may also wonder what values exist on the click event that are passed to the click handler. This post will answer these questions. Bootstrap Button click events are used with vanilla JavaScript, while onClick is used when Bootstrap … Read more
Icons are an essential part of Bootstrap Accordions. They give quick visual indication about the expanded or closed state of the accordion. Because of this, it is important to be able to customize icons according to your project’s style system. In this demo I will show how to control the icon color and customize the … Read more
Bootstrap has a robust layout system with many options for setting or customizing padding. In this post I will focus on vertical and horizontal padding in Bootstrap v5, and I will also show v3 and v4 classes and systems for applying padding. Bootstrap has upgraded it’s default classes and it’s styling utilities in version 5. … Read more
Bootstrap makes layouts easy and has an excellent component library. However, sometimes it can be tricky to get buttons and other components aligned exactly as needed. In this tutorial I will build the grid shown below. It will have buttons aligned right, left, and vertically. I will show alignment with both flex CSS and bootstrap … Read more
