From the course: CSS and JavaScript Library Integration

Integrating Bulma CSS with React.js - JavaScript Tutorial

From the course: CSS and JavaScript Library Integration

Start my 1-month free trial Buy for my team

Integrating Bulma CSS with React.js

“

- [Instructor] Now that you have an understanding of what Bulma CSS is and why people use it, it's time to learn how to integrate it with your React project. You can create a fresh React project using npx create React app, Bulma React app, or open an existing project and open your terminal to run npm install Bulma. After you've created your React project, the next thing to do is npm i Bulma or npm install Bulma, install Bulma. Once this is done, go to your code and check your package.json to confirm if it has been added to your dependencies successfully. Next, import it into your index.js file, as imports Bulma, forward slash, CSS, forward slash, Bulma, dot, min, dot, CSS. Everything is now fully set up, and you can now proceed to build your first project using Bulma CSS. Let's try out this code to view how beautiful this is. I import an image called person from dot, forward slash, asset, forward slash, person.png. And I add a div of class name, column, and the column is four. That means it will take the size of four on my desktop screen. Then a div of class name, card. Then inside a div of card there is a card image, and you know a card has image, then has content and can have media, probably for text or for image avatar. This is what I did here. So there's card image, and inside the card image, there's a image tag of image, and the size of the image will be four by four. For the card content, there will be a media of small image, which is 48 x 48 or 48 by 48. Also for the card content, the class name to use is media content. Margin left will be three, and the title size is four, and the subtitle size is six. The name of the title will be John Doe, and the subtitle will be @johndoe. Then I added content for the card. Now, let's go back to our terminal and run npm starts to see if this work perfectly. It works perfectly. In the next lesson, you'll be working with Bulma CSS to build a simple card to display images in ties, and you will learn some syntax use cases that will make the library easy for you to use on your project.

Contents