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
- After installing this package go into your
angular.jsonfile and add these lines to this object.
"styles": [
"src/styles.scss",
"node_modules/bulma/css/bulma.min.css"
],
- Run your angular application.
ng serve
- 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>
Let's check our browser.
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)