bootstrap-typography-overrider

This tool will help you to generate css for bootstrap typography by overriting fonts with google fonts.

Tool is using local storage to store the data in your browser. so start editing and may data will be with you until you clear cache.

I am quite lazy myself... that's the reason I am not creating any save button. Data will get stored in browser as soon as you type.

1. Visit following website

https://smitdesai16.github.io/bootstrap-typography-overrider/

2. Add google fonts

For this example I am planning to use my 2 faviourate fonts. Josefin Sans & Quicksand

Enter this names in place of fonts (use comma seperator and please check you are not adding any unnecessary spaces).

3. Select class/tag you want to work on

By default display-1 is selected but you can select any type provided from following list.

1. display-1
2. display-2
3. display-3
4. display-4
5. h1
6. h2
7. h3
8. h4
9. h5
10. h6

3. Start defining properties

I am big fan of mobile first development. I would recommend to start with mobile screen. but in this case all breakpoint values will get override anyway.. you can start from whichever breakpoint you want.

The tool will highlight current breakpoint based on your screen size.

Once you start changing value you can see result on the runtime on top.

4. Update, Review & Repeat

Keep repeating step 3 until you finish all classes which you desire to override in bootstrap. Resize window to see all possible breakpoints.

5. Get CSS and add in your project

5.1 Developer tools

Open developers tool by pressing f12 on chrome. If you are not using chrome; there will be similar way of doing this. Google is your friend.

5.2 Get styles from inspect element.

The styles will get generated into following DOM path.

body #app .row style

5.3 Saving style in project.

Just make sure you add this styles after adding bootstrap css.

As of now, I dont have better way to get this css to you; but I welcome all suggestions. 😄

To start from scratch again just press Reset All