Let me start out by saying you have a great start. What you have shown in your pen is very visually appealing.
However, your pen is totally not responsive at this point. You are attempting to use several bootstrap framework elements incorectly.
Bootstrap is a framework that allows you to have web pages that look good at any device width. When used properly pages look good form a 55 inch t.v. screen down to a 300 pixel phone screen.
Before trying to use it in codepen, I would suggest you take some time to learn about bootstrap. Try these tutorials: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
When you do decide to use bootstrap in codepen there are some settings
you will have to make in codepen. Click on the settings button in the top portion of the codepen window.
- Click on HTML and copy and paste the following in the panel that says “Head Stuff”
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">.
Click on CSS and in the panel near the bottom where you add external resources paste this in.
If you try to use the quick add feature it will use the newer beta version of bootstrap. You really don’t want to use the beta version.
This is also where you will want to add the link to the font awesome.
Click on the green Save & Close button.
Your codepen should now be configured to run bootstrap.
Test it out.
Copy and paste code from one of the tutorials in the link I provided.
Should render correctly.