Problem with Bootstrap in CodePen

I’m feeling really stupid.

I’m trying to start my first project on CodePen, and I don’t know where or how to start. I have “cheated” and turned to a video on Youtube. Still, I don’t seem to have Bootstrap available. How can I make sure if it is working or there’s something wrong with my code?

What the hell is Bootstrap by the way?

thanks to anyone out there for your help.

go to settings - > css - > quick add -> bootstrap save
write smth like <div class="btn btn-primary">my button</div> in your html editor if the blue styled button appears, reacts to hover everythings fine

btn btn-primary are BS classes( btn is for button and primary is for blue bs color), you apply them to some element and it gets styled accordingly
see https://v4-alpha.getbootstrap.com/getting-started/introduction/ , check layout , components on the right.Bootstrap is css framework
theres some other stuff you’d better look through docs

1 Like

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.
Bootstrap uses a proprietary CSS, Javascript, & JQuery to accomplish this.

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.

  1. Click on HTML and copy and paste the following in the panel that says “Head Stuff”
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">.

  2. Click on CSS and in the panel near the bottom where you add external resources paste this in.
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
    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.

  3. Click on Javascript and again in the panel near the bottom paste in this:
    [https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js]
    (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js)
    While still in the Javascript settings, now click quick add and select JQuery.

  4. Click on the green Save & Close button.
    Your codepen should now be configured to run bootstrap.

  5. Test it out.
    Copy and paste code from one of the tutorials in the link I provided.
    Should render correctly.

2 Likes

As @Annestezia already wrote, go to your settings while you’re editing your pen, choose CSS, quick add and then choose Bootstrap.

As for what Bootstrap is, Bootstrap is a framework that you can use as a basis to create websites etc.
At http://getbootstrap.com you can find all the necessary information and documentation :slight_smile:

Cheers

Thanks a lot guys,

Like you said, I added it on CSS and tried some class on a

    and it doesn’t to seem working.

    I’ll look into those websites you suggested.

    Many thanks!!