How to Customize Bootstrap NavBar Background and Text Color

The Bootstrap NavBar has several available classes for optimizing text color, background color, and other properties. However, understanding when to use these classes and how to customize them can be challenging. In this tutorial we will create a NavBar with the following custom features: Here is the Bootstrap NavBar what we will build in this … Read more

The Complete Guide to Bootstrap Font Size

Bootstrap has some great built-in methods for setting element font size and making font size responsive. In this tutorial I will discuss and demo the most features Bootstrap offers for controlling font size. Here is a screenshot of elements with a custom root font size sass variable: In the sections below we will explore Bootstrap … Read more

Change Bootstrap Button Color with Classes or Variables!

Bootstrap 4 and 5 have several methods for styling button color. In this tutorial we will create several custom buttons using classes and variables for controlling color. I will show examples with both vanilla Bootstrap and React-Bootstrap. Here are the buttons we will create in this tutorial: Bootstrap has lots of built-in variables and classes. … Read more

Using and Customizing Bootstrap Border Radius: 3 Examples!

Bootstrap 5 comes with seven different border radius classes for precisely targeting different corners of elements. In this tutorial I will explore the default border radius class styling as well as how to override a the SASS variable used in all the classes. Here’s what we will create: We’ll create several other stylings along the … Read more

How to Customize Bootstrap Table Column Width: 3 Examples!

Bootstrap tables have different column width behavior based on the combination of table-layout styling and column width styling. In this tutorial we will explore how default table-layout, width: auto, and table-layout: fixed on the table affect column width. We will then customize table column width. Here are the three tables we will create. Each has … Read more