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 <meta> and <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 <link> or <script> tags.
*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 