That’s because Bootstrap is called after your custom CSS and it overwrites it. In your Pen, go to Settings > HTML and put all you
<link> tags inside the Stuff for
<head> box. That’s what it’s for and everything should load in the right order.
Also, remove your
<body> tag from your pen, it’s not needed. Everything you put in the HTML editor goes inside the body tag by default in Codepen.
Tip: You can also include CSS and JS libraries from the corresponding Setting tabs instead of putting them into
*Edit* I just saw that you are using the CSS and JS tabs to include libraries. Since you include them there, you don’t need to use the
<link> at all. You included Bootstrap 3 times in that pen