25th Nov '22
/
0 comments

Floats in Bricks for Wrapping Text Around Images

In the Bricks Facebook group a user asks:

Float, left or right?

Just a quick question.

Am I going crazy or can’t I specify a float anywhere in a div’s settings?

Does this have to be done with custom css or are there just settings to easily indicate which float you want to give a div or another element?

If this has to be done with css no problem but find me an accident now

As can be seen on the Wrapping Text Around Images WordPress codex page,

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

and Bricks parent theme does support these.

alignleftalignright and aligncenter classes can be added on images to wrap text or to center the images.

Here’s how you can make use of these in Bricks.

Add a Section and inside its Container, a Div having an Image and Basic Text.

It is important that you use a Div element as the parent here if you want to have text wrapping around the image because its display property is set to block by default. If you do use a Container or Block, change their display to block since their display is flex out of the box.

Add alignleft (or alignright) class to the image.

If you would like to add the class in the active class input, you may want to lock it to prevent adding additional style rules to it. Alternately, you could go to STYLE → CSS → CSS Classes and add it there.

Bonus

It is also possible to apply these alignment classes to a div containing other Bricks elements and have text wrap around it.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Pro
Dropdown Menu in Bricks using Interactions

Dropdown Menu in Bricks using Interactions

This Pro tutorial provides the steps to toggle a WordPress menu when a div is clicked using the Interactions feature in Bricks. When clicked: Step…
Categories:
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Categories:
Pro
Oxygen’s Focus Section in Bricks

Oxygen’s Focus Section in Bricks

These are the steps to implement Focus Section, an Oxygen’s composite element, in Bricks.
Categories:
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Categories:
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Categories:
Tags:
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Categories: