Bulma Mixins Block
Last Updated :
10 Mar, 2022
In this article, we will learn about Bulma Mixins Block. This is a mixin that adds spacing (margin/padding) below all the elements of the HTML but not after the last child element. Here, we use a $spacing parameter to add or define the parameter value for adding a spacing.
There is no specific class given by Bulma for creating a block mixin. We need to create our own class and style it using SASS mixins.
Syntax:
.bulma-block-mixin {
@include block(2rem);
}
Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.
Example 1: The below example illustrates the Bulma Block Mixin.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">
GeekforGeeks
</h1>
<h1 class="subtitle">Bulma Block Mixin</h1>
</div>
<div class="container subtitle
has-text-centered
has-background-success
has-text-white">
<h1 class="bulma-block-mixin">
This header has a spacing of margin-bottom.
</h1>
<h1 class="bulma-block-mixin">
This header too.
</h1>
<h1 class="bulma-block-mixin">
This does not because it's the last header/child.
</h1>
</div>
</body>
</html>
|
CSS
@mixin block($spacing) {
margin-bottom: $spacing;
}
.bulma-block-mixin {
@include block(2rem);
}
|
Output:
Bulma Mixins Block
Example 2: Another example illustrating the Bulma Block Mixin.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">
GeekforGeeks
</h1>
<h1 class="subtitle">Bulma Block Mixin</h1>
</div>
<div class="container
has-background-warning
has-text-centered">
<img class="bulma-block-mixin"
src=
<br>
<img class="bulma-block-mixin"
src=
<br>
<img class="bulma-block-mixin"
src=
</div>
</body>
</html>
|
CSS
@mixin block($spacing) {
margin-bottom: $spacing;
}
.bulma-block-mixin {
@include block(2rem);
}
|
Output:
Bulma Mixins Block
Reference: https://bulma.io/documentation/utilities/mixins/#block
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...