Bootstrap is a massive CSS framework, and it's difficult to identify which styles format which page elements. Chrome DevTools can help. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Using DevTools, you can select any page element and see which styles are in effect.
Download Google Chrome if you don't already have it on your computer. Preview your HTML file in Chrome.
For example, let's say you'd like to change the gray background color of the card-header. Control-click (Right-click Windows) the header and choose "Inspect" from the context menu.
A side panel opens with the DevTools. Choose <div class="card-header" id="headingOne">. In the right panel, you'll see that the light-gray background color is applied to the .card-header style.
Copy the .card-header style.
Open your custom.css file and Edit > Paste the style you copied from Google Chrome. Here you can modify the properties, choosing a different background color.
One final tip. If you are using the Bootstrap CDN links, the link to the right of the .card-header style will list the location as _card.scss. The browser is pulling up the precompiled SASS files. If you'd like to see the location in the compiled files, click the icon with the three vertical dots and choose Settings.
Uncheck the "Enable CSS source maps" setting.
When you return to DevTools, the location will be updated to bootstrap.min.css.
Click the link to view the full bootstrap.min.css file. If the file is minified, you'll just see one line of code. To make it more legible, click the {} icon in the lower toolbar. After preforming this step, you'll see the full set of styles. You could easily copy several styles and paste into your custom.css for further modification.
One final tip. If you are trying to identify the selector for a link, click the :hov filter.
From here, you can identify which selector formats a particular link state, like :hover or :visited.
