Customizing Your Bootstrap CSS with the Chrome Inspector

There are a number of tools online that will help you create a customized bootstrap css. This short guide will show you how to customize your own bootstrap CSS, specifically for this tutorial, the Card class.

Bootstrap Setup

The first thing we need to do is include the boostrap CSS in our document. Next include your own custom CSS file. Below is a screenshot of the demo code for this tutorial. You can see that I have included fontawesome, bootstrap, and my custom css file. It is important to load your CSS document¬†after loading bootstrap’s CSS file.

include css in html pageChrome Inspector

There is a handy tool in Chrome that developers and designers use. If you press Ctrl+Shift+I it will open the inspector.

chrome inspectorAt the top of the inspector you can see an icon that is an arrow over a bow (top left). Click this icon and you can mouse over an area on the web page. When you click an area on the web page it will take you to the HTML for that part of the document.

The HTML

To begin modifying the Card class in the Bootstrap CSS framework is to create a card on our demo html page.

bootstrap card demo

Next, open your HTML document and then open the Inspector. Once the inspector is ready, click on the Card element you created (like in my example above). Once you click the card, on the right you will see CSS in the inspector.

card css

In this panel we can change the CSS for the element to whatever we want. Once you get the card looking the way you want, select the CSS, paste it in your custom CSS document.

select css inspector

Leave a Comment

Your email address will not be published. Required fields are marked *