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 525 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

How to Create a Right Overflow Effect on Sliders in Bricks

How to Create a Right Overflow Effect on Sliders in Bricks

In this tutorial, we'll learn how to recreate a nice overflow effect on the right of our sliders in Bricks. Introduction Recently, I've been asked…
Categories:
Pro
Dynamic Horizontal Posts Accordion in Bricks

Dynamic Horizontal Posts Accordion in Bricks

Creating a horizontal accordion of featured images from posts output by Bricks' query loop.
Categories:
Tags:
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Categories:
Tags:
Pro
Click-type Infinite Scroll in Bricks Builder

Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. Step 1 Edit your…
Categories:
How to add SVG icon as list item bullets

How to add SVG icon as list item bullets

Add this sample CSS: Replace brxe-list with the class of your ul element. Here's how you can generate the value of background-image property: Copy your…
Categories:
Tags:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
Add masonry style to the Remote Template list

Add masonry style to the Remote Template list

This article will show you how to transform the remote templates list of Bricks in a masonry style without cropping your images - it will…
Categories:
Tags:
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Categories:
Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Categories:
Tags: