In this guide, we will discuss Box and Icon in Bulma.
Description
The .box class defines a container including a border, radius, and padding.
The below example describes how to display box and icon for the elements on the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Box Element
</span>
<br>
<br>
<div class = "box">
<article class = "media">
<figure class = "media-left">
<p class = "image is-64x64">
<img src = "https://adglob.in/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Will Smith</strong>
<small>@wsmith</small>
<small>45m</small>
<br>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
</div>
<nav class = "level is-mobile">
<div class = "level-left">
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-reply"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-retweet"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
Icons
The .icon class provides icon font libraries such as Font Awesome icons, Material Design Icons, Ionicons etc for the elements. The color of the icons can be changed by using text color modifiers and icon size can changed by using is-small, is-medium and is-large classes with icon container.
The below example describes displaying of the simple icon, changing the icon colors (using is-info, is-success, is-warning, is-danger color modifiers) and sizes (using classes such as is-small, is-medium and is-large) −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Icon Element
</span>
<br>
<br>
<span class = "is-size-5">Simple Icon</span>
<br>
<span class = "icon">
<i class = "fas fa-user"></i>
</span>
<br>
<br>
<span class = "is-size-5">Icon Colors</span>
<br>
<span class = "icon has-text-info">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-success">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-warning">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-danger">
<i class = "fas fa-user"></i>
</span>
<br>
<br>
<span class = "is-size-5">Icon Sizes</span>
<br>
<span class = "icon is-small">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-user"></i>
</span>
<span class = "icon is-large">
<i class = "fas fa-3x fa-user"></i>
</span>
</div>
</section>
</body>
</html>
Icon Variations
Font Awesome variations provides different types of modifier classes to display the icons with fixed width, bordered icons, animated icons etc in the page. The Material Design icons allows user to display the color and size of the icons, as per their need. The Ionicons icons are open source icons, which are used in web, iOS, android and desktop applications.
Let’s create an example to demonstrate the usage of above icon variations in the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
<link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Icon Variations
</span>
<br>
<br>
<span class = "is-size-5">Font Awesome Icons</span>
<br>
<br>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-spinner fa-pulse"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-fw fa-user"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-border fa-user"></i>
</span>
<span class = "icon is-medium">
<span class = "fa-stack">
<i class = "fas fa-circle fa-stack-2x"></i>
<i class = "fas fa-user fa-stack-1x fa-inverse"></i>
</span>
</span>
<br>
<br>
<span class = "is-size-5">Material Design Icons</span>
<br>
<br>
<span class = "icon is-small">
<i class = "mdi mdi-18px mdi-account-box"></i>
</span>
<span class = "icon is-medium">
<i class = "mdi mdi-24px mdi-account-box"></i>
</span>
<span class = "icon is-large">
<i class = "mdi mdi-36px mdi-account-box"></i>
</span>
<br>
<br>
<span class = "is-size-5">Ionicons</span>
<br>
<br>
<span class = "icon is-small">
<ion-icon size = "small" name = "person"></ion-icon>
</span>
<span class = "icon is-large">
<ion-icon size = "large" name = "person"></ion-icon>
</span>
</div>
</section>
</body>
</html>
Next Topic : Click Here
Pingback: Bulma - Elements | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Content | Adglob Infosystem Pvt Ltd