DEV Community

Nishtha Neeraj Kushwah
Nishtha Neeraj Kushwah

Posted on • Updated on

How To use libraries and framework in Codepen

Table Of Contents

  1. What is Codepen?
  2. How To add CSS Frameworks
  3. How To add JS Libraries

What is Codepen?

Ans. CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them.

How To add CSS Frameworks

  1. Headover To Your CSS Section Step1
  2. Click on the settings(wheel) icon Step2
  3. Then Scroll Down and find the Add External Stylesheets/Pens Step1
  4. And then in the input section add your style sheet url or search for any style sheet in searchbox (for example:bootstrap's css link https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css) Step1

Done Now You can use your linked stylesheet in your codepen project as usual now do same for javascript

How To add JS Libraries

  1. Headover To Your JS Section
  2. Click on the settings(wheel) icon
  3. Then Scroll Down and find the Add External Scripts/Pens
  4. And then in the input section add your script sheet url or search for any script in searchbox (for example: bootstrap's JavaScript link https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js)

Top comments (4)

Collapse
 
planet_cbx profile image
Charlène Bonnardeaux

Amazing! I don’t know this possibility of putting a same style sheet all over my project with code pen! Goodbye the ugly testing!!

Collapse
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah

What do you mean by ugly testing

Collapse
 
planet_cbx profile image
Charlène Bonnardeaux

Ugly trunk of code in the codepen ;) sorry my English is terrible and it s difficult to figuring out ideas ;)

Thread Thread
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah

No problem