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.

Leave the first comment