Open In App

Bulma Flex Wrap

Last Updated : 02 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will be learning about flex-wrap property in Bulma. In Bulma, the flex-wrap property is used as a helper. The flex-wrap property in Bulma allows the user to wrap the flex items either into a single line or wrapped onto multiple lines in a container. There are three classes available in Bulma that are used to wrap the flex items.

Bulma Flex Wrap Classes:

  • is-flex-wrap-nowrap: This class of flex-wrap is a default class in which the flex item is wrapped in the container.
  • is-flex-wrap-wrap: This class of flex-wrap is used to wrap flexible items.
  • is-flex-wrap-wrap-reverse: This class of flex-wrap is used to wrap flexible items in reverse order.

Syntax:

<div class="columns Flex-Wrap-Class>
    ....
</div>

Example 1: Below examples illustrates the Bulma is-flex-wrap-wrap property.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href=
    />
  </head>
  <body>
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Flex Wrap</b><br><br>
    <div class="container">
      <div class="p-4 columns is-flex-wrap-wrap has-background-primary">
        <div class="p-2 box has-background-light">Flex item 1</div>
        <div class="p-2 box has-background-light">Flex item 2</div>
        <div class="p-2 box has-background-light">Flex item 3</div>
        <div class="p-2 box has-background-light">Flex item 4</div>
        <div class="p-2 box has-background-light">Flex item 5</div>
        <div class="p-2 box has-background-light">Flex item 6</div>
        <div class="p-2 box has-background-light">Flex item 7</div>
        <div class="p-2 box has-background-light">Flex item 8</div>
        <div class="p-2 box has-background-light">Flex item 9</div>
      </div>
    </div>
  </body>
</html>


Output:

Bulma Flex Wrap

Bulma Flex Wrap

Example 2: Below examples illustrate the Bulma is-flex-wrap-wrap-reverse property.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href=
    />
  </head>
  <body>
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Flex Wrap</b><br><br>
    <div class="container">
      <div class="p-4 columns 
                  is-flex-wrap-wrap-reverse 
                  has-background-primary">
        <div class="p-2 box has-background-light">Flex item 1</div>
        <div class="p-2 box has-background-light">Flex item 2</div>
        <div class="p-2 box has-background-light">Flex item 3</div>
        <div class="p-2 box has-background-light">Flex item 4</div>
        <div class="p-2 box has-background-light">Flex item 5</div>
        <div class="p-2 box has-background-light">Flex item 6</div>
        <div class="p-2 box has-background-light">Flex item 7</div>
        <div class="p-2 box has-background-light">Flex item 8</div>
        <div class="p-2 box has-background-light">Flex item 9</div>
      </div>
    </div>
  </body>
</html>


Output:

Bulma Flex Wrap

Bulma Flex Wrap

Example 3: Below examples illustrate the Bulma is-flex-wrap-nowrap property.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href=
    />
  </head>
  <body>
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Flex Wrap</b><br><br>
    <div class="container">
      <div class="p-4 columns
                  is-flex-wrap-nowrap 
                  has-background-primary">
        <div class="p-2 box has-background-light">Flex item 1</div>
        <div class="p-2 box has-background-light">Flex item 2</div>
        <div class="p-2 box has-background-light">Flex item 3</div>
        <div class="p-2 box has-background-light">Flex item 4</div>
        <div class="p-2 box has-background-light">Flex item 5</div>
        <div class="p-2 box has-background-light">Flex item 6</div>
        <div class="p-2 box has-background-light">Flex item 7</div>
        <div class="p-2 box has-background-light">Flex item 8</div>
        <div class="p-2 box has-background-light">Flex item 9</div>
      </div>
    </div>
  </body>
</html>


Output: 

Bulma Flex Wrap

Bulma Flex Wrap

Reference: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-wrap



Similar Reads

Bulma Flex grow and flex shrink
Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. In this article, we will learn about Bulma flex-grow and flex-shrink properties. The Bulma framework allows the users to use CSS flex-shrink and
2 min read
Tailwind CSS Flex Wrap
The CSS flexbox is a vital feature to develop the frontend, there are three wraps available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-wrap Property for fast development of front-end. Note: To activate the flex-wrap you have to include the flex class in your element before the flex-w
2 min read
Bootstrap 5 Flex Wrap
Bootstrap 5's flex-wrap utility enables flexible layout control, allowing items to wrap as needed within a flex container. It offers options like nowrap, wrap, and wrap-reverse for responsive design. Bootstrap 5 Flex Wrap Classes: CSS ClassDescriptionflex-wrapChanges how flex items wrap in a flex container.flex-wrap-reversePerforms reverse wrapping
3 min read
CSS flex-wrap property
The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container. Syntax:   flex-wrap: nowrap | wrap
3 min read
Bootstrap 5 Flex Enable Flex Behaviors
Bootstrap 5 Enable Flex Behaviors are used to apply display utilities to create a flexbox container and transform direct children elements into flex items. With more flex properties, flex items and containers can be further modified. Utility classes: .d-flex: It displays an element as a flex container..d-inline-flex: It displays an element as an in
2 min read
What is the difference between display:inline-flex and display:flex in CSS ?
In this article, we will see the display property &amp; its values, i.e. the inline-flex &amp; flex, in order to specify the display behavior of an element, along with understanding their basic differences &amp; will illustrate them through the examples. Both CSS display: inline-flex and display: flex properties are used to create flexible layouts.
3 min read
Bulma Flex Direction
In this article, we'll be seeing flex-direction in Bulma. In Bulma, the flexbox properties are used as helpers. The flex-direction property allows the user to set the direction of items in a flex container with direction utilities, like row, row-reverse, column, column-reverse. Sometimes, the horizontal classes can be omitted as the default directi
3 min read
What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break: break-all; It is used to break the words at any ch
2 min read
jQuery wrap() Method
The wrap() method is an inbuilt method in jQuery which is used to wrap the specified element around the selected element. Syntax: $(selector).wrap(element, function)Parameters: This method accepts two parameters as mentioned above and described below: element: It is a required parameter that is used to specify the element to wrap around the selecte
2 min read
CSS word-wrap Property
The word-wrap property in CSS is used to break long words and wrap them into the next line. It defines whether to break words when the content exceeds the boundaries of its container. Syntax: word-wrap: normal|break-word|initial|inherit; Property Value: normal: It is the default value, The lines can only be broken at normal break points (spaces, no
1 min read
Article Tags :