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..

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
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:
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:
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
Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…
Categories:
Pro
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Categories:
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
Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width…