DEV Community

Cover image for Add BULMA in Angular
venkateshpensalwar
venkateshpensalwar

Posted on

Add BULMA in Angular

Bulma is an open-source framework that offers a collection of pre-built front-end components. These components can be seamlessly combined to create responsive web interfaces. Best of all, Bulma is free to use! and boasts over 1.1M monthly downloads.😊

  • Visit BULMA's official website https://bulma.io/

  • On this website, you will see the npm command to install this CSS framework

npm install bulma
Enter fullscreen mode Exit fullscreen mode
  • After installing this package go into your angular.json file and add these lines to this object.

angular json

"styles": [
            "src/styles.scss",
            "node_modules/bulma/css/bulma.min.css"
          ],
Enter fullscreen mode Exit fullscreen mode
  • Run your angular application.
ng serve
Enter fullscreen mode Exit fullscreen mode
  • Open the app.component.html file remove all default HTML and change the HTML with the following
<div class="container m-2">
    <div class="buttons">
        <button class="button is-primary">Primary</button>
        <button class="button is-link">Link</button>
    </div>

    <div class="buttons">
        <button class="button is-info">Info</button>
        <button class="button is-success">Success</button>
        <button class="button is-warning">Warning</button>
        <button class="button is-danger">Danger</button>
    </div>
    <div class="notification is-success">
        <button class="delete"></button>
        Primar lorem ipsum dolor sit amet, consectetur
        adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.
        Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
    </div>
    <div class="notification is-info">
        <button class="delete"></button>
        Primar lorem ipsum dolor sit amet, consectetur
        adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.
        Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Let's check our browser.

html page

In this way, we integrated BULMA CSS into our Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!

Top comments (0)